jQueryセレクタ学習

一、基本選択器
構文
説明
$("*")
ドキュメント内のすべての要素を選択
$("div")
エレメントセレクタ、すべてのdivエレメントを選択し、配列を返します.
$("#id")
Idセレクタ、単一の要素を返す
$(".class")
classセレクタ、配列を返します
$("p , div")
パラレルセレクタ、すべてのp要素とdiv要素を返します
二、階層選択器
構文
説明
$("A B")
非直接サブノードを含むすべてのA要素の下にあるすべてのBサブ要素を選択します.
$("A > B")
サブエレメントセレクタ、Aの下にある直接Bサブエレメントを選択し、非直接サブノードを含まない
$("A + B")
兄弟エレメントセレクタに隣接し、Aエレメントの後ろに隣接するBエレメントを選択します.選択しない場合はnext()メソッドに等しいです.
$("A ~ B")
兄弟要素セレクタ、Aの後ろのすべてのB要素を選択し、nextall()メソッドに等しい
三、フィルタセレクタ
1、基本フィルタセレクタ
構文
説明
$("span : first")
最初の要素を選択
$("span : last")
2番目の要素を選択
$("span : not(.wrap)")
非要素をとる
$("tr : even")
偶数行の選択(インデックスは0から)
$("tr : odd")
奇数行を選択(インデックスは0から)
$("tr : eq(2)")
指定したインデックスの要素を選択(インデックスは0から)
$("tr : gt(2)")
インデックス番号より大きい要素を選択(インデックスは0から)
$("ul li : lt(2)")
インデックス番号より小さい要素を選択(インデックスは0から)
$(": header")
すべてのタイトル要素を選択
$(": animated")
すべてのアニメーション要素を選択
2、コンテンツフィルタセレクタ
構文
説明
$("span : contains('hello')")
特定のテキストを含む要素の選択
$("span : empty”)
サブエレメントまたはテキストが空でないエレメントを選択
$("ol li : parent”)
サブエレメントまたはテキストが空でないエレメントを選択
$("div : has(span)”)
サブエレメントに指定したエレメントが含まれているエレメントを選択します.直系サブエレメントでなくても有効です.
3、可視フィルタセレクタ
構文
説明
$("div : hidden")
display:noneまたはinput type=「hidden」の要素のみを選択し、visibility:hiddenまたはopacity:0の要素は選択しません.つまり、hiddenは「非表示」で空間を占有しない要素にのみ一致します.
$("div : visible")
表示される要素の選択
4、属性フィルタセレクタ
構文
説明
$("[href]")
hrefプロパティを持つすべての要素を選択
$("[href = '#']")
すべてのhref属性の値が「#」に等しい要素を選択します.
$("[href != '#']")
すべてのhref属性の値が「#」に等しくない要素を選択します.
$("[herf ^= 'http']")
すべてのhrefプロパティの値を「http」で始まる要素を選択します.
$("[herf $= '.jsp']")
すべてのhrefプロパティの値を「jsp」で終わる要素を選択します.
$("[herf *= 'www']")
すべてのhrefプロパティの値に「www」を含む要素を選択します.
四、フォームセレクタ
1、基本フォームセレクタ
構文
説明
$(":input")
すべてのinput要素を選択
$(":text")
すべてのtype=「text」のinput要素を選択
$(":password")
すべてのtype=「password」のinput要素を選択
$(":radio")
すべてのtype="radio"のinput要素を選択
$(":checkbox")
すべてのtype=「checkbox」のinput要素を選択
$(":submit")
すべてのtype=「submit」のinput要素とbutton要素を選択します.
$(":reset")
すべてのtype="reset"のinput要素とbutton要素を選択
$(":button")
すべてのtype=「button」のinput要素と、buttonというラベルのすべての要素を選択します.
$(":image")
すべてのtype="image"のinput要素を選択
$(":file")
すべてのtype=「file」のinput要素を選択
2、フォーム要素フィルタセレクタ
構文
説明
$(":enabled")
有効なすべてのinput要素とbutton要素を選択
$(":disabled")
無効な(disabled=「disabled」が設定されている)input要素とbutton要素をすべて選択します.
$(":selected")
選択したすべてのドロップダウン・リスト・オプションの選択
$(":checked")
選択したすべてのチェックボックスまたはラジオボタン要素を選択
五、jQuery CSSセレクタ
jQuery CSSセレクタは、HTML要素のCSS属性を変更するために使用できます.
構文:jQueryセレクタ.css(「cssプロパティ」、「cssプロパティ値」);

$("div").css("background-color","red");

六、jQuery親、子、兄弟ノードを検索する方法
構文
説明
jQuery.parent(expr)
親ノードを探すには、exprに入力フィルタリング、例えば$(「span」)を行うことができる.parent()または$(「span」).parent(".class")
jQuery.parents(expr)
すべての祖先要素を検索し、親要素から検索します.
jQuery.closest(expr)
最初に一致する祖先要素を検索し、現在の要素から検索します.
jQuery.children(expr)
すべてのサブノードを返します.このメソッドは直接の子供ノードのみを返し、すべての子孫ノードを返しません.
jQuery.contents()
ノードとテキストを含む次のすべての内容を返します.
jQuery.prev()
前の兄弟ノードを返します.すべての兄弟ノードではありません.
jQuery.prevAll()
以前のすべての兄弟ノードを返します
jQuery.next()
次の兄弟ノードに戻ります.すべての兄弟ノードではありません.
jQuery.nextAll()
すべての兄弟ノードを返します
jQuery.siblings()
兄弟姉妹ノードに戻り、前後を問わず
jQuery.find(expr)
初期セットの内容はありません.例えば、$(「p」)、find(「span」)は、サブエレメントから検索され、$(「p span」)に等しいです.
jQuery.filter(expr)
初期コレクションの内容が表示されます
七、参考資料
jQueryセレクタ大全
jQueryセレクタまとめ
w 3 school-jQueryリファレンスマニュアル-セレクタ