首頁 > web前端 > js教程 > 主體

Jquery:強大的選擇器

高洛峰
發布: 2016-12-17 16:01:18
原創
1291 人瀏覽過

Jquery選擇器分為基本選擇器、層次選擇器、過濾選擇器和表單選擇器,以下一一介紹這四種選擇器。

   一、基本選擇器

   大部分都是基本選擇器。基本選擇器包含id選擇器、class選擇器、標籤選擇器、複合選擇器和「*」選擇器。

   $("#id") 選取所有屬性id等於「id」的元素。

   $(".class_1") 選取所有屬性class為「class_1」的元素。

   $("p") 選取所有的

元素。

   $("div,span,p.myClass") 選取所有

和屬性class為「myClass」的

標籤的一組元素。

   $("*") 選取所有元素。

   二、層級選擇器

   如果想要根據個元素之間的層級關係來取得特定的元素,則可以選擇使用層級選擇器。

   $("div p") 選取

裡面所有的

元素。這個選擇器獲取的是所有後代元素,而不是下一層次的元素(即子元素)。

   $("div>p") 選取

裡面所有標籤為

子元素。

   $(".class_1+div") 選取屬性class為「class_1」的下一個

同儕元素。

   $(".class_1").next("div") 效果同上。

   $(".class_1~div") 選取屬性class為「class_1」的元素後面的所有

同輩元素。

   $(".class_1").nextAll("div") 效果同上。

   $(".class_1").siblings("div") 與上面兩個選擇器不同的是:這個選擇器沒有前後之分,它選取所有同輩的

元素。

   三、過濾選擇器

   過濾選擇器都是以冒號(:)開頭,過濾選擇器可分為基本過濾、內容過濾、可見性過濾、屬性過濾、子元素過濾和表單物件屬性過濾選擇器。

   1、基本過濾選擇器

   $("div:first") 選取所有

元素中第一個
元素。

   $("div:last") 選取所有

元素中最後一個
元素。

   $("input:not(.class_1)") 選取屬性class不是「class_1」的元素。

   $("input:even") 選取索引是偶數的元素。

   $("input:odd") 選取索引是奇數的元素。

   $("input:eq(1)") 選取索引等於1的元素。

   $("input:gt(1)") 選取索引大於1的元素。 (註:大於1,而非1)

   $("input:lt(1)") 選取索引小於1的元素。 (註:小於1,而不包括1)

   $(":header") 選取網頁中所有的

...。

   $("div:animated") 選取正在執行動畫的

元素。

   $(":focus") 選取目前取得焦點的元素。

   2、內容過濾選擇器

   $("div:contains('我')") 選取含有文字「我」的

元素。

   $("div:empty") 選取不包含子元素(包含文字元素)的

空元素。

   $("div:has(p)") 選取含有

元素的

元素。

   $("div:parent") 選取擁有子元素(包含文字元素)的

元素。

   3、可見性濾波選擇器

   $(":hidden") 選取所有不可見元素,$("input:hidden") 選取所有看不見的元素。

   $("div:visible") 選取所有可見的

元素。

   4、屬性過濾選擇器

   $("div[id]") 選取擁有屬性id的

元素。

   $("div[title=text]") 選取屬性title為「text」的

元素。

   $("div[title!=text]") 選取屬性title不等於「text」的

元素。 (註:沒有屬性title的
元素也會被選取)

   $("div[title^=text]") 選取屬性title是以「text」開頭的

元素。

   $("div[title$=text]") 選取屬性title是以「text」結束的

元素。

   $("div[title*=text]") 選取屬性title中含有「text」的

元素。

   $('div[title|="text"]') 選取屬性title等於「text」或以「text」為前綴的

元素。 (註:為前綴指該字串後面接著一個‘-’)。

   $('div[title~="text"]') 選取屬性title以空格分隔的值中包含字元「text」的元素。

   $("div[id][title$='text']") 選取擁有屬性id,且屬性title以「text」結束的

元素。

   5、子元素過濾選擇器

   $("div.one:nth-child(2)") 選取屬性class為「one」的

父元素下的第二個子元素。

   $("div.one:first-child(2)") 選取屬性class為「one」的

父元素下的第一個子元素。

   $("div.one:last-child(2)") 選取屬性class為「one」的

父元素下的最後一個子元素。

   $("div.one:first-child(2)") 若屬性class為「one」的

父元素下只有一個子元素,則選取這個子元素。

   6、表單物件屬性過濾選擇器

   $("#form1 input:enabled") 選取表單內可用的元素。

   $("#form1 input:disabled") 選取表單內不可用的元素。

   $("input:checked") 選取已選取的多重選取方塊。

   $("select:selected") 選取在拉框中選取的項目。

   (註:在元素中設定屬性disabled為「disabled」可使此元素不可用)

   四、表單選擇器

   $(":input") 選取所有 >和

   $(":text") 選取所有的單行文字方塊。

   $(":password") 選取所有的密碼框。

   $(":radio") 選取所有的單選框。

   $(":checkbox") 選取所有的複選框。

   $(":image") 選取所有的影像按鈕。

   $(":reset") 選取所有的重設按鈕。

   $(":button") 選取所有的按鈕。

   $(":file") 選取所有的上傳控制項。

   $(":hidden") 選取所有的不可見元素。

   五、選擇器中的一些注意事項

   1、一些屬性值中含有特殊字元

   如:

aa
,取得此元素的方法是: $("#id\[1\]")。

   2、選擇器含有空格

   $('.class_1 :hidden')與$('.class_1:hidden')的比較。

   $('.class_1 :hidden') 取得到的是屬性class為class_1的元素裡邊包含的隱藏元素。

   $('.class_1:hidden') 取得到的是屬性class為class_1的元素。



更多Jquery:強大的選擇器相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板