【jQuery】属性セレクターのサンプル
■デモ
- アイテム１
- アイテム２
- アイテム３
id属性を持つli要素にスタイルを設定する。
id属性がitem3であるli要素にスタイルを設定する。
id属性がitem3でないli要素にスタイルを設定する。
曖昧条件に一致する要素にスタイルを設定する。
曖昧条件に一致する要素にスタイルを設定する。
■HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<ul id="list1"> <li id="item1">アイテム１</li> <li class="item2">アイテム２</li> <li id="item3">アイテム３</li> </ul> <br> <input type="button" id="button1" value="CSSを変更1"/> id属性を持つli要素にスタイルを設定する。<br> <input type="button" id="button2" value="CSSを変更2"/> id属性がitem3であるli要素にスタイルを設定する。<br> <input type="button" id="button3" value="CSSを変更3"/> id属性がitem3でないli要素にスタイルを設定する。<br> <input type="button" id="button4" value="CSSを変更4"/> 曖昧条件に一致する要素にスタイルを設定する。<br> <input type="button" id="button5" value="CSSを変更5"/> 曖昧条件に一致する要素にスタイルを設定する。<br> <input type="button" id="button-reset" value="CSSをリセット"/><br> |
■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 25 26 27 28 29 30 31 32 33 34 35 |
jQuery(function($) { //id属性を持つli要素にスタイルを設定する。 $('#button1').click(function(e) { $('#list1 li[id]').css('background-color', 'yellow'); }); //id属性がitem3であるli要素にスタイルを設定する。 $('#button2').click(function(e) { $('#list1 li[id = "item3"]').css('background-color', 'pink'); }); //id属性がitem3でないli要素にスタイルを設定する。 $('#button3').click(function(e) { $('#list1 li[id != "item3"]').css('background-color', 'pink'); }); //曖昧条件に一致する要素にスタイルを設定する。 $('#button4').click(function(e) { $('#list1 li[id ^= "item"]').css('background-color', 'pink'); //前方一致 $('#list1 li[id $= "3"]').css('border','solid 2px Lime'); //後方一致 $('#list1 li[class *= "tem"]').css("color","red"); //部分一致 }); //属性フィルターを組み合わせる。 $('#button5').click(function(e) { //id属性がitemから始まり、かつ3を含んでいない要素 $('#list1 li[id ^= "item"]:not([id *= 3])').css('background-color', 'pink'); }); //id=list配下すべての要素のstyleをリセット $('#button-reset').click(function(e) { $('#list1 *').removeAttr('style'); }); }) |
タグ :
JavaScript, jQuery
