jQuery で属性を使って要素を選択する：サンプルコード
2024-07-27
jQuery で属性を使って要素を選択する方法
属性名で要素を選択する
最も基本的な方法は、属性名だけで要素を選択する方法です。属性名の後にカンマ（,）を置き、属性値を指定することもできます。
// すべての `img` 要素を選択
$('img')
// `alt` 属性が "画像の説明" の `img` 要素を選択
$('img[alt="画像の説明"]')
属性値で要素を選択するには、属性名の後にイコール記号（=）と属性値を指定します。
// `href` 属性が "https://example.com/" の `a` 要素を選択
$('a[href="https://example.com/"]')
AND 条件で複数の属性を使って要素を選択するには、カンマ（,）で区切って属性を指定します。
// `id` 属性が "my-id" かつ `class` 属性が "my-class" の要素を選択
$('#my-id.my-class')
属性の存在・不存在で要素を選択する
属性が存在する要素を選択するには、属性名の後に角括弧([])とカンマ（,）を置き、属性値を指定します。属性が存在しない要素を選択するには、:not([属性名]) を使用します。
// `data-id` 属性を持つすべての要素を選択
$('[data-id]')
// `data-id` 属性を持たないすべての要素を選択
$(':not([data-id])')
属性値の比較演算子を使う
属性値の比較演算子を使って、属性値に基づいて要素を選択することもできます。
// `width` 属性が 100px より大きいすべての `img` 要素を選択
$('img[width>=100]')
// `href` 属性が "https://example.com/" で始まるすべての `a` 要素を選択
$('a[href^="https://example.com/"]')
カスタム属性セレクタを使う
データ属性など、カスタム属性を使って要素を選択することもできます。
// `data-category` 属性が "category1" のすべての要素を選択
$('[data-category="category1"]')
属性を操作する
jQuery を使って、要素の属性を追加、削除、変更することもできます。
//すべての `img` 要素に `alt` 属性を追加
$('img').attr('alt', '画像の説明')
//すべての `a` 要素の `href` 属性を削除
$('a').removeAttr('href')
//すべての `p` 要素の `class` 属性を "my-class" に変更
$('p').attr('class', 'my-class')
- 属性セレクタは、CSS セレクタと組み合わせて使用することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 属性セレクタ</title>
</head>
<body>
<img src="image.jpg" alt="画像の説明" data-category="風景">
<a href="https://example.com/" class="btn">リンク</a>
<p id="my-id" class="my-class">段落</p>
<p data-id="123">別の段落</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// すべての img 要素を選択
console.log($('img'));
// alt 属性が "画像の説明" の img 要素を選択
console.log($('img[alt="画像の説明"]'));
// href 属性が "https://example.com/" の a 要素を選択
console.log($('a[href="https://example.com/"]'));
// id 属性が "my-id" かつ class 属性が "my-class" の要素を選択
console.log($('#my-id.my-class'));
// data-id 属性を持つすべての要素を選択
console.log($('[data-id]'));
// data-id 属性を持たないすべての要素を選択
console.log($(':not([data-id])'));
// width 属性が 100px より大きいすべての img 要素を選択
console.log($('img[width>=100]'));
// href 属性が "https://example.com/" で始まるすべての a 要素を選択
console.log($('a[href^="https://example.com/"]'));
// すべての img 要素に alt 属性を追加
$('img').attr('alt', '画像の説明');
// すべての a 要素の href 属性を削除
$('a').removeAttr('href');
// すべての p 要素の class 属性を "my-class" に変更
$('p').attr('class', 'my-class');
});
</script>
</body>
</html>
説明
このコードは、以下のことを行います。
- すべての
img要素を選択:$('img')を使用して、すべてのimg要素を選択します。 alt属性が "画像の説明" のimg要素を選択:$('img[alt="画像の説明"]')を使用して、alt属性が "画像の説明" のimg要素のみを選択します。id属性が "my-id" かつclass属性が "my-class" の要素を選択:$('#my-id.my-class')を使用して、id属性が "my-id" かつclass属性が "my-class" の要素のみを選択します。data-id属性を持つすべての要素を選択:$('[data-id]')を使用して、data-id属性を持つすべての要素を選択します。width属性が 100px より大きいすべてのimg要素を選択:$('img[width>=100]')を使用して、width属性が 100px より大きいimg要素のみを選択します。- すべての
img要素にalt属性を追加: `$('img').attr('alt', '画像の説明')
filter() メソッドを使って、属性に基づいて要素をフィルタリングすることができます。
//すべての `img` 要素から、`alt` 属性が空の要素を除外
$('img').filter(function() {
return $(this).attr('alt') === '';
});
子孫セレクタを使う
子孫セレクタを使って、特定の属性を持つ親要素の子孫要素を選択することができます。
//すべての `a` 要素から、`data-category` 属性が "風景" の子孫 `img` 要素を選択
$('a[data-category="風景"]').find('img');
属性セレクタと CSS セレクタを組み合わせる
属性セレクタと CSS セレクタを組み合わせて、より複雑な条件で要素を選択することができます。
//すべての `p` 要素から、`id` 属性が "my-id" または `class` 属性が "my-class" の要素を選択
$('p#my-id, p.my-class');
正規表現を使う
属性値に正規表現を使うこともできます。
//すべての `a` 要素から、`href` 属性が "https://example.com/" で始まる要素を選択
$('a[href^="https://example.org/"]');
Sizzle セレクタを使う
Sizzle セレクタは、より強力な属性セレクタを提供します。
//すべての `img` 要素から、`alt` 属性が空または "画像の説明" の要素を選択
$('img[alt*="画像の説明"]');
これらの方法は、基本的な属性セレクタよりも柔軟性と表現力があります。
jquery attributes
