jQueryのセレクタの使い方を紹介!多種多様にあります。

jQuery

皆さん!こんにちは!ソウシ(@gomasio2018)と申します。

今回は、jQueryの一番の基本である、「セレクタ」を紹介していきます!

jQueryのセレクタは、色々なものがあるので、中にはあまり使わないものも、あるかもしれませんが、

どれも、知っておくと要素の絞り込みの選択肢が増えるので、是非、この記事で、覚えて行って下さい!

・ jQueryのセレクタの紹介と使い方

  ・ 基本セレクタ① #id名

  ・ 基本セレクタ② .class名

・ 階層セレクタの紹介と使い方

  ・ 階層セレクタ① (スペース)

   ・ 階層セレクタ② >

  ・ 階層セレクタ③ +

  ・ 階層セレクタ④ ~

・ jQueryのセレクタの紹介と使い方 [まとめ]

jQueryのセレクタの紹介と使い方

これから紹介するセレクタは、基本的なセレクタになります。

HTML&CSSを学んでいる人なら、簡単に理解できると思います。

コードを使った例も、用意していますので、イメージが付きやすいと思います。

基本セレクタ① #id名

jQueryのセレクタの中では、一番使うであろう「#id名」による要素の選択の仕方です。

使い方は、HTMLのid属性を指定するだけです。

因みに、何故「#id」を使うことが多いのかというと、id属性の特徴である、同じid属性値は複製できない特徴により、読み込みが早くなるため、jQueryでは、重宝されるのです。

<script>
$(function(){
  $("#fish").css("color", "red");
});
</script>

✔︎もっと詳しく

基本セレクタ② .class名

2つ目のセレクタは、「.class名」使った要素の選択の仕方です。

使い方は、上のid属性を使ったものと同じで、HTMLのclass属性を指定するだけです。

<script>
$(function(){
  $(".fish").css("color", "red");
});
</script>

階層セレクタの紹介と使い方

次に、「階層セレクタ」というセレクタを解説していきます。

階層セレクタは、上で紹介した、基本的なセレクタよりも、より絞り込んで、要素を選択する方法になります。

階層セレクタ① (スペース)

要素を選択するときに、スペースを使って、指定するとより高度な要素の選択が出来ます。

スペースを使うことで、「ある親要素の子要素や孫要素を選択」することが出来ます。

言葉で説明しても、僕の語彙力では、意味が分からないと思いますので、下のコードを見てもらえれば一発で理解できると思います。

<div id="food">
<h1 id="title1">肉</h1>
<ul id="meet">
	<li id="beef">牛肉</li>
	<ul>
		<li id="sirloin">サーロイン</li>
		<li id="fillet">ヒレ</li>
	</ul>
	<li id="tikin">鶏肉</li>
	<li id="pork">豚肉</li>
	<li id="ramu">羊肉</li>
</ul>
</div>

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

<script>
$(function(){
  $("#meet li").css("color", "red");
});
</script>

コードが長くなってしまい、申し訳ありません!

コードは長いですが、記述している内容は、難しいことはないので、じっくりと見ていただければ理解できると思います。

注目して欲しい部分は、一番下の方に書いてある、$(“#meet li”)の部分です。

#meetとliタグの間に、スペースを入れることで、「#meetの子要素であるliタグと孫要素になるliタグ」が選択されているのが分かります。

今回は、要素の文字を赤色にするメソッドを記述しています

階層セレクタ② >

2つ目は、右矢印のようなものを記述して、選択する方法です。

これは、「ある親要素の子要素を選択」することが出来ます。

<div id="food">
<h1 id="title1">肉</h1>
<ul id="meet">
	<li id="beef">牛肉</li>
	<ul>
		<li id="sirloin">サーロイン</li>
		<li id="fillet">ヒレ</li>
	</ul>
	<li id="tikin">鶏肉</li>
	<li id="pork">豚肉</li>
	<li id="ramu">羊肉</li>
</ul>
</div>

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

<script>
$(function(){
  $("#meet > li").css("color", "red");
});
</script>

階層セレクタ①で、説明した「(スペース)」と違い、サーロインとヒレは選択されませんでした。

このように、「>」の記号で選択すると、親要素の子要素までしか、選択されず、孫要素以降は選択されないのが、特徴です。

階層セレクタ③ +

3つ目は、「+」を記述して、選択する方法です。

これは「ある要素の次の要素を選択」します。

<div id="food">
<h1 id="title1">肉</h1>
<ul id="meet">
	<li id="beef">牛肉</li>
	<ul>
		<li id="sirloin">サーロイン</li>
		<li id="fillet">ヒレ</li>
	</ul>
	<li id="tikin">鶏肉</li>
	<li id="pork">豚肉</li>
	<li id="ramu">羊肉</li>
</ul>
</div>

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

<script>
$(function(){
  $("#tikin+").css("color", "red");
});
</script>

$(“#tikin+”)」という形で、コードを書いていますので、「鶏肉の次の豚肉が選択されています」。

これは子要素にも効果があるので、「牛肉+」とすると「サーロイン」が選択されて、赤文字になります。

階層セレクタ④ ~

次は、「~」を記述して、選択する方法です。

これは、「+」の派生版みたいな感じになります。

効果は「ある要素の次の要素以降を選択」します。

<div id="food">
<h1 id="title1">肉</h1>
<ul id="meet">
	<li id="beef">牛肉</li>
	<ul>
		<li id="sirloin">サーロイン</li>
		<li id="fillet">ヒレ</li>
	</ul>
	<li id="tikin">鶏肉</li>
	<li id="pork">豚肉</li>
	<li id="ramu">羊肉</li>
</ul>
</div>

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

<script>
$(function(){
  $("#tikin~").css("color", "red");
});
</script>

$(“#tikin~”)」という形で、コードを書いていますので、「鶏肉の次の豚肉以降である羊肉まで選択されています」。

これは子要素にも効果があるので、「牛肉~」とすると「サーロインから羊肉まで」選択されます。

jQueryのセレクタの紹介と使い方 [まとめ]

今回は、「基本的なセレクタ」と「階層セレクタ」を紹介しました。

要素の取得には、他にも、「フィルタ」と「メソッドでの取得」があります。

そちらは、のちのち紹介していこうと思います。

人気記事プログラミングスクールである「TECH::EXPERT」が素晴らしくオススメな理由[あの有名人も絶賛!]