各要素には 1 つ以上の属性があります。これらの属性の目的は、対応する要素またはそのコンテンツに関する追加情報を提供することです。例: img 要素では、src は要素の属性であり、画像のアドレスをマークするために使用されます。
属性を操作するための主な DOM メソッドは、getAttribute メソッド、setAttribute メソッド、removeAttribute メソッドの 3 つですが、それでも実際の操作には多くの問題があるため、ここでは説明しません。 jQueryでは、attr()とremoveAttr()を使用することで、互換性の問題も含めてすべてを解決できます
jQueryでは、attr()メソッドは、jQuery DOMのattribute(属性)の略称です。 Attr()は操作でよく使われます
attr()式は4つあります
attr (受信属性名): 属性の値を取得します
attr (属性名、属性値): の値を設定します属性
attr (属性名、関数値): 属性の関数値を設定します
attr (属性): 指定された要素に対して複数の属性値を設定します。つまり: {属性名 1: "属性値one", 属性名 two: " 属性値 two", … … }
removeAttr()削除メソッド
.removeAttr(attributeName): 一致した要素セット内の各要素から属性(属性)を削除します
利点:
attr とremoveAttr は両方とも属性操作のために jQuery によってカプセル化されているため、jQuery オブジェクト上でこのメソッドを直接呼び出すことで属性の操作が簡単になり、ブラウザーでの異なる属性名の問題を特別に理解する必要はありません
。 質問に注意してください:
dom には概念的な違いがあります。Attribute と Property はどちらも「属性」と訳され、書籍「JS Advanced Programming」は「機能」と「プロパティ」と訳されます。簡単に理解すると、Attribute は DOM ノードに付属する属性です
例: id、class、title、align など、HTML で一般的に使用されます:
<div id="phpcn" title="php中文网"></div>
そして Property はオブジェクトとしてのこの DOM 要素とその追加要素ですtagName、nodeName、nodeType、defaultChecked、defaultSelected などのコンテンツは、 .prop() メソッドを使用して値などを取得または割り当てます。
属性を取得するには attr を使用する必要があり、Property を取得するには、次のことを行う必要があります。 prop を使用してください
以下の例を見て画像を変更してみましょう。 属性値
のコードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<img src="1.jpg" width="200" height="200" id="img">
<script type="text/javascript">
$("#img").attr('width','400');
</script>
</body>
</html> 注: まず、この画像 1.jpg を用意する必要があります。次に、結果を実行します
attr() メソッドを使用して属性値を取得する方法は? 以下の例を見てください
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<input type="text" value="php 中文网" id="ipt">
<script type="text/javascript">
alert($("#ipt").attr('value'));
</script>
</body>
</html> ポップアップ ボックスに表示されている内容が php 中国語の Web サイトであることがわかります
removeAttr() の下の要素の内容を削除する方法を見てみましょう
コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<input type="text" value="php 中文网" id="ipt">
<script type="text/javascript">
$("#ipt").removeAttr("value");
</script>
</body>
</html> 注: 元々はテキスト ボックスの内容があり、スクリプト言語が実行されると、テキストの内容が削除されます。
次のセクション