属性操作
JQueryは、ネイティブJSでのHTMLタグの操作を簡素化するために使用できる、いくつかのHTMLタグ属性操作をカプセル化します。これらのカプセル化されたメソッドを分類すると、一般属性（一般）に適用できる操作と特定の操作に大別できます。クラス属性の操作には、一般的に次のものが使用されます。
一般的な属性操作
-
attr：これは通常、srcなどのDOM状態の一部の属性、CSSに関連する一部の属性などをチェックしないために使用されます。
-
JQuery object.attr（ "attribute name"、 "value"）：パラメーターが1つしかない場合は属性の値を取得し、valueパラメーターを開始および終了するときに属性の値を設定します。
-
JQuery object.removeAttr（ "attribute name"）：対応するコンポーネントから対応する属性を削除します。
-
構文：$（selector）.attr（ "key"、 "value"）;
例：
var src = $("img").attr("src"); //获取值 $("img").attr("src", img_path); //设置值 $("img").removeAttr("src"); //移除src属性 -
-
prop：通常、コンポーネント内のチェック済み、無効化、選択済み、およびその他の属性の操作に使用されます。
-
JQuery object.prop（ "property name"、 "value"）：パラメーターが1つしかない場合はプロパティの値を取得し、valueパラメーターを入力および終了するときにプロパティの値を設定します。
-
JQuery object.removeProp（ "property name"）：対応するコンポーネントから対応するプロパティを削除します。
-
構文：$（selector）.prop（ "key"、 "value"）;
例：
<input type="checkbox" checked="checked" /> <script> $("input").prop("checked"); //获取checkbox的选中状态 $("input").prop("checked", false); //设置为没有选中状态 $("input").prop({ checked:false}); //使用对象的方式也是可行的 $("input").removeProp("checked"); //移除由.prop设置的属性 </script>
-
いくつかの組み込み属性に対するpropとattrの影響について：これを例として取り上げると、表の右側はメソッドの戻り値です。
elem.checked |
true （ブール値）チェックボックスの状態が変化すると変化します |
|---|---|
$(elem).prop("checked") |
true （ブール値）チェックボックスの状態が変化すると変化します |
$(elem).getAttribute("checked") |
"checked" （文字列）チェックボックスの初期状態。変更されません |
$(elem).attr("checked") （1.6） |
"checked" （文字列）チェックボックスの初期状態。変更されません |
$(elem).attr("checked") （1.6.1+） |
"checked" （文字列）チェックボックスの状態が変化すると変化します |
$(elem).attr("checked") （1.6より前） |
true （ブール値）チェックボックスの状態が変化すると変化します |
注：1.xバージョンでは、attrを設定してcheckedなどの組み込み属性を取得できますが、新しいバージョン3.xでは許可されなくなりました。propsでのみ取得できるため、組み込み属性で操作する場合操作には支柱の使用をお勧めします。
クラス属性操作
JQueryのカプセル化メソッドを使用すると、コンポーネントにスタイルを追加するために複数のCSSクラスを追加するなど、コンポーネントクラス属性に属性値を簡単に追加できます。一般的に使用されるのは次のとおりです。
- $（selector）.addClass（ "className"）：オブジェクトのクラス属性値を対応するオブジェクトに追加します。
- $（selector）.removeClass（ "className"）：オブジェクトのクラス属性値を削除します。
- $（selector）.toggleClass（ "className"）：オブジェクトのクラス属性値の状態を変更します。値がすでに存在する場合は値を削除し、存在しない場合は値を追加します。これを使用して属性を反転できます。-「ボタンのプロパティをクリックしてスタイルを変更してください〜
- $（selector）.css（key、value）：要素のスタイルを設定します。
例：
<style>
.class1{
width:100px; height:100px;}
.class2{
border:1px solid blue; border-radius:10%;}
.class3{
backgound-color:pink;}
</style>
<script>
//一般适用时都是通过对应的方法来进行动态设置样式
$("div").addClass("class2"); //添加class2样式
$("div").removeClass("class1"); //移除class1样式
$("div").toggleClass("class3"); //由于div中class属性中原本没有class3值，则会添加
$("div").css("backgroundColor", "yellow"); //设置背景色为yellow
</script>
<body>
<div class="class1">
这是一个div
</div>
</body>
属性値の操作
- $（selector）.html（）：JSネイティブオブジェクトのinnerHTMLと同じように、要素のhtml値を取得します。
- $（selector）.text（）：要素のテキスト値を取得します
- $（selector）.val（ "value"）：valueパラメーターが渡されると、value属性の値が設定されます。渡されない場合は、value属性の値が取得され、入力タグで使用できます。
.html（）と.text（）の違い：
<div><p>“这片大海不可能一直自己一个人的”</p></div>
<input value="">
<script>
$("div").html(); //会获取div内置中所有的内容，即整个p标签
$("div").text(); //只会获取“这片大海不可能一直自己一个人的” 这段文本内容
$("input").val("hello jquery"); //可以设置input输入框的内容为 hello jquery
</script>
その他のコンテンツを表示できます：属性操作公式ドキュメント
JQueryローカルドキュメントダウンロード：CSDNダウンロード
JQueryさまざまなバージョンのダウンロード：CSDNダウンロード