jQuery選擇器

選擇器

基本選擇器

  1. #id
    語法:$("#id名")

  2. element元素選擇器
    語法:$("標籤名")

  3. .class 類選擇器
    語法:$(".myClass");

  4. { * }
    語法:$("*")

  5. selector1,selector2,selectorN 將每一個選擇器匹配到的元素合併後一起返回。
    語法:$("div,span,p.myClass")


   //id選擇器
   var $boxId1 = $("#box_id1");
   $boxId1.click(function () {
       alert("hello")
   })
});

層級選擇器

  1. ancestor descendant:用以匹配元素的選擇器,並且它是第一個選擇器的後代元素
  2. parent > child:在給定的父元素下匹配所有的子元素
  3. prev + next 匹配所有緊接在 prev 元素後的 next 元素
  4. prev ~ siblings 匹配所有緊接在 prev 元素後的 next 元素

基本上和css的選擇器是一樣的,在css中我們有僞類選擇器在jQuery中也是存在的。

過濾選擇器

  • :first 獲取第一個元素
  • : not(selector) 去除所有與給定選擇器匹配元素
<input name="apple" />
<input name="flower" checked="checked" />

$("input:not(:checked)")

返回:[ <input name="apple" /> ]
  • :even 匹配所有索引值爲偶數的元素,從0開始計數
  • :add 匹配所有索引值爲奇數的元素,從0開始計數
  • :eq(index) 匹配一個給定索引值的元素
  • :gt(index) 匹配所有大於給定索引值的元素
  • :lang(language) 選擇指定語言的所有元素
選擇器$("div:lang(en)")將匹配<div lang="en"> and <div lang="en-us">(和他們的後代<div>),但不包括<div lang="fr">
  • : last() 獲取最後個元素
  • :It(index) 匹配所有小於給定索引值元素
  • :header 匹配如 h1, h2, h3之類的標題元素
  • :animated 匹配所有正在執行動畫效果的元素
  • :focus 匹配當前獲取焦點的元素
  • :root 選擇該文檔的根元素
  • :target 選擇由文檔URI的格式化識別碼表示的目標元素。
  • :contains(text) 匹配包含給定文本的元素
  • :empty 匹配所有不包含子元素或者文本的空元素
  • :has(selector) 匹配含有選擇器所匹配的元素的元素
  • :parent 匹配含有子元素或者文本的元素
  • :hidden 匹配所有不可見元素,或者type爲hidden的元素
  • :visible 匹配所有的可見元素

屬性

  • [attribute] 匹配包含給定屬性的元素
  • [attribute=value] 匹配給定的屬性是某個特定值的元素
  • [attribute!=value] 匹配所有不含有指定的屬性,或者屬性不等於特定值的元素。
  • [attribute^=value] 匹配給定的屬性是以某些值開始的元素
  • [attribute$=value] 匹配給定的屬性是以某些值結尾的元素
  • [attribute*=value] 匹配給定的屬性是以包含某些值的元素
  • [selector1][selector2][selectorN] 複合屬性選擇器,需要同時滿足多個條件時使用。

子元素

  • :first-child 類似的:first匹配第一個元素,但是:first-child選擇器可以匹配多個:即爲每個父級元素匹配第一個子元素。這相當於:nth-child(1)
  • :first-of-type 結構化僞類,匹配E的父元素的第一個E類型的孩子。等價於:nth-of-type(1) 選擇器。
  • :last-child 匹配最後一個子元素
  • :last-of-type 結構化僞類,匹配E的父元素的最後一個E類型的孩子
  • :nth-child 匹配其父元素下的第N個子或奇偶元素
  • :nth-last-child(n|even|odd|formula) 選擇所有他們父元素的第n個子元素。計數從最後一個元素開始到第一個。
  • :nth-last-of-type(n|even|odd|formula) 選擇的所有他們的父級元素的第n個子元素,計數從最後一個元素到第一個。
  • :nth-of-type(n|even|odd|formula) 選擇同屬於一個父元素之下,並且標籤名相同的子元素中的第n個。
  • :only-child 如果某個元素是父元素中唯一的子元素,那將會被匹配
  • :only-of-type 選擇所有沒有兄弟元素,且具有相同的元素名稱的元素

表單

  • input 匹配所有 input, textarea, select 和 button 元素
  • :text 匹配所有的單行文本框
  • :password 匹配所有密碼框
  • :radio 匹配所有單選按鈕
  • :checkbox 匹配所有複選框
  • :submit 匹配所有提交按鈕,
  • :image 匹配所有圖像域
  • :reset 匹配所有重置按鈕
  • :button 匹配所有按鈕
  • :file 匹配所有文件域
  • :hidden 匹配所有不可見元素,或者type爲hidden的元素
  • :visible 匹配所有的可見元素

表單對象屬性

  • :enabled 匹配所有可用元素
  • :disabled 匹配所有不可用元素
  • :checked 匹配所有選中的被選中元素(複選框、單選框等,select中的option),對於select元素來說,獲取選中推薦使用 :selected
  • :selected 匹配所有選中的option元素
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章