jQuery入門　基本セレクタ

2017.11.02 2018.04.06

ユニバーサルセレクタ
要素セレクタ
IDセレクタ
Classセレクタ
複数セレクタ
まとめ

ユニバーサルセレクタ

すべての要素を選択します。
すべての要素には<body><head><link><script>タグなども含みます。

html

<h1>h1タグ</h1>
<p id="hoge">id="hoge"がついたpタグ</p>
<ul>
  <li>リストタグ0</li>
  <li class="moge">class="moge"がついたリストタグ1</li>
  <li>リストタグ2</li>
  <li>リストタグ3</li>
</ul>
<p class="moge">class="moge"がついたpタグ</p>

jQuery

$(function(){
  $('*').css('color', 'red');
});

処理結果
ユニバーサルセレクタ

要素セレクタ

指定されたタグ名を持つすべての要素を選択します。

html

<h1>h1タグ</h1>
<p id="hoge">id="hoge"がついたpタグ</p>
<ul>
  <li>リストタグ0</li>
  <li class="moge">class="moge"がついたリストタグ1</li>
  <li>リストタグ2</li>
  <li>リストタグ3</li>
</ul>
<p class="moge">class="moge"がついたpタグ</p>

jQuery

$(function(){
  $('p').css('color', 'red');
});

処理結果
要素セレクタ

IDセレクタ

指定されたid属性を持つ単一の要素を選択します。

html

<h1>h1タグ</h1>
<p id="hoge">id="hoge"がついたpタグ</p>
<ul>
  <li>リストタグ0</li>
  <li class="moge">class="moge"がついたリストタグ1</li>
  <li>リストタグ2</li>
  <li>リストタグ3</li>
</ul>
<p class="moge">class="moge"がついたpタグ</p>

jQuery

$(function(){
  $('#hoge').css('color', 'red');
});

処理結果
IDセレクタ

Classセレクタ

指定されたclassのすべての要素を選択します。

html

<h1>h1タグ</h1>
<p id="hoge">id="hoge"がついたpタグ</p>
<ul>
  <li>リストタグ0</li>
  <li class="moge">class="moge"がついたリストタグ1</li>
  <li>リストタグ2</li>
  <li>リストタグ3</li>
</ul>
<p class="moge">class="moge"がついたpタグ</p>

jQuery

$(function(){
  $('.moge').css('color', 'red');
});

処理結果
Classセレクタ

複数セレクタ

複数の要素を選択できます。

html

<h1>h1タグ</h1>
<p id="hoge">id="hoge"がついたpタグ</p>
<ul>
  <li>リストタグ0</li>
  <li class="moge">class="moge"がついたリストタグ1</li>
  <li>リストタグ2</li>
  <li>リストタグ3</li>
</ul>
<p class="moge">class="moge"がついたpタグ</p>

jQuery

$(function(){
  $('.moge, #hoge, h1').css('color', 'red');
});

処理結果
複数セレクタ

まとめ

今回は基本セレクタについて勉強しました。ユニバーサルセレクタが<link><script>タグなども含むのを初めて知りました…。
ちゃんと理解していないってことですね。反省。

しかし、こうやって改めて勉強しているとちゃんと力がついていく感じがしますね。嬉しいです。頑張ります。

またね(‘ω’)ノ