分類解析 jQuery セレクター-jsチュートリアル-php.cn

基本セレクター:

#id Idに基づいて要素と一致

.class ccogene in in... すべての要素に一致

selecttor1,selector2 共用体セット、2つのセレクターで一致した要素を返す

階層セレクター:

ancestor子孫先祖に従ってすべての子孫要素と一致します

parent>child 親要素、直接の子孫に従ってすべての子要素と一致します

prev+next 次のものと一致します兄弟要素は next() メソッドと同等です

prev~siblings次の兄弟要素のマッチングは nextAll() メソッドと同等です兄弟要素のすべてにマッチングします。 last element

:not(selector) selector で照合できない要素と一致する

:even 偶数のインデックス値を持つ要素と一致し、インデックス番号は 0 から始まります

:odd 奇数のインデックス値を持つ要素とインデックスが一致します番号は0から始まります

:eq(index) 指定されたインデックス番号を持つ要素と一致し、インデックス番号は0から始まります

:gt(index) 指定されたインデックス値より大きいインデックス番号を持つ要素と一致します要素、インデックス番号0から始まる

:lt(index) インデックス番号が指定されたインデックス値より小さい要素に一致し、インデックス番号が0から始まる要素に一致します

:header すべてのヘッダ要素に一致 h1 h2 h3 h4 h5 h6

:animated すべてに一致アニメーション化されている要素

コンテンツフィルターセレクター:

:contains(text) 指定されたテキストを含む要素と一致します

:empty 子要素またはテキストを含まないすべての空の要素と一致します

:has(selector) 要素を一致させますその子孫には、要素に一致するセレクターが含まれています。：cssがインライン、インポート、またはリンクされているかどうかに関係なく、要素に一致する親の手書き要素。要素はインライン、インポート、またはリンクされています

[attribute=value] 属性 =value

[attribute!=value] 属性を持つ要素と一致しますが、!=value

[attribute^=value] 属性値を持つ要素と一致しますvalue で始まる

[attribute $=value] 一致する属性値は value で終わる要素です

[attribute*=value] 一致する属性値には特定の値を持つ要素が含まれており、前後と途中の部分もカウントされます

[selector][selector] 一致属性セレクター

子要素フィルターセレクターの交差:

:nth-child(eq|even|odd|index) すべての親要素の特定の位置にある子要素を取得します

:first in in in in in inds in ints.すべて: Last は、すべての親要素の下にある最後のサブ要素を取得します

: Only-child は、すべての親要素の下にある唯一の要素を取得します

フォームオブジェクト属性フィルターの選択:

:利用可能なすべての要素を次の形式で取得できるようにしました。すべて利用不可になっています| すべてのフォーム要素を取得します <テキストエリア選択で入力が始まります

:text すべての単一行テキストボックスを取得します

:password すべてのパスワードボックス要素を取得

:radio すべてのラジオボタンを取得

:checkbox すべてのチェックボックスを取得

:submit すべての送信ボタンを取得

:image すべての画像ボタンを取得

:reset すべてのリセットボタンを取得< ;input type="reset" />

:button すべてのボタンを取得

:file すべてのファイルアップロードボックスを取得

1.基本セレクター

(1)、 #id Idに基づいて要素と一致

$("#div1").css("background-color","red");　　//匹配id为"div1"的元素
<div id="div1">我是一个DIV</div> //会选中该div元素

ログイン後にコピー

(2)、element 指定された要素名に基づいて要素と一致

$("p").css("background-color","red");　　　　//匹配页面所有的p元素
<p>我是一个P</p>

ログイン後にコピー

(3)、class class属性に従って要素と一致

$(".important").removeClass();　　　　//匹配所有class="important"元素
<p class="important">我是一个p元素</p>

ログイン後にコピー

(4), selector1,selector2 セレクターをカンマで区切って、各セレクターに一致する要素を返します

$(".div1,#span1").css("background-color","red" );

2. レベルセレクター

(1)、ancestor子孫は先祖要素に基づいてすべての子孫要素を照合し、一致した子孫要素をスペースで区切って返します。

$("#div1 span").css("color","red");
 
　　　　<div id="div1">
　　　　　　<span>我是span1</span>　　　　　***会被选中，是#div1的后代span
　　　　　　<div>
　　　　　　　　<span>我是span3</span>　　　***会被选中，也是#div1的后代span
　　　　　　</div>
　　　　</div>
　　　　<span>我是span2</span>　　　　　　　***不会被选中，不是#div1的后代

ログイン後にコピー

(2)、親 > 子親要素に従ってすべての子要素を照合し、大なり記号「>」で区切られたすべての子要素を返します

$("#div1 > span").css("color","red");
　　　　<div id="div1">
　　　　　　<span>我是span1</span>　　　　　***会被选中，是#div1的子元素span
　　　　　　<div>
　　　　　　　　<span>我是span3</span>　　　***不会被选中，是#div1的后代元素，但不是直接子元素
　　　　　　</div>
　　　　</div>
　　　　<span>我是span2</span>　　　　　　　***不会被选中，不是#div1的子元素

ログイン後にコピー

(3)、 prev + next プラス記号「+」で区切られた prev 要素の直後にある隣接する要素と一致します。

.next()メソッドと同等

$(".p1 + p").css("color","red");　　　　//此行代码相当于$(".p1").next().css("color","red");
　　　<div>
　　　　　<p>我是第一个P</p>　　　　　　***不会被选中，是class为p1的上一个了
　　　　　<p class="p1">我是第二个P</p>　　***prev本身并不会被选中
　　　　　<p>我是第三个P</p>　　　　　　***会被选中，是class为p1的下一个相邻元素
　　　　　<p>我是第四个P</p>　　　　　　***不会被选中，不是class为p1的下一个，是下二个了
　　　</div>

ログイン後にコピー

(4), prev ~ sibings prevに一致するすべての兄弟要素は波線「~」で区切られています

nextAll()メソッドと同等

$(".p1 + p").css("color","red");　　　　//此行代码相当于$(".p1").nextAll("p").css("color","red");
　　<div>
　　　　<p>我是第一个P</p>　　　　　　***不会被选中，是class为p1前面的元素
　　　　<p class="p1">我是第二个P</p>　　***prev本身并不会被选中
　　　　<p>我是第三个P</p>　　　　　　***会被选中，是class为p1后面的P兄弟元素
　　　　<p>我是第四个P</p>　　　　　　***会被选中，也是class为p1后面的P兄弟元素
　　</div>

ログイン後にコピー

(5)、全ての兄弟要素を選択 Brothers()メソッド

$(".p1").sibings("p").css("color","red");
　　<div>
　　　　<p>我是第一个P</p>　　　　　　***会被选中，是class为p1的P兄弟元素
　　　　<p class="p1">我是第二个P</p>　　***prev本身并不会被选中
　　　　<p>我是第三个P</p>　　　　　　***会被选中，是class为p1的P兄弟元素
　　　　<p>我是第四个P</p>　　　　　　***会被选中，也是class为p1的P兄弟元素
　　</div>

ログイン後にコピー

3、簡易フィルターセレクター

(1), first() or: first 条件を満たす最初のものを選択要素

$("#div1 > p:first").css("color","red")　　//此行代码相当于　　$("#div1 > p").first().css("color","red");
　　　<div id="div1">
　　　　　<p>我是第一个P</p>　　　***会被选中，是id为#div1下的第一个P元素
　　　　　<p>我是第二个P</p>　　　***不会被选中，是第二个P元素了
　　　　　<p>我是第三个P</p>　　　***不会被选中，是第三个P元素了
　　　</div>

ログイン後にコピー

(2)、last() または: last ( 5)、odd 奇数のインデックス値 (1、3、5、7、9...) を持つ要素を取得します。インデックス番号は 1 から始まることに注意してください。

$("#div1 > p:last").css("color","red");　　　　//此行代码相当于　$("#div1 > p").last().css("color","red");
　　　<div id="div1">
　　　　　<p>我是第一个P</p>　　　***不会被选中，是第一个
　　　　　<p>我是第二个P</p>　　　***不会被选中，是第二个
　　　　　<p>我是第三个P</p>　　　***会被选中，id为#div1下的最后一个P元素
　　　</div>

ログイン後にコピー

(6), eq (インデックス)

(8), lt(インデックス) |

” get は、インデックス値がインデックス未満であるすべての要素に対して取得されます。インデックス番号は0から始まります単独、h6

$("#div1 > p:not(&#39;.p1&#39;)").css("color","red");
　　<div id="div1">
　　　　<p>我是第一个P</p>　　　　　　　　***会被选中
　　　　<p class="p1">我是第二个P</p>　　***不会被选中，因为符合了:not里的条件 class="p1"
　　　　<p>我是第三个P</p>　　　　　　　　***会被选中
　　</div>

ログイン後にコピー

(10)、アニメーション効果を実行している要素

4、 :contains(text) 要素を取得します指定されたテキストを含む

$("#div1 > p:even").css("color","red");
　　　<div id="div1">
　　　　　<p>我是第一个P</p>　　***会被选中，索引号0
　　　　　<p>我是第二个P</p>　　***不会被选中，索引号1
　　　　　<p>我是第三个P</p>　　***会被选中，索引号2
　　　　　<p>我是第四个P</p>　　***不会被选中，索引号3
　　　　　<p>我是第五个P</p>　　***会被选中，索引号4
　　　</div>

ログイン後にコピー

(2),:empty 子要素やテキストを含まない空の要素を取得する

$("#div1 > p:odd").css("color","red");
　　　<div id="div1">
　　　　　<p>我是第一个P</p>　　***不会被选中，索引号0
　　　　　<p>我是第二个P</p>　　***会被选中，索引号1
　　　　　<p>我是第三个P</p>　　***不会被选中，索引号2
　　　　　<p>我是第四个P</p>　　***会被选中，索引号3
　　　　　<p>我是第五个P</p>　　***不会被选中，索引号4
　　　</div>

ログイン後にコピー

(3), :has(selector) を含む要素を選択セレクターによって一致した要素 (直接の子に限定されないことに注意してください。要素は子孫である限りカウントされます)

$("#div1 > p:eq(1)").css("color","red");
　　　<div id="div1">
　　　　　<p>我是第一个P</p>　　***不会被选中，索引号为0
　　　　　<p>我是第二个P</p>　　***不会被选中，索引号为1
　　　　　<p>我是第三个P</p>　　***不会被选中，索引号为2
　　　　　<p>我是第四个P</p>　　***不会被选中，索引号为3
　　　</div>

ログイン後にコピー

(4), :parent 子要素またはテキスト要素を含む要素

$("#div1 > p:gt(1)").css("color","red");
　　　<div id="div1">
　　　　　<p>我是第一个P</p>　　***不会被选中，索引号为0
　　　　　<p>我是第二个P</p>　　***不会被选中，索引号为1
　　　　　<p>我是第三个P</p>　　***会被选中，索引号为2大于1了
　　　　　<p>我是第四个P</p>　　***会被选中，索引号为3大于1了
　　　</div>

ログイン後にコピー

5. 可視性フィルターセレクター

(1)、:hidden 目に見えない要素をすべて選択

$("#div1 > p:lt(1)").css("color","red");
　　<div id="div1">
　　　　<p>我是第一个P</p>　　***会被选中，索引号为0，小于1
　　　　<p>我是第二个P</p>　　***不会被选中，索引号为1，不小于1
　　　　<p>我是第三个P</p>　　***不会被选中，索引号为2大于1了
　　　　<p>我是第四个P</p>　　***不会被选中，索引号为3大于1了
　　</div>

ログイン後にコピー

全ての目に見えない要素

erated in me in in me in in in advice on in 属性

(4), [attribute^=value] 属性値が value

$("#div1 > :header").css("color","red");
　　 <div id="div1">
　　　　　<p>我是一个P</p>　　　　　　***不会被选中，不是标题类型元素
　　　　　<span>我是一个span</span> ***不会被选中，不是标题类型元素
　　　　　<h1>我是一个h1</h1>　　　　***会被选中，h1是标题类型元素
　　　　　<h6>我是一个h6</h6>　　　　***会被选中，h6是标题类型元素
　　　</div>

ログイン後にコピー

で始まる要素を取得する

(5), [attribute$=value] 要素を取得属性値が値

$("p:contains(&#39;三&#39;)").css("background-color","red");
　<div>
　　<p>我是第一个P</p>　　***不会被选中
　　<p>我是第二个P</p>　　***不会被选中
　　<p>我是第三个P</p>　　***会被选中，文本里包含了"三"
　</div>

ログイン後にコピー

で終わるもの

　　(6)、[attribute*=value]　　获取属性值包含value值元素

$("div[class*=div]").css("font-size","30px");
<div class="div1">我是div1</div>　　***会被选中，属性值包含div
<div class="1div">我是1div</div>　　***会被选中，属性值包含div
<div class="1div1">我是1div1</div> ***会被选中，属性值包含div
<div class="abc">我是abc</div>　　　***会被选中，属性值包含div

ログイン後にコピー

　　(7)、[selector][selector][selector]　　获取属性交集元素

$("div:[class][title=title1]").css("background-color","red");
<div class="div1" title="title1">我是div1,title1</div>　　***会被选中，有class属性且title属性等于title1
<div class="div1" title=title2>我是div1,title2</div>　　　***不会被选中，虽然有class属性，但是title属性不等于title2
<div class="div3">我是div3</div>　　　　　　　　　　　***不会被选中，没有title属性

ログイン後にコピー

7、子元素过滤选择器

　　　(1):nth-child(eq|even|odd|index)　　　　获取每个父元素下的特定位置元素，索引号从1开始

$("div>p:nth-child(1)").css("background-color","red");　　//选中每一个父元素下的div下的第一个直接P元素
<div>
　　<p>我是第一个P</p> 　　*** 会被选中，是div下的第一个子P元素
　　<p>我是第二个P</p> 　　*** 不会被选中，是第二个了
</div>
<div>
　　<P>我是第三个P</P> 　　*** 会被选中，是div下的第一个子P元素
　　<P>我是第四个P</P> 　　*** 不会被选中，是第二个了
</div>

ログイン後にコピー

(2):first-child　　　　选中每个父元素下的第一个

$("p:first-child").css("background-color","red");　　　　//选中每一个父元素下的第一个P元素
<div>
　　<p>我是第一个P</p> 　　*** 会被选中，是div下的第一个子P元素
　　<p>我是第二个P</p> 　　*** 不会被选中，是第二个了
</div>
<ul>
　　<li>
　　　　<P>我是第三个P</P> 　　*** 会被选中，是div下的第一个子P元素
　　　　<P>我是第四个P</P> 　　*** 不会被选中，是第二个了
　　</li>
</ul>

ログイン後にコピー

(3)、:last-child　　选中每一个父元素下的最后一个元素

$("p:last-child").css("background-color","red");　　　　//选中每一个父元素下的第一个P元素
<div>
　　<p>我是第一个P</p> 　　*** 不会被选中，不是某父元素的最后一个子P元素
　　<p>我是第二个P</p> 　　*** 会被选中，是div元素下的最后一个子P元素
</div>
<ul>
　　<li>
　　　　<P>我是第三个P</P> 　　*** 不会被选中，不是某父元素下的最后一个子P元素
　　　　<P>我是第四个P</P> 　　*** 会被选中，是div元素下的最后一个P元素
　　</li>
</ul>

ログイン後にコピー

(4)、:only-child　　获取每个父元素下唯一仅有的一个子元素

$("p:only-child").css("background-color","red");
　　<div>
　　　　<p>我是第一个P</p>　　***不会被选中，不是某父元素下的唯一一个P元素
　　　　<p>我是第二个P</p>　　***不会被选中，不是某父元素下的唯一一个P元素
　　</div>
　　<div>
　　　　<span>我是一个span</span>　　***不会被选中，不是某父元素下的唯一一个P元素
　　　　<p>我是第三个P</p>　　　　　　 ***不会被选中，不是某父元素下的唯一一个span元素
　　</div>
　　<div>
　　　　<p>我是一个P</p>　　　　***会被选中，是div下的唯一一个P元素
　　</div>

ログイン後にコピー

8、表单对象属性过滤选择器

　　(1)、:enabled　　获取表单中所有属性为可用的元素

$("input:enabled").val("jQuery表单对象属性过滤选择器");
　　<div>
　　　　<input type="text" value="我是一个可用的input" />　　　　***会被选中，是一个可用的表单元素
　　　　<input type="text" value="我是一个不可用的input" disabled="disabled" />　　***不会被选中，是不可用的表单元素
　　</div>

ログイン後にコピー

(2)、:disabled　　获取表单中属性不可用的元素

$("input:enabled").val("jQuery表单对象属性过滤选择器");
<div>
　<input type="text" value="我是一个可用的input" />　　　　***不会被选中，是一个可用的表单元素
　<input type="text" value="我是一个不可用的input" disabled="disabled" />　　***会被选中，是不可用的表单元素 //注意，jQuery能够操作不可用　　　的表单元素
</div>

ログイン後にコピー

(3)、:checked　　　　获取表单中被选中的元素　　从属性能够知道用户选中了哪个

$("input:checked").val("jQuery");
　　<div>
　　　　<input type="checkbox" checked="checked" value="1">选中
　　　　<input type="checkbox" value="0">未选中
　　</div>

ログイン後にコピー

(4)、:selected　　　　获取表单中被选中的元素　　此属性能够知道用户选择了哪个

alert($("input:selected").text(""));　　//获取所有被选中的option元素
　　<div>
　　　　<selected>
　　　　　　<option value="0" selected="selected">option1</option>　　***会被选中
　　　　　　<option value="1">option2</option>　　　　　　　　　　***不会被选中，因为本option不是选中的。
　　　　</selected>
　　</div>

ログイン後にコピー

9、表单选择器

(1)、:input　　获取所有的input、textarea、select

$(":input").val("jQuery");
　　<div>
　　　　<textarea>我是一个兵</textarea>　　***会被选中
　　　　<input text="button" value="" />　　***会被选中
　　　　<p>我是一个P</p>　　　　　　　　　　***不会被选中
　　</div>

ログイン後にコピー

(2)、:text　　获取所有的单行文本框，也就是元素

$(":text").val("jQuery");
　　<div>
　　　　<input type="text" value="我是一个input" />　　***会被选中，是单行文本框
　　　　<input type="button" value="确定" />　　　　　 ***不会被选中，不是单行文本框
　　　　<textarea>我是一个textarea</textarea>　　　　 ***不会被选中，不是单行文本框
　　</div>

ログイン後にコピー

(3)、:password　　获取所有的密码框　　也就是元素

$(":password").hide(3000);
<div>
　　<input type="password" />　　　　***会被选中，是密码框
　　<input type="text" value="我是一个文本框" />　　***不会被选中，是文本框
</div>

ログイン後にコピー

(4)、:radio　　获取所有的单选按钮

$(":radio").hide(3000);
<div>
　　<input type="radio" />我是一个radio　　***单选按钮会被选中，但是后面的文字不会
　　<input type="text" />我是一个文本框　　***不会被选中
</div>

ログイン後にコピー

(5)、：checkbox　　获取所有的复选框

$(":checkbox").hide(3000);
<div>
　　<input type="checkbox" />我是一个checkbox　　***复选框会被选中，文本不会
　　<input type="text" />我是一个文本框　　　　　　 ***不会被选中，不是复选框
</div>

ログイン後にコピー

(6)、:submit　　　　获取所有的提交按钮

$(":submit").hide(3000);
<div>
　　<input type="submit" value="提交">　　　　　　***会被选中，是提交按钮
　　<input type="text" value="我是一个文本框">　　 ***不会被选中，不是提交按钮
</div>

ログイン後にコピー

(7)、:image　　　　获取所有的图像域

$(":image").attr("title","我是一个图片按钮");
<div>
　　<input type="image" src="http://www.baidu.com/img/baidu_sylogo1.gif" />　　***会被选中
　　<input type="text" value="我是一个文本框" />　　　　　　***不会被选中，不是图片按钮
</div>

ログイン後にコピー

(8)、:reset　　　　获取所有重置按钮

$(":reset").hide(3000);
<div>
　　<input type="reset" value="重置">　　　　　　***会被选中，是重置按钮
　　<input type="text" value="我是一个文本框">　 ***不会被选中，不是重置按钮
</div>

ログイン後にコピー

(9)、:button　　　　获取所有的按钮

$(":button").hide(3000);
<div>
　　<input type="button" value="确认" />　　　　　　***会被选中，是按钮元素
　　<input type="text" value="我是一个文本框" />　　 ***不会被选中，不是按钮元素
</div>

ログイン後にコピー

(10)、:file　　　　获取所有的文件域

$(":file").hide(3000);
<div>
　　<input type="file" title="file" />
　　<input type="text" value="我是一个文本框" />
</div>

ログイン後にコピー