jqueryの屬性とスタイル (1)
各要素には 1 つ以上の屬性があります。これらの屬性の目的は、対応する要素またはそのコンテンツに関する追加情報(bào)を提供することです。例: img 要素では、src は要素の屬性であり、畫像のアドレスをマークするために使用されます。
屬性を操作するための主な DOM メソッドは、getAttribute メソッド、setAttribute メソッド、removeAttribute メソッドの 3 つですが、それでも実際の操作には多くの問題があるため、ここでは説明しません。 jQueryでは、attr()とremoveAttr()を使用することで、互換性の問題も含めてすべてを解決できます
jQueryでは、attr()メソッドは、jQuery DOMのattribute(屬性)の略稱です。 Attr()は操作でよく使われます
attr()式は4つあります
attr (受信屬性名): 屬性の値を取得します
attr (屬性名、屬性値): の値を設(shè)定します屬性
attr (屬性名、関數(shù)値): 屬性の関數(shù)値を設(shè)定します
attr (屬性): 指定された要素に対して複數(shù)の屬性値を設(shè)定します。つまり: {屬性名 1: "屬性値one", 屬性名 two: " 屬性値 two", … … }
removeAttr()削除メソッド
.removeAttr(attributeName): 一致した要素セット內(nèi)の各要素から屬性(屬性)を削除します
利點(diǎn):
attr とremoveAttr は両方とも屬性操作のために jQuery によってカプセル化されているため、jQuery オブジェクト上でこのメソッドを直接呼び出すことで屬性の操作が簡単になり、ブラウザーでの異なる屬性名の問題を特別に理解する必要はありません
。 質(zhì)問に注意してください:
dom には概念的な違いがあります。Attribute と Property はどちらも「屬性」と訳され、書籍「JS Advanced Programming」は「機(jī)能」と「プロパテ?！工仍Uされます。簡単に理解すると、Attribute は DOM ノードに付屬する屬性です
例: id、class、title、align など、HTML で一般的に使用されます:
<div id="phpcn" title="php中文網(wǎng)"></div>
そして Property はオブジェクトとしてのこの DOM 要素とその追加要素ですtagName、nodeName、nodeType、defaultChecked、defaultSelected などのコンテンツは、 .prop() メソッドを使用して値などを取得または割り當(dāng)てます。
屬性を取得するには 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 を用意する必要があります。次に、結(jié)果を?qū)g行します
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 中文網(wǎng)" id="ipt">
<script type="text/javascript">
alert($("#ipt").attr('value'));
</script>
</body>
</html>ポップアップ ボックスに表示されている內(nèi)容が php 中國語の Web サイトであることがわかります
removeAttr() の下の要素の內(nèi)容を削除する方法を見てみましょう
コードは次のとおりです:
<!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 中文網(wǎng)" id="ipt">
<script type="text/javascript">
$("#ipt").removeAttr("value");
</script>
</body>
</html>注: 元々はテキスト ボックスの內(nèi)容があり、スクリプト言語が実行されると、テキストの內(nèi)容が削除されます。
