jQuery の強力な selectors_jquery の概要

基本的なセレクター
$("input"): input タグを持つすべての要素を選択します
$("#input1"): input1 の ID を持つ要素を選択します
$(" .acss"): acss この css クラス スタイルを含むすべての
コードを選択します

コードをコピーします コードは次のとおりです:

🎜>
<script> <br>var oo = $("input"); //oo は上記 3 つのセットです<br>var pp = $("#input1");//pp は最初のものです<br>var qq = $(".acss");//qq は最初の 2 つのセット<br></script>



上記の 3 つのクエリを組み合わせて使用​​できます

var ww = $("input.acss "); //acss の入力タグ要素を選択します
var ee = $("input#Text1.acss");//Text1 の acss ID を持つ入力タグ要素を選択します

2. -selection
親ノードと直接の子ノードは (>) で区切られています。つまり、子セレクター メソッドが実装されています。

コードをコピー コードは次のとおりです:

">

< a href=""
;a href="">

< ;script>
var oo = $("p a "); //p の下のすべての a を選択
var pp = $("p>a"); 2 つの a 要素、ID は a1 と a2 です
var qq = $("p.acss a") //ID a1 の要素が選択されます




3. 機能セレクター

[href^=http://] を選択
コード

コードをコピー


コードは次のとおりです。

id=" Text5" name="myput" />

< script>
var oo = $("a[href^=http://]"); // http:// で始まる a を選択します。 a3 selects
var pp = $("input[name$=Input]"); //名前がInputで終わる入力を選択します。 Text3、Text4 selected
var qq = $("a[href*=com]"); //com の a を含める href を選択します。 a3、a4 が選択されます
var ww = $("input[id=Text3]") //
と完全に一致するものを選択します。
さらに、jQuery は has メソッドも提供します。上の例のように、
div:has(input) は意味します。入力を含むすべての div を選択します
注: div 入力は div
内のすべての入力要素を選択します。 4. 位置セレクター
位置セレクターは主に要素の位置に基づきます。
div a:first はページ上の div の最初の a を返します
div a last はページの div の最後の a を返します
div od はページ上の偶数の位置にある div を返します
div Even ページ上の奇数の位置の ID を返します
div first-child div 内の最初の子の選択を返します
div last-child div 内の最後の子の選択を返します
only-child 要素兄弟ノードなし
nth -child(n): n 番目の子ノード
eq(n) n 番目の一致する要素
gt(n) n の後に一致する要素には、以前に一致する
lt(n) の要素が含まれていませんn
5. jQuery カスタム選択 は含まれません。

名称	说明	解释
:input	匹配所有 input, textarea, select 和 button 元素	查找所有的input元素:  $(":input")
:text	匹配所有的文本框	查找所有文本框:  $(":text")
:password	匹配所有密码框	查找所有密码框:  $(":password")
:radio	匹配所有单选按钮	查找所有单选按钮
:checkbox	匹配所有复选框	查找所有复选框:  $(":checkbox")
:submit	匹配所有提交按钮	查找所有提交按钮:  $(":submit")
:image	匹配所有图像域	匹配所有图像域:  $(":image")
:reset	匹配所有重置按钮	查找所有重置按钮:  $(":reset")
:button	匹配所有按钮	查找所有按钮:  $(":button")
:file	匹配所有文件域	查找所有文件域:  $(":file")

名称	说明	解释
:enabled	匹配所有可用元素	Find all available input elements: $("input:enabled")
:disabled	Match all unavailable elements	Find all disabled input elements: $("input:disabled")
:checked	Matches all selected selected elements (check boxes, radio buttons, etc., excluding options in select)	Find all checked checkbox elements: $("input:checked")
:selected	Matches all selected option elements	Find all selected option elements: $("select option:selected")