jqueryで属性クエリを使用する方法

jQuery は、HTML および CSS DOM を操作するために広く使用されている JavaScript ライブラリであり、多くの便利な関数を提供します。そのような機能の 1 つは、属性クエリを使用して要素の属性値を取得または設定することです。

属性クエリは、属性名とオプションの属性値をパラメータとして受け入れるセレクターであり、指定された属性を持つすべての要素を返します。以下は、jQuery の属性セレクターの使用方法を示す簡単な例です。

// 获取所有带有'data-role'属性的div元素
var divs = $('div[data-role]');

// 获取所有标签名为'a', 并且target属性值等于'_blank'的a元素
var links = $('a[target="_blank"]');

上の 2 つの例では、$() 関数を使用して jQuery オブジェクトを作成し、渡されるパラメーターは CSS セレクターです。これらの CSS セレクターのうち、属性セレクターは角括弧を使用して定義されます。たとえば、[data-role] は「data-role」属性を持つすべての要素と一致しますが、[target="_blank"] は「_blank」に等しいターゲット属性値を持つ要素のみと一致します。

次の演算子と値を使用して属性クエリを実行できます:

• =: 指定された属性の等しい値を持つ要素を照合します。たとえば、[target="_blank"] は、ターゲット属性値が '_blank' である要素を表します。
• #!=: 値が指定された属性と等しくない要素に一致します。たとえば、[type!="text"] は、タイプ「text」の入力ボックスを除くすべての要素を意味します。
#^=
• : 指定された属性値が指定された値で始まる要素と一致します。たとえば、[href^="https://"] は、「https://」で始まるすべてのハイパーリンクに一致します。 #$=
: 指定された属性値が指定された値で終わる要素と一致します。たとえば、[href$=".pdf"] はすべての PDF ファイルへのリンクと一致します。
• #*=: 指定された属性値に指定された文字列が含まれる要素と一致します。たとえば、[class*="active"] はクラスが「active」のすべての要素と一致します。
• 属性セレクターの使用に加えて、.attr() メソッドを使用して要素の属性の値を取得または設定することもできます。このメソッドは、プロパティ名とオプションの新しいプロパティ値をパラメータとして受け入れます。新しいプロパティ値が指定されていない場合は、現在のプロパティ値が返されます。
次の例は、.attr() メソッドを使用して要素の属性値を取得および設定する方法を示しています。

// 获取第一个图片元素的alt属性值
var altText = $('img:first').attr('alt');

// 设置第一个图片元素的alt属性值为'图片描述'
$('img:first').attr('alt', '图片描述');

この例では、attr() メソッドは次のとおりです。画像要素の最初の alt 属性を取得または設定するために使用されます。まず、セレクター $('img:first') を使用して最初の画像要素を選択します。次に、.attr('alt') メソッドを使用して alt 属性値を取得し、変数 altText に保存します。次に、新しい属性値「image description」を .attr() メソッドに渡して、新しい alt 属性値を設定します。

つまり、属性クエリは jQuery で最も一般的に使用されるセレクターの 1 つであり、特定の属性値を持つ要素を選択するために使用されます。さらに、.attr() メソッドを使用して要素の属性値を取得または設定することもできます。これらの関数は非常に実用的で、ドキュメントの操作を大幅に簡素化し、JavaScript プログラミングをより簡単かつ便利にします。

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