ホームページ > ウェブフロントエンド > フロントエンドQ&A > jqueryは要素に属性を設定します

jqueryは要素に属性を設定します

WBOY
リリース: 2023-05-14 11:14:36
オリジナル
5362 人が閲覧しました

jQuery は人気のある JavaScript ライブラリであり、DOM 要素を便利かつ効率的に操作する機能を備えており、要素の属性の設定もよく使用される機能の 1 つです。この記事では、一般的に使用されるいくつかのプロパティ設定方法について説明し、具体的な例で説明します。

1. 基本的な属性設定方法

1. attr メソッドを使用します

attr() メソッドを使用して、要素の属性と値を設定します。たとえば、次のコードは、<div> 要素の id 属性を値 myDiv に設定します。

$('div').attr('id', 'myDiv');
ログイン後にコピー

attr() メソッドを使用して、複数の属性と値を同時に設定します (例:

$('div').attr({
  id: 'myDiv',
  class: 'box'
});
ログイン後にコピー

2. prop メソッドを使用します##)

#prop() メソッドは attr() メソッドに似ており、要素の属性と値を設定できますが、それらの間にはいくつかの微妙な違いがあります。 。 prop() は主に、checkedselecteddisabled などの要素自体の属性を設定するために使用されます。一方、attr( ) は要素の非標準属性を設定するのにより適しています。たとえば、次のコードは入力要素を選択状態に設定します:

$('input[type="checkbox"]').prop('checked', true);
ログイン後にコピー

3. データ メソッド

data() メソッドを使用して、入力要素のデータ属性を設定します。要素。その構文は非常に単純で、設定する属性と対応する値をパラメータとして渡すだけです。たとえば、次のコードは、<div> 要素の data-value 属性を 100 に設定します:

$('div').data('value', 100);
ログイン後にコピー

4。カスタム属性を設定するための attr メソッドと data メソッド

attr() メソッドと data() メソッドを使用して、data- で終わるカスタム属性も設定します。 が始まります。たとえば、次のコードは、<div> 要素のカスタム属性 data-count および data-price を設定します。 2 つ、属性の取得方法

要素の属性を設定するだけでなく、jQuery を使用して要素の属性値を取得することもできます。ここでは、属性を取得する 3 つの方法を紹介します:

1. attr メソッドを使用する

attr()

メソッドを使用して、要素の属性値を取得します。たとえば、次のコードは、

<div> 要素の id 属性値を取得します:

$('div').attr('data-count', 10);
$('div').data('price', 100);
ログイン後にコピー
2。prop メソッド

を使用します。同様に、

prop()

メソッドを使用して要素の属性値を取得することもできます。たとえば、次のコードはチェックボックス要素の選択状態を取得します:

var idValue = $('div').attr('id');
console.log(idValue); // 输出 'myDiv'
ログイン後にコピー
3。データ メソッドを使用します

data()

メソッドを使用して、要素のデータ属性値を取得します。たとえば、次のコードは

data-value 属性を取得します。 <div> 要素の値。 :

var isChecked = $('input[type="checkbox"]').prop('checked');
console.log(isChecked); // 输出 true 或 false
ログイン後にコピー
3. 概要この記事では、基本的な属性設定方法と一般的な属性設定方法を含む、要素の属性を設定する jQuery の方法を紹介します。属性の取得方法。このうち、

attr()

メソッドは非標準属性の設定に適しており、

prop() メソッドは要素自体の属性の設定に適しており、 data() メソッドは、要素の data 属性の設定と取得に適しています。これらのメソッドを上手に使用すると、DOM 要素の操作が容易になり、開発効率が向上します。

以上がjqueryは要素に属性を設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート