【基礎】jQueryでcssセレクターを使おう

はじめに


jQueryで文字の色を変えたり、文字を追加したり、、、色々とあると思います!
そんな時、指定方法はcssセレクターを元に指定していきます。
cssセレクターとは

どんな指定方法があるか書いていきます!

こんな人にオススメ
・ HTML/cssの勉強が終わった方
・ jQueryをこれから勉強する方
・ セレクターの指定方法を忘れた方

バージョン 
jQuery 3.3.1

参考サイト
CSS セレクター
jQueryの基本まとめ – CSSセレクタを使おう

要素型セレクター
要素名で指定した要素をさします。
例:

<div>
 <p></p>
 <ul>
  <li></li>
 </ul>
</div>

指定方法:$('div'), $('p'), $('ul'), $('li')
デモページ

クラスセレクター
クラス名を付けた要素をさします。
例:

<div class='xxx'>
 <p></p>
</div>

指定方法:$('.xxx')
デモページ

IDセレクター
id名を付けた要素をさします。
例:

<div id='xxx'>
 <p></p>
</div>

指定方法:$('#xxx')
デモページ

全称セレクター
すべての要素をさします。
指定方法:$('*')
デモページ

属性セレクター
特定の属性値を持つ指定要素をさします。
例:

<div class='xxx' data='hoge'>
 <p></p>
</div>

指定方法:$("[data='hoge']")
デモページ

複数セレクター
複数の要素をさします。
例:

<div>
 <p id='xxx'></p>
 <p class='xxx'></p>
</div>

指定方法:$('#xxx, .xxx')
デモページ

子孫セレクター
下の階層の子孫要素をさします。
例:

<div>
 <p></p>
</div>

指定方法:$('div p')
デモページ

子セレクター
直下の階層の子要素をさします。
例:

<div>
  <span></span>
  <p>
   <span></span>
  </p>
</div>

指定方法:$('div > span')
デモページ

終わりに


これでjqueryで指定する、基礎はバッチリです!
他にも指定方法はあるので、調べて見てください!

ハンズシェアでは、エンジニアやデザイナーを募集してます。
部活活動、社内イベント、社外イベント、なども行なっております。
エンジニア
デザイナー

社外イベント
管理画面チラ見せ♡ナイト