JQueryでのprop（）メソッドの使用

以前のバージョンのJQueryでは、attr（）を使用してオブジェクトの属性にアクセスしていました。たとえば、画像のalt属性を取得するには、次のようにします$（ "＃img"）。attr（ "alt"）;ただし、入力のdisabled属性にアクセスする場合など、問題が発生する場合があります。一部のブラウザでは、disabled属性のみを書き込む必要がありますが、一部のブラウザでは、disabled = "disabled"と記述する必要があります。そのため、バージョン1.6以降、JQueryはこれらのプロパティを取得するための新しいメソッドprop（）を提供します。prop（）を使用する場合、戻り値は標準プロパティです。true/ false（例：$（ "＃checkbox"）。prop（ "disabled"）、 "disabled"または ""は返されず、true /のみが返されます。 false。もちろん、値を割り当てるときも同じことが言えます。このようにして、構文とセマンティクスの両方の観点から、すべての操作が統合されます。

では、attr（）でアクセスする必要があるプロパティと、prop（）でアクセスする必要があるプロパティはどれですか？

最初の原則：プロパティの名前を追加するだけで、プロパティが有効になります。Prop（）を使用する必要があります。

2番目の原則：true / false属性のみがprop（）を使用する必要があります。

公式の指示によると、無効属性とチェック属性を設定した場合は、attr（）メソッドの代わりにprop（）メソッドを使用する必要があります。

上記のコピー：本「SharpjQuery（2ndEdition）」からの抜粋。

【例】 JQueryは、prop（）メソッドを使用してプロパティ値を設定することにより、すべての関数の選択と選択解除を実現します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery中的prop()方法的使用</title>
    <meta name="author" content="pan_junbiao的博客">
</head>
<body>
    <h3>请选择用户信息：</h3>
    <input type="checkbox" name="checkItem" value="1"/> pan_junbiao的博客_01<br>
    <input type="checkbox" name="checkItem" value="2"/> pan_junbiao的博客_02<br>
    <input type="checkbox" name="checkItem" value="3"/> pan_junbiao的博客_03<br>
    <input type="checkbox" name="checkItem" value="4"/> pan_junbiao的博客_04<br>
    <input type="checkbox" name="checkItem" value="5"/> pan_junbiao的博客_05<p>
    <input type="button" value="全选" id="checkAll"/>
    <input type="button" value="全不选" id="noCheckAll"/>
</body>
<script src="/js/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function(){
        //全选
        $("#checkAll").click(function(){
            $("[name=checkItem]:checkbox").prop("checked",true);
        });

        //全不选
        $("#noCheckAll").click(function(){
            $("[name=checkItem]:checkbox").prop("checked",false);
        });
    });
</script>
</html>

結果：

例からわかるように、attr（）メソッドを使用すると、ブラウザの互換性の問題が発生するため、attr（）メソッドの代わりにprop（）メソッドを使用してチェックボックスの属性値を設定します。

JQueryでのprop（）メソッドの使用

おすすめ