jQuery選擇器大全

選擇器是jquery最基礎的東西，也許這篇文章能夠加深對jquery選擇器的理解，它們本身用法就非常簡單，它能夠提公升個人編寫jquery**的效率。本文配合截圖、**和簡單的概括對所有jquery選擇器進行了介紹，也列舉出了一些需要注意和區分的地方。

將id="one"的元素背景色設定為黑色。（id選擇器返單個元素）

$(document).ready(function () );

將class="cube"的元素背景色設為黑色

$(document).ready(function () );

將p元素的文字大小設定為12px

$(document).ready(function () );

$(document).ready(function () );

$(document).ready(function () );

$(document).ready(function () );

下面的**，只有第乙個span會變色，第二個span不屬於div的一代子元素，顏色保持不變。

123

456

$(document).ready(function () );

下面的**，只有123和789會變色

123456

789

$(document).ready(function () );

下面的**，g2和g4會變色

g2g3

——1.1 :first和:last（取第乙個元素或最後乙個元素）

$(document).ready(function () );

下面的**，g1（first元素）和g3（last元素）會變色

g2g3

——1.2 :not（取非元素）

$(document).ready(function () );

下面的**，g1會變色

但是，請注意下面的**：

當g1所在div和g2所在div是父子關係時，g1和g2都會變色。

——1.3 :even和:odd（取偶數索引或奇數索引元素，索引從0開始，even表示偶數，odd表示奇數）

$(document).ready(function () );

a、c行顏色#eee（第一行的索引為0），b、d行顏色#dadada

d——1.4 :eq(x) （取指定索引的元素）

$(document).ready(function () );

更改第三行的背景色，在上面的**中c的背景會變色。

——1.5 :gt(x)和:lt(x)

（取大於x索引或小於x索引的元素）

$(document).ready(function () );

l4和l5會是紅色，l1和l2會是藍色，l3是預設顏色

——1.6 :header（取h1~h6標題元素）

$(document).ready(function () );

下面的**，h1~h6的背景色都會變

——2.1:contains(text)（取包含text文字的元素）

$(document).ready(function () );

下面的**，第乙個dd會變色

技術

jquery, .net, clr

seo關鍵字排名

其他

——2.2 :empty（取不包含子元素或文字為空的元素）

上面第三個dd會顯示"沒有內容"文字

——2.3 :has(selector)（取選擇器匹配的元素）

$(document).ready(function () );

即使span不是div的直系子元素，也會生效

——2.4 :parent（取包含子元素或文字的元素）

$(document).ready(function () );

下面的**，a和d所在的li會有邊框

——3.1 :hidden（取不可見的元素）jquery至1.3.2之後的:hidden選擇器僅匹配display:none或的元素，而不匹配visibility: hidden或opacity:0的元素。這也意味著hidden只匹配那些「隱藏的」並且不佔空間的元素，像visibility:hidden或opactity:0的元素佔據了空間，會被排除在外。

參照：下面的**，先彈出"hello"對話方塊，然後hid-1會顯示，hid-2仍然是不可見的。

——3.2 :visible（取可見的元素）下面的**，最後乙個div會有背景色

jquery選擇器大全

——4.1 [attribute]（取擁有attribute屬性的元素）下面的**，最後乙個a標籤沒有title屬性，所以它仍然會帶下劃線

——4.2 [attribute = value]和[attribute != value]（取attribute屬性值等於value或不等於value的元素）分別為class="item"和class!=item的a標籤指定文字顏色

jQuery選擇器大全

JQuery選擇器大全

JQuery選擇器大全

jQuery選擇器大全

jQuery選擇器大全

JQuery選擇器大全

JQuery選擇器大全

jQuery選擇器大全

相關推薦