jquery選擇器大全

2022-07-29 19:51:08 字數 3111 閱讀 5266

選擇器是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會變色

g1

g2g3

g4

——1.1 :first和:last(取第乙個元素或最後乙個元素)

$(document).ready(function () );
下面的**,g1(first元素)和g3(last元素)會變色

g1

g2g3

——1.2 :not(取非元素)

$(document).ready(function () );
下面的**,g1會變色

g1

g2

但是,請注意下面的**:

g1

g2

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

——1.3 :even和:odd(取偶數索引或奇數索引元素,索引從0開始,even表示偶數,odd表示奇數)

$(document).ready(function () );
a、c行顏色#eee(第一行的索引為0),b、d行顏色#dadada

abc

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的背景色都會變

h4

h5h6

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

$(document).ready(function () );
下面的**,第乙個dd會變色

技術

jquery, .net, clr

seo關鍵字排名

其他

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

$(document).ready(function () );
上面第三個dd會顯示"沒有內容"文字

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

$(document).ready(function () );
即使span不是div的直系子元素,也會生效

——2.4 :parent(取包含子元素或文字的元素)

$(document).ready(function () );
下面的**,a和d所在的li會有邊框

ad

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

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

display: none

visibility: hidden

——3.2 :visible(取可見的元素)下面的**,最後乙個div會有背景色

display: none

visibility: hidden

jquery選擇器大全

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

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

JQuery選擇器大全

jquery 的選擇器可謂之強大無比,這裡簡單地總結一下常用的元素查詢方法 myelement 選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用my...

JQuery選擇器大全

jquery 的選擇器可謂之強大無比,這裡簡單地總結一下常用的元素查詢方法 myelement 選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用my...

jQuery選擇器大全

在dom 程式設計中我們只能使用有限的函式根據id 或者tagname 獲取dom 物件.然而在jquery 中則完全不同,jquery 提供了異常強大的選擇器用來幫助我們獲取頁面上的物件,並且將物件以jquery 包裝集的形式返回。本文主要對常用的jquery 選擇器進行乙個介紹及歸類。jquer...