jQueryの一般的なセレクタとapiの使い方

セレクタ
きほんセレクタ
$('*')
ページのすべての要素に一致
$('#id')
idセレクタ
$('.class')
クラスセレクタ
$('element')
ラベルセレクタ
グループ/階層セレクタ
$('E,F')
マルチエレメントセレクタ
$('E F')
子セレクタ、スペースで区切られ、E要素のすべての子孫(サブ要素のみならず、サブ要素が下に再帰する)要素Fに一致する
$(E>F)
サブエレメントセレクタ、">"で区切り、Eエレメントのすべての直接サブエレメントに一致
$('E+F')
直接隣接セレクタ、E要素の後の隣接する兄弟要素Fに一致する
$('E~F')
通常の隣接セレクタ(弟セレクタ)、E要素の後の同級要素F(直接隣接するかどうかにかかわらず)を一致させる
$('.class1.class2')
クラス名にclass 1とclass 2を含む要素を一致させる
きほんフィルタセレクタ
$("E:first")
すべてのEの最初の
$("E:last")
すべてのEの最後の
$("E:not(selector)")
selectorによるEのフィルタリング
$("E:even")
すべてのEにおけるindexは偶数である
$("E:odd")
すべてのEにおけるindexは奇数である
$("E:eq(n)")
すべてのEのindexがnの要素
$("E:gt(n)")
すべてのEのindexがnより大きい要素
$("E:lt(n)")
すべてのEのindexがn未満の要素
$(":header")
h 1~h 6元素の選択
$("div:animated")
アニメーション効果を実行する要素を選択
コンテンツフィルタ
$('E:contains(value)')
コンテンツにvalue値を含む要素
$('E:empty')
コンテンツが空の要素
$('E:has(F)')
サブエレメントにFがあるエレメント,$('div:has(a)'):aラベルを含むdiv
$('E: parent')
親要素はEの要素、$('td:parent'):親要素はtdの要素
ビジュアルセレクタ
$('E:hidden')
隠されたすべてのE
$('E:visible')
すべてのE
属性フィルタセレクタ
$('E[attr]')
属性attrを含むE
$('E[attr=value]')
属性attr=valueのE
$('E[attr !=value]')
属性attr!=valueのE
$('E[attr ^=value]')
属性attr valueで始まるE
=value]')
属性attrがvalueで終わるE
$('E[attr *=value]')
属性attrはvalueのEを含む
$('E[attr][attr *=value]')
連用可能
サブエレメントフィルタ
$('E:nth-child(n)')
Eのn番目のサブノード
$('E:nth-child(3n+1)')
Eのindexは3 n+1式のサブノードに適合する
$('E:nth-child(even)')
Eのindexが偶数のサブノード
$('E:nth-child(odd)')
Eのindexが奇数のサブノード
$('E:first-child')
すべてのEの最初のサブノード
$('E:last-child')
すべてのEの最後のサブノード
$('E:only-child')
唯一のサブノードのみのEのサブノード
フォーム要素セレクタ
$('E:type')
特定のタイプのinput
$(':checked')
選択されたcheckboxまたはradio
$('option: selected')
選択されたアクション
CSSセレクタを復習するのは木があって、そのおかげで、開発者は多くのjsライブラリの中で急速にjQueryに愛用して、図を見て記憶しやすいです
セレクタjQueryの使用に加えて、現在の要素に関連する要素を検索する方法もいくつか用意されています.
.eq(index), .get([index])
特定の結果セットについて、indexを指定するjQueryオブジェクトを取得するには、eqメソッドを使用します.

$('div').eq(3); //           jQuery  

指定されたindexのDOMオブジェクト、すなわちjQueryオブジェクトがDOMオブジェクトを回転することをクラス配列の下付きの取得方法またはget方法で取得できます.

$('div')[2];
$('div').eq(2);

get()パラメータを書かずにすべてのオブジェクトをDOMオブジェクトに戻します.
兄弟要素の取得
.next([selector]), .prev([selector]) nextは、一致する要素の集合のうち、各要素が隣接する後続の同世代要素の要素の集合を取得する.セレクタを指定すると、直後の兄弟要素がセレクタを満たす場合にのみ、この要素が返されます.prevは正反対で、要素を取得する前の同世代の要素です.

$('.test').next();
$('.test').prev('li');

.nextAll([selector]), .prevAll([selector]) nextAllは、各一致要素のセット内の各要素のすべての後の世代要素、選択的にフィルタされたセレクタ、prevAllとは逆に、要素の前の世代要素を取得する
.siblings([selectors])
一致するエレメントセット内の各エレメントの兄弟エレメントを取得するには、オプションのセレクタを指定します.

$('li.third-item').siblings()

親子要素の取得
.parent([selector])
一致する要素のセットを取得します.各要素の親要素には、オプションのセレクタがあります.

$('li.item-a').parent()

.parents([selector])
コレクション内の各一致する要素の祖先要素を取得し、パラメータとしてオプションのセレクタを指定できます.

$('li.item-a').parents('div')

.children([selector])
一致するエレメントセット内の各エレメントのサブエレメントを取得し、セレクタ選択フィルタ

$('ul.level-2').children()

.find([selector])
セレクタに一致する子孫要素の検索

$('ul').find('li.current');

現在の結果セットのフィルタ
.first()
現在の結果セットの最初のオブジェクトの取得
.last()
現在の結果セットの最後のオブジェクトを取得
.filter(selector), .filter(function(index))
現在の結果セットが条件を満たすオブジェクトをフィルタします.パラメータはセレクタまたは関数です.

$('li').filter(':even')

$('li').filter(function(index) {
  return index % 3 == 2;
})

.not(selector), .not(function(index))
一致するエレメントセットから指定したエレメントを削除し、filterとは逆
.is(selector), is(function(index)), is(dom/jqObj)
現在一致している要素のセット内の要素が、セレクタ、DOM要素、またはjQueryオブジェクトであるかどうかを判断し、これらの要素が少なくとも1つが所定のパラメータに一致している場合、trueを返します.

    if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }

.has(selector), .has(dom)
一致するエレメントセット内の一致するセレクタまたはDOMエレメントの子孫エレメントをフィルタします.

$('li').has('span')