Jquery 選擇器 詳解

一、基本選擇器

1 $("#div1").html("hello world 1"); //

根據id匹配元素（a）
2 $(".c1").html("hello world 2"); //
根據yclass匹配元素（b）
3 $("span").html("hello world 3"); //
根據元素名稱匹配 （c）
4 $("span,div.c1").html("hello world 4"); //
匹配頁面所有的span 和class=c1的div（b c）
5 $("*").html("hello world 5"); //
匹配頁面所有元素,也包含body

1 $("body span").html("hello world 1"); //

選取body中所有的span（a b d）
2 $("body>span").html("hello world 2"); //
選取body元素的子span元素(a b)
3 $("span.c1+div").html("hello world 3"); //
選取class為c1的span的下乙個div元素，注意是同級元素
4 $("span.c1").next().html("hello world 3"); //
跟上行效果相同 (c)
5 $("span.c1~div").html("hello world 4"); //
選取class為c1的span的後面的所有div
6 $("span.c1").nextall().html("hello world 4"); //
跟上行效果相同(c e)

1 $("div:first").html("hello world 1"); //

選取所有div中的第乙個div
2 $("span:last").html("hello world 2"); //
選取所有span中的最後乙個
3 $("span:not(.c1)").html("hello world 3"); //
選取除class為c1的span外的所有span
4 $("span:even").html("hello world 4"); //
選取索引為偶數的span，索引從0開始
5 $("span:odd").html("hello world 5"); //
選取索引為奇數的span，索引從0開始
6 $("span:eq(2)").html("hello world 6"); //
選取指定索引的span，索引從0開始
7 $("span:gt(0)").html("hello world 7"); //
選取大於指定索引的span，不包含指定索引
8 $("span:lt(2)").html("hello world 8"); //
選取小於指定索引的span，不包含指定索引
9 $(":header").html("hello world 9"); //
選取頁面中所有的標題元素 h1 h2 h3...

1 $("span:contains(aa)").html("hello world 1"); //

選取內容包含aa的span元素
2 $("span:empty").html("hello world 2"); //
選取空的span元素
3 $("div:has(span)").html("hello world 3"); //
選取包含span的div元素
4 $("span:parent").html("hello world 4"); //
選取包含子元素的span元素，包含文字

1 $("span[id]").html("hello world 1"); //

選取有屬性id的span元素
2 $("span[id=span2]").html("hello world 2"); //
選取屬性id等於span2的span元素
3 $("span[id!=span2]").html("hello world 3"); //
選取屬性id不等於為span2的span元素
4 $("span[id^=span]").html("hello world 4"); //
選取屬性id以span開始的span元素
5 $("span[id$=2]").html("hello world 5"); //
選取屬性id以2結尾的span元素
6 $("span[id*=an]").html("hello world 6"); //
選取屬性id包含an的span元素
7 $("span[id*=an][class$=2]").html("hello world 6"); //
選取屬性id包含an並且class以結尾的span元素

1 $("div.c1 :nth-child(1)").html("hello world 1"); //

選取class等於c1的div的指定索引子元素
2 $("div.c1 :nth-child(even)").html("hello world 2"); //
選取class等於c1的div的偶數子元素
3 $("div.c1 :nth-child(odd)").html("hello world 3"); //
選取class等於c1的div的奇數子元素
4 $("div.c1 :first-child").html("hello world 4"); //
選取class等於c1的div的第乙個子元素
5 $("div.c1 :last-child").html("hello world 5"); //
選取class等於c1的div的最後乙個子元素
6 $("div.c1 :only-child").html("hello world 6"); //
選取class等於c1的div只有乙個子元素的子元素

1 $("#form1 input:enabled").val("hello world 1"); //

選取form表單中沒有禁用的文字框
2 $("#form1 input:disabled").val("hello world 2"); //
選取form表單中沒有禁用的文字框
3 $("#form1 input:checked").attr("checked",false); //
選取form表單中選的核取方塊
4 $("select option[selected]").each(function () );

1

<
body
>
2<
div 
id="div#1"
>aaaaaaaaaaa
div>
3<
div 
class
="c[1]"
>bbbbbbbbb
div>
4<
div 
class
="c1"
>
5<
div 
name
="div"
>ccccccccc
div>
6<
div 
name
="div"
>ddddddddd
div>
7<
div 
name
="div"
>eeeeeeeee
div>
8<
div 
class
="c1"
name
="div"
>fffffffff
div>
9div
>
10<
div 
class
="c1"
name
="div"
>gggggggg
div>
11<
div 
class
="c1"
name
="div"
>hhhhhhhh
div>
12body
>
1314
$(function () );

JQuery選擇器詳解

id class 復合選擇器 div p span 層級選擇器 div下的p元素中的span元素 div p 父子選擇器 div下的所有p元素 div p 相鄰元素選擇器 div後面的p元素 僅乙個p div p 兄弟選擇器 div後面的所有p元素 同級別 p last 類選擇器 加 過濾選擇器 第...

Jquery 選擇器 詳解

一 基本選擇器 1 div1 html hello world 1 根據id匹配元素 a 2 c1 html hello world 2 根據yclass匹配元素 b 3 span html hello world 3 根據元素名稱匹配 c 4 span,div.c1 html hello worl...

jQuery選擇器詳解

根據所獲取頁面中元素的不同，可以將jquery選擇器分為4大類 基本選擇器 層次選擇器 過濾選擇器 表單選擇器。其中，過濾選擇器有可以分為6種 簡單過濾選擇器 內容過濾選擇器 可見性過濾選擇器 屬性過濾選擇器器 子元素過濾選擇器 表單物件屬性過濾選擇器。1 基本選擇器 id class 元素標籤 s...