jqueryでタグの属性値を取得する方法

近年、Web フロントエンドは非常に熱い業界となっており、jQuery は優れた JavaScript ライブラリとして Web フロントエンド開発のあらゆる場面で広く使用されています。 jQueryを使う場合、タグの属性値を取得するのは基本中の基本です。次に、jQuery がタグ属性の値を取得できるいくつかの方法を見てみましょう。

1. attr() メソッド

attr() メソッドは jQuery の一般的なメソッドで、指定した要素の属性値を取得または設定するために使用されます。 attr() メソッドの基本構文は以下のとおりです。

$(selector).attr(attribute)

このうち、selector は指定された要素を表し、attribute は取得または設定する属性名を表します。指定した要素の属性の値を取得する場合は、属性パラメーターに属性名を渡すことができます。たとえば、特定の div 要素の class 属性値を取得したい場合は、次のように記述できます:

var className = $('div').attr('class');

上記のコードでは、$('div') はすべての div 要素を選択することを意味します。 attr('class') は、これらの要素のクラス属性値を取得することを意味します。要素の属性値を設定する場合は、属性パラメーターで属性名と属性値を渡す必要があります。たとえば、img 要素の src 属性値を newImg.png に変更したい場合は、次のように記述できます。

$('img').attr('src', 'newImg.png');

attr() メソッドを使用してタグ属性値を取得する場合、次の点に注意する必要があります。

• セレクターによって一致した要素が複数ある場合、最初の要素の属性値のみが返されます。
• プロパティが存在しない場合は、未定義を返します。
• プロパティ名を誤って記述した場合も、unknownが返されます。

2. prop() メソッド

prop() メソッドは attr() メソッドに似ており、指定された要素の属性値を取得または設定するためにも使用されます。違いは、prop() メソッドが主に、checked、selected などの要素固有の属性を取得または設定するために使用されることです。 prop() メソッドの基本構文は以下のとおりです。

$(selector).prop(property)

このうち、selector は指定された要素を表し、property は取得または設定する属性名を表します。指定した要素のプロパティの値を取得する場合は、プロパティ パラメーターにプロパティ名を渡すことができます。たとえば、チェックボックス要素の selected 属性値を取得したい場合は、次のように記述できます:

var isChecked = $('input[type=checkbox]').prop('checked');

上記のコードでは、$('input[type=checkbox]') はすべてを選択することを意味します。 checkbox 要素、prop( 'checked') は、これらの要素の selected 属性値を取得することを意味します。要素の属性値を設定する場合は、プロパティ パラメーターで属性名と属性値を渡す必要があります。たとえば、チェックボックス要素の selected 属性値を true に設定したい場合は、次のように記述できます。

$('input[type=checkbox]').prop('checked', true);

prop() メソッドを使用して label 属性値を取得する場合は、次のようにする必要があります。次の点に注意してください。

• セレクターによって一致した要素が複数ある場合は、最初の要素の属性値のみが返されます。
• プロパティが存在しない場合は、未定義を返します。
• プロパティ名を誤って記述した場合も、unknownが返されます。

3. data() メソッド

data() メソッドは、タグ属性の値を取得するための jQuery のもう 1 つの一般的なメソッドです。指定された要素 データ属性。 data() メソッドの基本構文は次のとおりです。

$(selector).data(key)

このうち、selector は指定された要素を表し、key は取得するカスタム データ属性の名前を表します。たとえば、特定の div 要素のカスタム データ属性 data-id の値を取得したい場合は、次のように記述できます。

<div data-id="123"></div>

var dataId = $('div').data('id');

上記のコードでは、$('div') は、すべての div 要素を選択するには、data ('id') は、これらの要素のカスタム データ属性 data-id の値を取得することを意味します。要素のカスタム データ属性を設定する場合は、data() メソッドで属性名と属性値を渡す必要があります。たとえば、div 要素のカスタム データ属性 data-name を myName に設定する場合は、次のように記述できます。

$('div').data('name', 'myName');

data() メソッドを使用して label 属性値を取得する場合、次の点に注意する必要があります。

• セレクターによって一致する要素が複数ある場合は、最初の要素のカスタム データ属性値のみが返されます。
• カスタム データ属性が存在しない場合は、未定義が返されます。
• カスタムデータ属性名を誤って記述した場合も、unknown が返されます。

#結論

上記は、jQuery がタグ属性値を取得するための一般的なメソッドをいくつか示しています。実際の開発では、実際のニーズに応じて適切な方法を選択できます。属性の種類ごとに適した方法が異なるため、実際の状況に応じて選択する必要があることに注意してください。

以上がjqueryでタグの属性値を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。