jQuery選擇器
1,基本選擇器
//選擇ID,返回單個元素 $("#one").css("background", "#bfa"); //選擇.mini類,返回集合 $(".mini").css("background", "#bfa"); //選擇Element名,返回集合 $("div").css("background", "#bfa"); //選擇所有,返回集合 $("*").css("background", "#bfa"); //選擇所有div,span和類.myClass的p元素 $("div,span,p.myClass").css("background", "#bfa");
2,層次選擇器
$("body div").css("background", "#bfa");//body內所有div $("body > div").css("background", "#bfa");//body的子元素div $(".one + div").css("background", "#bfa");//.one的同級div元素 $(".one").next("div");//.one的同級div元素 $("#two ~ div").css("background", "#bfa");//#two的后面div同級元素,不包括#two $(".one").nextAll("div");//#two的后面div同級元素,不包括#two $(".one").sibling("div").css("background", "#bfa");//所有.one同級的div元素,與位置無關
3,基本過慮選擇器,過濾選擇器以:開始
$("div:first");//第一個 $("div:last");//最后一個 $("input:not(.one)");//不包括.one $("input:even");//偶數,從0,2,4... $("input:odd");//奇數 $("input:eq(1)");//索引=1的input,從0開始 $("input:gt(1)");//索引>1的input,從0開始 $("input:lt(1)");//索引>1的input,從0開始 $(":header");//選取所有標題元素H1,H2.... $("div:animated")//選取正在執行動畫的div元素 $(":focus")//選取當前獲得焦點的元素
4,內容過濾選擇器,子元素或文本內容
$("div:contains('text')");//含有文本"text"的元素 $("div:empty");//不包含子元素或者文本為空的div元素 $("div:parent");//包含子元素或者文本的div元素 $("div:has(p)");//包含p的div元素
5,可見性過濾器
$(":hidden");//選取所有隱藏元素集合,包含display:none,input="hidden",visibility="hidden"的元素 $(":visible");//選取所有可見元素集合 .show(),顯示元素,3000ms
6,屬性過濾器
$("div[id]");//選取div屬性有id的元素 $("div[title=test]");//title=test的div元素 $("div[title!=test]");//title!=test的div元素 $("div[title^=test]");//title以test開始的div元素 $("div[title$=test]");//title以test結尾的div元素 $("div[title*=test]");//title包含test的div元素 $("div[title|=test]");//title以test開頭或者=test的div元素 $("div[title~=test]");//title以空格分隔的值包含test的div元素 $("div[id][title=test]");//組合元素
7,子元素過濾選擇器
:nth-child(index/even/odd/equation);//選取每個父元素下的第一個index元素或奇偶元素(index從1算起) :first-child;//選取每個父元素的第一個子元素 :last-child;//選取每個父元素的最后一個子元素 :only-child;//某個元素是它父元素中的唯一子元素;
8,表單對象屬性過濾器,對所選表單元素進行過濾
:enabled; $("#form1 :enabled");//form1內所有可用元素,返回集合元素 :disabled; $("#form1 :disabled");//返回集合元素 :checked; $("input:checked");//所有被選中元素,單、復選框 :selected; $("select option:selected"); //下拉框選中.text()
9,表單選擇器
:input 所有input,textarea,select,button元素 :text 所有單行文本框元素 :password 密碼框元素 :radio 單選框元素 :checkbox :submit :image :reset :button :file :hidden
本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!