公開日： 2018/11/02
最終更新日：2018/11/02

【jQuery】属性セレクターのサンプル

jQuery
■デモ

アイテム１
アイテム２
アイテム３

id属性を持つli要素にスタイルを設定する。
id属性がitem3であるli要素にスタイルを設定する。
id属性がitem3でないli要素にスタイルを設定する。
曖昧条件に一致する要素にスタイルを設定する。
曖昧条件に一致する要素にスタイルを設定する。

■HTML

<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>

</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>

■JavaScript

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');
  });
})

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');

});

})

カテゴリー: IT, プログラミング

タグ　　　: JavaScript, jQuery

努力が続かないとお悩みの方へ！

Amazonにて発売中！！

試験に受かる、給料を上げる、ビジネスを立ち上げる…。
自分の人生をよりよくしていくには、何よりも努力が欠かせません。
しかし、そうはわかっていてもなかなか続かないもの。。。
「めんどくさい」、「明日からでいいや」、「どうせやっても無駄だし」…
こんな風に私たちは努力を続けられずにいます。

ですが、それはあなたが怠けものだからとか、根性がないからというわけではありません。
どうすれば努力が続くのか、その「テクニック」を知らないだけなのです！
本書では、そんな「どうすれば努力が続くのか」というテクニックや心構えを集めました。
「達成したい夢があるのに、どうしても頑張れない…」
そんなあなたに是非とも読んでほしい1冊となっています。