高度な属性セレクター
属性の有無、値、部分一致に基づいて要素を対象にする複雑な属性セレクターを学び、選択の精度を高めます。
「高度な属性セレクター」はCoddyKit上の無料jQuery Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全3レッスンが含まれています。
属性セレクターへようこそ
jQueryで要素を選択する強力な方法へようこそ。ここでは、HTML属性に基づいて要素を選択できる属性セレクターについて学びます。
属性とは、id、class、href、data-*など、HTMLタグに付加された追加データのようなものです。
属性の有無による選択
最も基本的な属性セレクターは、値に関係なく、特定の属性を持つ要素を検索します。[attributeName]と記述します。
要素に属性が存在するかどうかだけを確認したい場合に非常に便利です。たとえば、$('[title]')はtitle属性を持つすべての要素を検索します。
試してみましょう：属性の有無
属性の有無を調べるセレクターを使って、title属性を持つすべての要素を検索し、それらのタグ名を表示してみましょう。
<p title="Hello Tooltip">This paragraph has a title.</p>
<div>Another element</div>
<span title="Span Title">A span with a title.</span>
<div id="output"></div>
<script>
$(document).ready(function() {
$('[title]').each(function(index, element) {
$('#output').append('<p>Found: <' + $(element).prop('tagName').toLowerCase() + '> with title="' + $(element).attr('title') + '"</p>');
});
});
</script>属性値の完全一致
属性が完全に一致する値を持つ要素を選択するには、[attributeName="value"]を使います。
このセレクターは正確です。属性値が指定した値と完全に同一の場合にのみ一致します。大文字と小文字も区別されます（jQueryの属性値の照合では大文字と小文字が区別されます）。
完全一致を実際に使ってみる
data-type属性の値が正確に"primary"である要素を検索します。
<button data-type="primary">Submit</button>
<button data-type="secondary">Cancel</button>
<a href="#" data-type="primary">Link</a>
<div id="output"></div>
<script>
$(document).ready(function() {
$('[data-type="primary"]').each(function(index, element) {
$('#output').append('<p>Exact match: <' + $(element).prop('tagName').toLowerCase() + '> (Type: ' + $(element).data('type') + ')</p>');
});
});
</script>属性値が「〜で始まる」場合
[attributeName^="value"]セレクターは、属性値が特定の文字列で始まる要素を検索します。
- 似た命名規則を持つ要素をまとめる場合に便利です。
- リンクの絞り込みにも適しています（例：
/productsで始まるすべてのリンク）。
末尾一致と部分一致
これらのセレクターを使うと、部分一致をより柔軟に行えます。
[attributeName$="value"]：属性値が指定した文字列で終わる場合に一致します。[attributeName*="value"]：属性値のどこかに指定した文字列が含まれる場合に一致します。
ライブデモ：部分一致
href属性の部分的な値に基づいて、^=、$=、*=が異なる要素をどのように対象にするか確認しましょう。
<a href="/products/item-1">Item 1</a>
<a href="/about/contact">Contact</a>
<a href="/products/item-2">Item 2</a>
<div id="output"></div>
<script>
$(document).ready(function() {
$('#output').append('<h3>Starts with "/products":</h3>');
$('[href^="/products"]').each(function() {
$('#output').append('<p>' + $(this).text() + '</p>');
});
$('#output').append('<h3>Ends with "contact":</h3>');
$('[href$="contact"]').each(function() {
$('#output').append('<p>' + $(this).text() + '</p>');
});
$('#output').append('<h3>Contains "item":</h3>');
$('[href*="item"]').each(function() {
$('#output').append('<p>' + $(this).text() + '</p>');
});
});
</script>単語セレクターとハイフンセレクター
さらに2種類の特殊なセレクターがあります。
[attributeName~="value"]：属性値に、スペースで区切られた特定の単語が含まれる場合に一致します。class属性でよく使われます。[attributeName|="value"]：属性値が"value"と完全に一致するか、"value-"で始まる場合に一致します（ハイフンが続きます）。lang="en-US"のような言語コードでよく使われます。
クイックチェック：セレクター
以下の<div>要素を正しく特定するjQueryセレクターはどれでしょうか。
<div class="card active-item" data-role="admin-panel" lang="en-US">
Admin Area
</div>振り返り：属性セレクター
よくできました。高度な属性セレクターをマスターしました。
[attr]：属性の有無を確認します。[attr="val"]：値が完全に一致する要素を選択します。[attr^="val"]：指定した値で始まる要素を選択します。[attr$="val"]：指定した値で終わる要素を選択します。[attr*="val"]：指定した値を含む要素を選択します。[attr~="val"]：スペースで区切られた単語を含む要素を選択します。[attr|="val"]：値が完全に一致するか、'val-'で始まる要素を選択します。
これらを使って、非常に正確で効率的なjQueryコードを書きましょう。
AI チューターと学ぶ JavaScript — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 22
- レッスン
- 48
よくある質問
「高度な属性セレクター」レッスンは無料ですか？
はい。「高度な属性セレクター」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全3レッスンが含まれています。
「高度な属性セレクター」で何を学びますか？
属性の有無、値、部分一致に基づいて要素を対象にする複雑な属性セレクターを学び、選択の精度を高めます。 ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
jQuery Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。
「高度な属性セレクター」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このjQuery Academyレッスンでコードを書いて実行できますか？
はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 高度な属性セレクター
- 疑似クラスとカスタムセレクター
- 効率的なDOMトラバーサル技法