理解できないW3V検証エラーが表示されます。
行31、列61:属性
name
は、この時点では要素div
で許可されていません。
それがこの行です:
<div name="message" class="jGrowl bottom-right errorGrowl"></div>
完全なHTML:
<!DOCTYPE html>
<html>
<head>
<title>jGrowl</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="data/awo-jgrowl.js"></script>
<script type="text/javascript" src="data/shortcut.js"></script>
<link rel="stylesheet" type="text/css" href="data/awo-jgrowl.css">
<script type="text/javascript">
$(document).ready(function() {
$('div[name=message]').awomsg('Input message', {sticky: true});
});
shortcut.add("m",function() {
$('div[name=message]').awomsg('Input message', {sticky: true});
});
shortcut.add("h",function() {
alert('ur doin it wrong');
});
</script>
</head>
<body>
<div name="message" class="jGrowl bottom-right errorGrowl"></div>
</body>
</html>
エラーメッセージは、一目瞭然のようです。 name
タグにdiv
属性を持つことはできません。したがって、コードは次のようになります。
<div id="message" class="jGrowl bottom-right errorGrowl"></div>
次に、IDセレクターを使用します。
$('div#message')...
私はいくつかのエントリを見つけました:
マークアップ検証エラー:「この時点では要素に属性名を使用できません」エラー#HTML5
カスタム属性を定義する場合に備えて、属性に「data-
」を追加する必要があります。
したがって、この場合、名前はdata-name=""
になります。
また、'div[data-name="value"]'
で参照できます。
Div要素にはname
属性はありません。
一意に識別する場合は、id
を使用します。
グループのメンバーとしてマークする場合は、class
を使用します。
(非推奨ではない)name
属性を使用できる唯一の場所は、フォームコントロール(input
、select
、textarea
およびbutton
)。
これは遅い応答ですが、このページは検索で表示されたばかりです。
Name属性は特定の要素では許可されておらず、必要のない形式では特別な意味を持ちますが、「data-」で始まる属性名は独自の目的で使用することが許容されるため、「data-name次のような属性:
<div data-name="message" class="jGrowl bottom-right errorGrowl"></div>
次のように書くことができます:
$('[data-name="message"]').text("Here is a new message!");
それ以外の場合は、jQueryを介してdivを操作します。
データ属性の使用には、フロントエンドのデザイナーがCSSの目的でIDとクラス名を使用して実行していることと競合する可能性が低いという長所があります。
私たちのオフィスでは、IDとクラスはCSS用に予約されていることを理解しており、JavaScript開発者はそれらを放っておかなければなりません。逆に、フロントエンドデザイナーは、データ属性を混乱させない限り、ID、クラス、またはほとんどのものの要素タイプを変更することを歓迎します。
name
属性は、DIV要素の仕様の一部ではありません。 name
は、一般的に、フォーム要素でのみ有効です。