jQueryでセレクタ（HTML要素）を指定する方法ですが、ずっとjQueryを使っていても指定方法が難しくって
結局いつもクラスを足しちゃったりしているので「覚えよう！」の意味を込めてまとめたいと思います。
ID、クラスの指定方法
$("#wrapper") // IDの指定 id="wrapper"
$(".inner") // classの指定 class="inner"
２つ以上の指定方法
$("#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」の奇数番目（１，３，５，７....）
$("li:nth-child(even)") //「li」の偶数番目（２，４，６，８....）
$("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でどこの指定なのか確認する時、あきらめるやつ。
コメント