セレクターの指定方法を適当に分類してまとめ。
サンプルコード
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <div id="sample"> <h1>H1のテキスト</h1> <p>pのテキスト</p> <ul> <li id="list1" class="list">1番目のリスト</li> <li class="list2">2番目のリスト</li> <li class="list">3番目のリスト</li> <li class="list">4番目のリスト</li> </ul> <dl> <dt class="dt1">1番目のdt</dt> <dd class="dd1"><span>1番目のdd</span></dd> <dt class="dt2">2番目のdt</dt> <dd class="dd2">2番目のdd</dd> <dt class="dt3">3番目のdt</dt> <dd class="dd3"><span>3番目</span>の<span>dd</span></dd> </dl> <div><a href="#sample">ページ内リンク</a></div> <div><a href="image.jpg">jpg画像リンク</a></div> <div id="empty"></div></div> |
基本
| $(‘ul’) | HTML要素を対象にする。 |
|---|---|
| $(‘#page’) | 指定したidを持つ要素を対象にする。 |
| $(‘.sample’) | 指定したclassを持つ要素を対象にする。 |
| $(‘ul, dl’) | 指定した複数のHTML要素を対象にする。 |
| $(‘#header *’) | 指定した要素内のすべての要素を対象にする。 |
| $(‘li:not(.hoge)’) | 特定の要素以外を対象にする。 アニメーション中でない要素を指定したい時は $(‘li:not(:animated)’)のように記述する。 |
JavaScript
1 2 3 4 5 6 7 8 | $(function() { console.log($('h1').text()); // H1のテキスト console.log($('#list1').text()); // 1番目のリスト console.log($('.list2').text()); // 2番目のリスト console.log($('h1, p').text()); // H1のテキストpのテキスト console.log($('ul *').text()); // 1番目のリスト2番目のリスト3番目のリスト4番目のリスト console.log($('li:not(.list2)').text()); // 1番目のリスト3番目のリスト4番目のリスト}); |
階層
| $(‘ul li’) | 特定要素の子孫にある要素を対象にする。 |
|---|---|
| $(‘ul > li’) | 特定要素の直下の要素を対象にする。 |
| $(‘h2 + h3’) | 特定要素の次の要素を対象にする。 |
| $(‘dt.select ~ dd’) | 特定要素の後にある要素を対象にする。 |
JavaScript
1 2 3 4 5 6 | $(function() { console.log($('#sample li').text()); // 1番目のリスト2番目のリスト3番目のリスト4番目のリスト console.log($('#sample > h1').text()); // H1のテキスト console.log($('.dt2 + dd').text()); // 2番目のdd console.log($('.dt2 ~ dd').text()); // 2番目のdd3番目のdd}); |
順番
| $(‘li:first-child’) | 親要素から見て先頭から1番目の要素を対象にする。 指定した要素が親要素の中で先頭から1番目でない場合、選択できない。 (dl > dt + dd で dd:first-childを指定した場合は選択できない。) |
|---|---|
| $(‘li:nth-child(3)’) | 親要素から見てX番目の要素を対象にする。 |
| $(‘li:last-child’) | 親要素から見て最後尾から1番目の要素を対象にする。 |
| $(‘li span:only-child’) | 要素内に特定の要素が1つだけ含まれているものを対象にする。 2つ以上含まれる場合は選択できない。 |
| $(‘dd:first’) | 親要素の中から最初に出てくる指定要素を対象にする。 要素の順番自体は2番目でも、指定した要素(上記の場合dd)が親要素の中で1番目の場合はそれを選択する。 (dl > dt + dd で dd:first-childを指定しても選択できる。) |
| $(‘li:last’) | 要素の中から最後の要素を対象にする。 |
| $(‘li:even’) | 要素の中から偶数番目の要素を対象にする。 |
| $(‘li:odd’) | 要素の中から奇数番目の要素を対象にする。 |
| $(‘li:eq(2)’) | 特定の順番の要素を対象にする。 1番目の要素が0から数値を数える。 |
| $(‘li:gt(2)’) | 特定の順番より後の要素を対象にする。 1番目の要素が0から数値を数える。 |
| $(‘li:lt(2)’) | 特定の順番より前の要素を対象にする。 1番目の要素が0から数値を数える。 |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(function() { console.log($('dt:first-child').text()); // 1番目のdt console.log($('dd:first-child').text()); // console.log($('li:nth-child(2)').text()); // 2番目のリスト console.log($('dt:last-child').text()); // console.log($('dd:last-child').text()); // 3番目のdd console.log($('dd span:only-child').text()); // 1番目のdd console.log($('dd:first').text()); // 1番目のdd console.log($('dt:last').text()); // 3番目のdt console.log($('li:even').text()); // 1番目のリスト3番目のリスト console.log($('li:odd').text()); // 2番目のリスト4番目のリスト console.log($('dt:eq(1)').text()); // 2番目のdt console.log($('dt:gt(0)').text()); // 2番目のdt3番目のdt console.log($('dt:lt(2)').text()); // 1番目のdt2番目のdt}); |
属性
| $(‘[id]’) | 特定の属性を持つ要素を対象にする。 |
|---|---|
| $(‘[title = “sample”]’) | 特定の属性が特定の値を持つ要素を対象にする。 |
| $(‘li[title != “sample”]’) | 特定の属性が特定の値を持たない要素を対象にする。 |
| $(‘li[title ^= “sample”]’) | 特定の属性が特定の文字列で始まる値を持つ要素を対象にする。 |
| $(‘li[title $= “sample”]’) | 特定の属性が特定の文字列で終わっている値を持つ要素を対象にする。 |
| $(‘li[title *= “sample”]’) | 特定の属性が特定の文字列を含んでいる値を持つ要素を対象にする。 |
| $(‘li[title $= “A”][href $= “B”]’) | 複数の属性セレクタを同時に対象にする。 |
JavaScript
1 2 3 4 5 6 7 8 9 | $(function() { console.log($('#sample a[href]').text()); // ページ内リンクjpg画像リンク console.log($('[id = "list1"]').text()); // 1番目のリスト console.log($('li[id != "list1"]').text()); // 2番目のリスト3番目のリスト4番目のリスト console.log($('[href ^= "#"]').text()); // ページ内リンク console.log($('[href $= ".jpg"]').text()); // jpg画像リンク console.log($('[href *= "sample"]').text()); // ページ内リンク console.log($('li[class = "list"][id = "list1"]').text()); // 1番目のリスト}); |
中身
| $(‘li:empty’) | 子要素やテキストを含まない要素を対象にする。 |
|---|---|
| $(‘li:parent’) | 何らかの子要素やテキストを含む要素を対象にする。:emptyと逆。 |
| $(‘li:contains(“文字列”)’) | 特定の文字列が含まれる要素を対象にする。 |
| $(‘li:has(span)’) | 特定の要素が含まれる要素を対象にする。 |
| $(‘:header’) | h1～h6までのhX要素をまとめて対象にする。 |
JavaScript
1 2 3 4 5 6 7 | $(function() { console.log($('div:empty').attr('id')); // empty console.log($('#sample div:parent').text()); // ページ内リンクjpg画像リンク console.log($('li:contains("1番目")').text()); // 1番目のリスト console.log($('dd:has(span)').text()); // 1番目のdd3番目のdd console.log($('#sample :header').text()); // H1のテキスト}); |
フォーム
| $(‘:input’) | フォームの要素(input、textarea、select、buttonなど)を対象にする。 |
|---|---|
| $(‘:text’) | input type=”text”の要素を対象にする。 |
| $(‘:password’) | input type=”password”の要素を対象にする。 |
| $(‘:radio’) | input type=”radio”の要素を対象にする。 |
| $(‘:checkbox’) | input type=”checkbox”の要素を対象にする。 |
| $(‘:checked’) | ラジオボタンやチェックボックスで、選択されている要素を対象にする。 |
| $(‘:selected’) | セレクトボックスで、選択されている要素を対象にする。 |
| $(‘:submit’) | input type=”submit”の要素を対象にする。 |
| $(‘:image’) | input type=”image”の要素を対象にする。 |
| $(‘:reset’) | input type=”reset”の要素を対象にする。 |
| $(‘:button’) | button要素を対象にする。 |
| $(‘:file’) | input type=”file”の要素を対象にする。 |
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div id="sample"> <input type="text" value="text" /> <input type="password" value="pass" /> <textarea cols="30" rows="5">テキストエリア</textarea> <input type="radio" name="radio" id="rd01" value="radioA" /><label for="rd01">ラジオA</label> <input type="radio" name="radio" id="rd02" value="radioB" checked /><label for="rd02">ラジオB</label> <input type="checkbox" name="check" value="checkA" />チェックA <input type="checkbox" name="check" value="checkB" checked />チェックB <select> <option value="">選択してください</option> <option value="selectA" selected>選択肢A</option> <option value="selectB">選択肢B</option> </select> <input type="submit" value="submit" /> <input type="image" value="image" /> <input type="reset" value="reset" /> <button>button</button> <input type="file" /></div> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | $(function() { console.log($(':input').text()); // テキストエリア選択してください選択肢A選択肢Bbutton console.log($(':text').val()); // text console.log($(':password').val()); // pass $(':radio').addClass('radio'); // radioにclass付与 $(':checkbox').addClass('check'); // checkboxにclass付与 console.log($('[name = "check"]:checked').val()); // checkB console.log($(':selected').val()); // selectA $(document).on('click', ':submit', function() { console.log('submitをクリック'); }); $(document).on('click', ':image', function() { console.log('imageをクリック'); }); $(document).on('click', ':reset', function() { console.log('resetをクリック'); }); $(document).on('click', ':button', function() { console.log('buttonをクリック'); }); $(document).on('click', ':file', function() { console.log('fileをクリック'); });}); |
コメントが承認されるまで時間がかかります。