jQuery001 セレクタ指定

セレクタ指定

jquery/1.12.4/jquery.min.js

あとで整理します。

^：〜から始まる
$：最後がvalueで終わる→[attribute$=’value’]
gt：greater than
attr：アターって読む。
・JavaScriptはhtml操作、jQueryはcssの操作、必要に応じincludeの中身いじって軽量化

// <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  $('li').css('color','red');
  $('#first').css('color','red');
  $('.second').css('color','blue');
  $('#third strong').css('color','purple');
  $('li *').css('color','red'); //★
  $("#first,#third,#fifth").css('color','blue')
  $('li:not(:first-child)').css('color','purple');//★
  $('#third>strong').css('color','blue');
  $('li:nth-child(9)').css('color','blue');
  $('#third+li').css('color','red');//★third以降のli
  $('#second ~ li').css('color','#ddd'); //★second以降
  $('[id]').css('font-size','25px'); //★
  $('li:empty').css('font-size','12px');
  $('li:last-child').css('color','blue');
  $('li small:only-child').css('color','#ff0');
  //liの中に１個だけ指定した要素を含む場合。２個はだめ。★
  $('li:nth-last-child(2)').css('color','#f0f');
  $('dt:nth-of-type(2)').css('color','#ffa');
  $('dd:nth-of-type(3)').css('color','#ffa');
  $('li[id != first]').css('color','#222');//★
  $('dt:nth-last-of-type(1)').css('color','purple');
  $('dd:first-of-type').css('color','#ddd');
  $('dd:last-of-type').css('color','blue'); 
  $(':lang(en)').css('color','#ff0');
  $('li[id^="f"]').css('color','purple');
  $('[id]').css('color','#444');
  $('[id *= "ir"]').css('color','purple');
  $('li:gt(2)').css('color','green'); 
  $('li[id^="f"]').css('color','purple');
  $('dd:last-of-type').css('color','blue');
  $('[id ^= "f"][id *= ir]').css('color','#ffa');
  $('h1').prepend('<a>ppp</a>');
  $('#six').removeClass('add1');

■参考（本）
Web制作の現場で使う jQueryデザイン入門［改訂新版] (Web Professional Books) | 西畑 一馬 | 工学 | Kindleストア | Amazon