Web制作初心者のための技術情報サイト -知るWeb-

jQuery 初心者向け 「セレクタ」の使い方入門編 まずはこれだけ抑えればOK！

by · 公開 · 更新済み


Webデザイン入門オンライン講座 Udemy

jQueryとは、JavaScriptを短いコードで扱える、ライブラリ（いろんなプログラムをまとめて簡単に扱えるようにしたもの）です。

JavaScript(JS）をある程度理解してきたら、JSをガリガリ書くよりも、jQueryでJSを扱う機会が増えると思います。

※JSの基礎はこちらの記事をご覧ください。
「JavaScriptを学びたい初心者が心折れずに学べるサイトと書籍７選」

なぜなら、「楽」だから。短いコードで複雑なJSと同じ動きを実現できるので、まぁそれはそれは、ありがたやーなライブラリな訳です。

で、jQueryを扱うにあたっては、今回紹介する「セレクタ」の使い方がポイントとなります。様々な指定方法があらかじめ用意されており、その決まり事を理解しておけば、コーディングスピードも圧倒的に早くなることでしょう。

目次

jQueryの「セレクタ」って何？

jQueryの書き方基本

jQueryの基本的な書き方は、下記となります。

$(セレクタ).メッソッド(引数)；

例えば、

 $("#hoge").html("ほげー");

みたいに書きます。

これを、jQueryを使わずに、JSで書くと、

 document.getElementById("hoge").innerHTML = "ほげー";

ということになります。

 <div id="hoge"></div>

っていうhtmlのdiv要素を用意すると、その要素の中に「ほげー」という文字が差し込まれるわけです。

つまり、「セレクタ」って何？

ってことですが、

上記の例における、jQueryのセレクタは

$(“#hoge”)

の　”#hoge” になります。

つまり、「jQueryを使って何かをしたい（＝これがメソッド）、html中の場所」と言い換えられます。ざっくりいうと。

例のように、ピンポイントで「id」名を指定するというのはとてもわかりやすいですが、他にも色々な指定の方法があります。
jQueryで実現したい動きを、どいつ（＝セレクタ）にやらせたいかは、idのような絶対指定だけではなく、相対的な指定をしてより効率的にコードを書く方が良い場合もあります。

本記事では、よく使う、というかこれさえ押さえておけば十分だろうというセレクタの指定方法をまとめています。

要素を指定する方法

全要素を指定


$("*")

要素名で指定


$("div") 

//div要素全て指定する

id名から要素を指定

$("#hoge")

//要素のidが「hoge」のものを指定する

クラス名から要素を指定

$(".cl-hoge") 

//要素のclassが「cl-hoge」のものをすべて指定する

要素名、またはid名で指定

$("p, #hoge") 

//p要素またはidが「hoge」のものを定する

あるidの配下にある要素を全て指定

$("#hoge p") 

//id=hoge の中にあるp要素全てを指定

あるidの直下にある要素のみ指定

$("#hoge > a") 

//id=hoge の直下にあるa要素のみ指定

ある要素の次に出てくる要素を指定

$("h3 + p") 

//h3 の次に出てくるp要素のみ指定

ある要素以降に出てくる、特定の要素全てを指定

$("h3 ~ p") 

//h3 以降に出てくる全てのp要素を指定

フィルターを使って指定する方法

全体の中で、要素直下の要素のうち、最初の要素のみ指定

$("ul > li:first") 

//そのページ内にあるすべてのul要素の中で一番最初のliのみ指定

全体の中で、要素直下の要素のうち、最後の要素のみ指定

$("ul > li:last") 

//そのページ内にあるすべてのul要素の中で一番最後のliのみ指定

親要素直下の子要素のうち、最初の子要素のみ指定

$("ul > li:first-child") 

//そのページ内にあるul要素それぞれの子要素の中で最初のliのみ指定

親要素直下の子要素のうち、最後の子要素のみ指定

$("ul > li:last-child") 

//そのページ内にあるul要素それぞれの子要素liの中で最後のliのみ指定

親要素直下の子要素のうち、偶数番目の要素のみ指定

$("ul > li:even") 

//ul要素それぞれの子要素liの中で偶数番目のliのみ指定

ある要素内の要素で奇数番目の要素のみ指定

$("ul > li:odd") 

//ul要素それぞれの子要素liの中で奇数番目のliのみ指定

ある要素直下の要素内でn番目の要素のみ指定

$("ul > li:eq(3)") 

//ul要素それぞれの子要素liの中で3番目のliのみ指定 eq は equal(=イコール）の略と覚えると良い

ある要素直下の要素内でn番目より前の要素をすべて指定

$("ul > li:lt(3)") 

//ul要素それぞれの子要素liの中で3番目より前のliのみ指定 lt は less than(=より小さい）の略と覚えると良い

ある要素直下の要素内でn番目より後の要素をすべて指定

$("ul > li:gt(3)") 

//ul要素それぞれの子要素liの中で3番目より後のliのみ指定 gt は grater than(=より大きい）の略と覚えると良い

a個おきに要素を指定

$("ul > li:nth-child(3)") 

//ul要素それぞれの子要素liの中で３個おきに指定

ある文字列を含む要素を指定

$("div:contains('hoge')") 

//"hoge"という文字を持つ div要素を指定

内容を持つ要素を指定

$("div:parent") 

// <div>ほげ</div> みたいに中身を持っているdiv要素を指定

内容を持たない要素を指定

$("div:empty") 

// <div></div> みたいに空っぽのdiv要素を指定

hasによって指定された要素を含む要素を指定

$(" div:has(span)") 

//span要素を持つdiv要素を指定

ある要素がただ一つの子要素である場合のみ指定

$(" div > span:only-child") 

//span要素しか持っていないdiv要素のみ指定

属性フィルターを使って指定する方法

属性名で指定

$("a[href]")

//a要素内のhref属性を指定

属性名のうち特定の値に一致する要素を指定

$("span[class='hoge']") 

//span要素のうち、class名がhogeを指定

属性名のうち特定の値に一致しない要素を指定

$("span[class!='hoge']") 

//span要素のうち、class名がhogeではないものを指定

属性名が前方一致する要素を指定

$("span[class^='hoge']") 

//span要素のうち、class名がhogeから始まるものを指定

属性名が後方一致する要素を指定

$("span[class$='hoge']") 

//span要素のうち、class名がhogeで終わるものを指定

属性名が部分一致する要素を指定

$("span[class*='hoge']") 

//span要素のうち、class名にhogeを含むものを指定

ある属性を持たない要素を指定

$("div:not[class]") 

//div要素のうち、classを持たないものを指定

複数の属性条件に適合する要素を指定

$("div:[class='hoge'] [id]") 

//div要素のうち、class名がhogeで、かつid属性を持つものを指定

フォーム要素の各属性指定

$(":input") 
//input要素を指定

$(":radio") 
//ラジオボタンの要素を指定

$(":checkbox") 
//チェクボックス要素を指定

$(":button") 
//ボタン用を指定

$(":hidden") 
//hidden（隠し）要素を指定

フォーム要素の選択状態で指定

$('input[name=hoge]:checked') 
//input要素のnameがhogeの中でチェックされているものを指定

$('input[name=hoge]:selected') 
//input要素のnameがhogeの中で選択されているものを指定

そのほかによく使う指定方法

その要素そのものを指定

$("p").click(function () {
  $(this).slideUp();
}); 

//this は クリックされたp要素のみを指定する。

その要素の親要素を指定

$("p").click(function () {
  $(this).parent("div")・・・
});

//クリックされたp要素の親要素であるdiv要素を指定する。

その要素の子要素を取り出す

$("p").click(function () {
  $(this).children("div")・・・
}); 

//クリックされたp要素の子要素であるdiv要素を指定する。

いかがでしたか？

セレクタの構文はこのようにたくさんありますが、考え方さえ覚えてしまえば、問題なく使いこなせるはずです。
jQueryの基本となるセレクタ、しっかり覚えましょう！

タグ:

あわせて読みたい