jQueryの属性操作を簡単に把握できる記事【ゼロベーシックアプリケーション】

こんにちは、みんな!この記事では、固有のプロパティの取得と設定、カスタムプロパティの取得と設定など、jQueryのプロパティの操作をマスターし、jQueryのより深い段階に進みます。

記事ディレクトリ:

1:固有のプロパティの設定と取得

1.1固有の属性の取得 

1.2固有のプロパティの設定 

 2:カスタム属性の属性の設定と取得 

2.1カスタムプロパティの設定 

2.2カスタム属性の取得

3:データキャッシュデータ 

 3.1属性の設定とデータキャッシュの形式での値の取得

3.2H5標準カスタムブック属性を取得するためのデータキャッシュ


1:固有のプロパティの設定と取得

       固有のプロパティとは何ですか?固有の属性は、タグのhref属性や入力タグのtype属性など、タグ自体の属性です。これらは要素の固有属性と呼ばれます。このセクションでは、取得と設定について学習する必要があります。その固有の属性。

1.1固有の属性の取得 

element.prop('プロパティ名')

<body>
   <input type="text">
   <script>
       console.log($('input').prop('type'));
   </script>
</body>


1.2固有のプロパティの設定 

element.prop('プロパティ名'、'プロパティ値')

<body>
   <input type="text">
   <script>
       $('input').prop('type','password');
   </script>
</body>

入力タグの固有の属性タイプの値はパスワードに設定されます


 2:カスタム属性の属性の設定と取得 

      ネイティブJSセクションでは、カスタム属性を使用しました。ナビゲーションをクリックしてページを切り替えると、順番に配置された5つのdivのカスタム属性インデックスを設定します。setAttributeを使用して定義属性を設定し、getAttributeを使用してカスタム属性を設定します。値、jQueryフィールドには、同じ効果を持つカスタムプロパティを取得および設定するためのメソッドもあります。

2.1カスタムプロパティの設定 

element.attr('属性名'、'属性値')

<body>
   <div></div>
   <script>
       $('div').attr('index','100')
   </script>
</body>

カスタム属性のインデックス値は100に設定されます。要素自体にカスタム属性がある場合、このメソッドはカスタム属性の値を変更するためにも使用され、2番目のパラメーターは設定したい値に変更できます。


2.2カスタム属性の取得

element.attr('属性名')

<body>
   <div index="1"></div>
   <script>
       console.log($('div').attr('index'));
   </script>
</body>


3:データキャッシュデータ 

       属性値を取得および設定する別の方法は、データキャッシュデータです。この中のデータは属性値であり、コンソールの要素タグには表示されませんが(DOM構造は変更されません)、要素のメモリですが、ページが更新されると、要素のメモリ内のデータが削除されます

 3.1属性の設定とデータキャッシュの形式での値の取得

属性を設定します:element.data('属性名'、'属性値')

属性値を取得します:element.data('属性名')

<body>
   <div></div>
   <script>
       $('div').data('index','1');
   </script>
</body>

カスタム属性インデックスを追加しましたが、構造体に表示されていないことがわかります。これは、DOM構造体を変更せずにデータが要素メモリに格納されているためです。

しかし、それを取得すると、このプロパティの値を取得できます

<body>
   <div></div>
   <script>
       $('div').data('index','1');
       console.log($('div').data('index'));
   </script>
</body>


3.2H5標準カスタムブック属性を取得するためのデータキャッシュ

H5標準のカスタム属性の前に「data-」があることがわかっています。H5標準のカスタム属性を取得するためにデータを使用する場合、data-を追加する必要はなく、取得される値は 数値 です。価値。

<body>
   <div data-index="123456"></div>
   <script>
       console.log($('div').data('index'));
   </script>
</body>

 【知らせ!data-prefixを追加する必要はなく、ここで取得される値は数値です]

おすすめ

転載: blog.csdn.net/weixin_52212950/article/details/124408574