ホームページ >ウェブフロントエンド >jsチュートリアル >jquery のどの属性に attr() でアクセスする必要がありますか?

jquery のどの属性に attr() でアクセスする必要がありますか?

坏嘻嘻オリジナル: 2018-09-14 15:23:541317ブラウズ

jQuery on() メソッドは、イベントをバインドするための公式に推奨されるメソッドです。

最初に、これら 2 つのメソッドの違いについて説明します。

1. attr() メソッドにパラメータが 1 つしかない場合、属性を返します。 value. の 2 つのパラメータは、最初のパラメータの属性値を設定します。

2 属性を設定する場合、prop() メソッドの戻り値は、true または false です。 true または false のみを設定してください

Chrome ブラウザでのテスト結果は次のとおりです:

戻り値のプロパティ:

    <input type="checkbox" name="item" id="radio-item1" checked/>1
    <input type="checkbox" name="item" id="radio-item2" checked="checked"/>2
    <input type="checkbox" name="item" id="radio-item3" checked="true"/>3

    <script src="jquery.min.js"></script>
    <script>
       var value1 = $("#radio-item1").attr("checked");
       var value2 = $("#radio-item2").attr("checked");
       var value3 = $("#radio-item3").attr("checked");
       var value4 = $("#radio-item1").prop("checked");
       var value5 = $("#radio-item2").prop("checked");
       var value6 = $("#radio-item3").prop("checked");

       console.log(value1);  //checked
       console.log(value2);  //checked
       console.log(value3);  //checked
       console.log(value4);  //true
       console.log(value5);  //true
       console.log(value6);  //true
    </script>

プロパティの設定:

<body>
    <input type="checkbox" name="item" id="radio-item1" />1
    <input type="checkbox" name="item" id="radio-item2" />2
    <input type="checkbox" name="item" id="radio-item3" />3
    <input type="checkbox" name="item" id="radio-item4" />4
    <input type="checkbox" name="item" id="radio-item5" />5
    <input type="checkbox" name="item" id="radio-item6" />6

    <script src="jquery.min.js"></script>
    <script>
       $("#radio-item1").attr("checked","checked");
       $("#radio-item2").attr("checked","true");
       $("#radio-item3").attr("checked","");
       $("#radio-item4").prop("checked","checked");
       $("#radio-item5").prop("checked","true");
       $("#radio-item6").prop("checked","");


       var value1 = $("#radio-item1").attr("checked");
       var value2 = $("#radio-item2").attr("checked");
       var value3 = $("#radio-item3").attr("checked");
       var value4 = $("#radio-item4").prop("checked");
       var value5 = $("#radio-item5").prop("checked");
       var value6 = $("#radio-item6").prop("checked");

       console.log(value1);  //checked
       console.log(value2);  //checked
       console.log(value3);  //checked
       console.log(value4);  //true
       console.log(value5);  //true
       console.log(value6);  //false
    </script>
</body>

属性を読み取るとき、checked 属性が設定されている限り、prop() は true を読み取り、attr() は selected を読み取ることができることがわかります。属性を設定する場合、prop() で設定される値は true または false であり、空の文字列は false ですが、attr() では設定値がどのようなものであっても、設定されている場合はチェックされます。

prop() メソッドによって設定されたプロパティは、HTML プレビュー中には表示されないことに注意してください。

jquery のどの属性に attr() でアクセスする必要がありますか?

prop メソッドには 2 つの原則があります:

最初の原則: 属性名のみを追加します。これは有効になり、prop() を使用する必要があります。

2 番目の原則: true/false が存在するプロパティのみが prop() を使用する必要があります。

jquery のどの属性に attr() でアクセスする必要がありますか?

関連記事