jQueryのセレクタ指定方法まとめ|よく使う指定方法から狂気の指定方法まで

javascript
この記事は約4分で読めます。
スポンサーリンク

jQueryでセレクタ(HTML要素)を指定する方法ですが、ずっとjQueryを使っていても指定方法が難しくって
結局いつもクラスを足しちゃったりしているので「覚えよう!」の意味を込めてまとめたいと思います。

ID、クラスの指定方法

$("#wrapper") // IDの指定 id="wrapper"
$(".inner") // classの指定 class="inner"

2つ以上の指定方法

$("#top, .middle, .bottom") // IDでもclassでも関係なく何個でもイケる

親・小・孫・兄弟要素の指定方法

$("#top").parent("#wrapper") //「#top」の親要素の「#wrapper」
$(".middle > .inner") //「.middle」直下の「.inner」
$(".middle").children(".inner") //「.middle」直下の「.inner」
$("#top .inner") //「#top」の中にある「.inner」
$("#top").find(".inner") //「#top」の中にある「.inner」
$("#top").siblings() //「#top」の兄弟要素すべて
$("#top").siblings(".middle") //「#top」の兄弟要素の「.middle」

何番目系の指定方法

$("li").eq(0) //「li」の一番最初。ゼロ番目
$("li:first-child") //「li」の一番最初。
$("li:last-child") //「li」の最後。
$("li:nth-child(3)") //「li」の上から3番目。
$("li:nth-of-type(2)") //「li」の上から2番目。
$("li:nth-last-child(3)") //「li」の下から3番目。
$("li:nth-last-of-type(2)") //「li」の下から2番目。
$("li:nth-child(odd)") //「li」の奇数番目(1,3,5,7....)
$("li:nth-child(even)") //「li」の偶数番目(2,4,6,8....)
$("li:nth-child(-n+5)") //「li」の最初から5番目まですべて。
$("li:nth-child(n+4)") //「li」の4番目から最後まですべて。

フォーム要素の指定方法

$("input") //「input」要素すべて
$("select") //「select」要素すべて
$('input[name="number"]') //「input」要素の「name」が「number」
$('input[type="submit"]') //「input」要素の「type」が「submit」
$('input[type="checkbox"]:checked') //チェックボックスがチェックされてたら
$('input[type="radio"]:checked') //ラジオボタンがチェックされてたら
$("select option:selected") //セレクトボックスがチェックされてたら
$("input:disabled") //「input」要素が入力禁止

表示・非表示の指定方法

$("#top:hidden") //「#top」が消えてたら(display: none;)
$("#top:visible") //「#top」が見えてたら(display: block;)

狂気の指定方法

これは、最近サイトを製作していて、実際に書いた指定方法で
ダメな指定方法だなと思ったので書いておきます。

$("#top").find("p").parent(".inner").children("a").children("span") // 子要素の親要素のさらに子要素とか指定しちゃう感じが狂気
$(".contents > ul > li .option > ul > li > ul > li .btn > a > span") // 多分HTMLでどこの指定なのか確認する時、あきらめるやつ。
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました