DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery學習筆記之jQuery選擇器的使用
jQuery學習筆記之jQuery選擇器的使用
編輯:JQuery特效代碼     

一.基本選擇器:

  • #id :選擇給定ID名的元素 如:$("#id1")為選擇id為id1的元素
  • .class :選擇給定類名的元素
  • element :選擇給定元素名的所有原色
  • * :匹配所有元素
  • selector1,selector2,...... :選擇這些名稱的元素,以逗號隔開,可以是類或id名

二.層次選擇器:

  • $("ancestor descendant") :選擇ancestor元素下的所有descendant(後代)元素
  • $("parent>child") :選擇parent下的所有child(子)元素
  • $('prev+next') :選擇緊跟prev後面的第一個next元素
  • $('prev~siblings') :選擇prev後面的所有siblings元素

$('prev+next') 和$(.prev).next("next")作用一樣

$('prev~siblings')和$(.prev).nextAll("siblings")作用一樣

三.過濾選擇:

  • :first 選擇第一個元素 如:$("div:first")為選擇第一個div元素
  • :last 選擇最後一個元素
  • :not(selector) 選擇不是selector的元素
  • :even 選擇偶數索引的元素
  • :odd 選擇所有奇數索引的元素
  • :eq(index) 選擇索引等於index的元素
  • :gt(index) 選擇索引大於index的元素
  • :lt(index) 選擇索引小於index的元素
  • :header 選擇所有<H>元素
  • :animanted 選擇所有動畫元素

四。內容過濾:

  • :contains(text) 選擇含有text文本的元素 如:$("div:contains('hello')")為選擇含有hello字符的div元素
  • :empty 選擇所有不含字符的元素
  • :has(selector) 選擇含有selector元素的元素
  • :parent 選擇含有子元素的元素

五。可見性過濾:

  • :hidden 選擇所有可見元素
  • :visible 選擇所有不可見元素

六。屬性過濾:

  • [attribute] 選擇擁有此屬性的元素 如$("div[id]")選擇包含id屬性的div元素
  • [attribute=value] 選擇attribute屬性等於value值的元素
  • [attribute!=value] 選擇attribute屬性不等於value值的元素
  • [attribute^=value] 選擇attribute屬性等於value值的元素
  • [attribute$=value] 選擇attribute屬性值以value值開始的元素
  • [attribute*=value] 選擇attribute屬性值含有value值的元素
  • [selector1][selector2]....滿足這些條件的元素(組合)

七。子元素過濾選擇器

  • :nth-child(index/even/odd/eqation)選擇父元素下的[索引/偶/奇]的子元素
  • :first-child 選擇父元素的第一個子元素
  • :last-child選擇父元素的最後一個子元素
  • :only-child 選擇父元素下是唯一的子元素

八。表單屬性過濾

  • :enabled 選擇所有可見元素 如:$("#form1:enabled")是選擇表單id為form1的所有可以用元素
  • :disable 選擇所有不可見元素
  • :checked 選擇所有被選擇的元素
  • :selected 選擇所有被選中的選項元素

九.表單對象過濾

  • :input 選擇所有<input><textarea><select><button>元素
  • :text 選擇所有單行文本款,下面的都是這個格式
  • :password
  • :radio
  • :checkbox
  • :submit
  • :image
  • :reset
  • :button
  • :file
  • :hidden
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved