Jquery:強大的選擇器

jopen 10年前發布 | 55K 次閱讀 jQuery Ajax框架

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

   一、基本選擇器

   大部分都是基本選擇器。基本選擇器中包含id選擇器、class選擇器、標簽選擇器、復合選擇器和“*”選擇器。

   $("#id") 選取所有屬性id等于“id”的元素。

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

   $("p") 選取所有的<p>元素。

   $("div,span,p.myClass") 選取所有<div>、<span>和屬性class為“myClass”的<p>標簽的一組元素。

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

   二、層次選擇器

   如果想根據個元素之間的層次關系來獲取特定的元素,可以選擇使用層次選擇器。

   $("div p") 選取<div>里所有的<p>元素。這個選擇器獲取的是所有后代元素,而不是下一層次的元素(即子元素)。

   $("div>p") 選取<div>里所有標簽為<p>子元素。

   $(".class_1+div") 選取屬性class為“class_1”的下一個<div>同輩元素。

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

   $(".class_1~div") 選取屬性class為“class_1”的元素后面的所有<div>同輩元素。

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

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

   三、過濾選擇器

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

   1、基本過濾選擇器

   $("div:first") 選取所有<div>元素中第一個<div>元素。

   $("div:last") 選取所有<div>元素中最后一個<div>元素。

   $("input:not(.class_1)") 選取屬性class不是“class_1”的<input>元素。

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

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

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

   $("input:gt(1)") 選取索引大于1的<input>元素。(注:大于1,而不包括1)

   $("input:lt(1)") 選取索引小于1的<input>元素。(注:小于1,而不包括1)

   $(":header") 選取網頁中所有的<h1>,<h2>,<h3>...。

   $("div:animated") 選取正在執行動畫的<div>元素。

   $(":focus") 選取當前獲取焦點的元素。

   2、內容過濾選擇器

   $("div:contains('我')") 選取含有文本“我”的<div>元素。

   $("div:empty") 選取不包含子元素(包括文本元素)的<div>空元素。

   $("div:has(p)") 選取含有<p>元素的<div>元素。

   $("div:parent") 選取擁有子元素(包括文本元素)的<div>元素。

   3、可見性過濾選擇器

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

   $("div:visible") 選取所有可見的<div>元素。

   4、屬性過濾選擇器

   $("div[id]") 選取擁有屬性id的<div>元素。

   $("div[title=text]") 選取屬性title為“text”的<div>元素。

   $("div[title!=text]") 選取屬性title不等于“text”的<div>元素。(注:沒有屬性title的<div>元素也會被選取

   $("div[title^=text]") 選取屬性title是以“text”開頭的<div>元素。

   $("div[title$=text]") 選取屬性title是以“text”結束的<div>元素。

   $("div[title*=text]") 選取屬性title中含有“text”的<div>元素。

   $('div[title|="text"]') 選取屬性title等于“text”或以“text”為前綴的<div>元素。(注:為前綴指該字符串后跟一個‘-’)。

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

   $("div[id][title$='text']") 選取擁有屬性id,并且屬性title以“text”結束的<div>元素。

   5、子元素過濾選擇器

   $("div.one:nth-child(2)") 選取屬性class為“one”的<div>父元素下的第二個子元素。

   $("div.one:first-child(2)") 選取屬性class為“one”的<div>父元素下的第一個子元素。

   $("div.one:last-child(2)") 選取屬性class為“one”的<div>父元素下的最后一個子元素。

   $("div.one:first-child(2)") 如果屬性class為“one”的<div>父元素下只有一個子元素,則選取這個子元素。

   6、表單對象屬性過濾選擇器

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

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

   $("input:checked") 選取被選中的多選框。

   $("select:selected") 選取下拉框中被選中的項。

   (注:在元素中設置屬性disabled為“disabled”可使此元素不可用)

   四、表單選擇器

   $(":input") 選取所有<input>、<textarea>、<select>和<button>元素。

   $(":text") 選取所有的單行文本框。

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

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

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

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

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

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

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

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

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

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

   如:<div id="id[1]">aa</div>,獲取此元素的方法是:$("#id\\[1\\]")。

   2、選擇器中含有空格

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

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

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

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!