jquery系列教程1-選擇器全解
阿新 • • 發佈:2018-12-26
全棧工程師開發手冊 (作者:欒鵬)
jquery選擇器全解:
jquery選擇器$(“xxxx”),傳入字串獲取元素,字串的寫法與css的寫法相同。
基本選擇器
$("#myid"); //根據id獲取元素,等價於document.getElementById(),
$("#myid\\#b"); //根據id為myid#b的元素,對於屬性中含有.#([等特殊字元的要轉義獲取
$("label"); //根據標籤名稱獲取元素列表,等價於document.getElementByTagName(),
$( ".myclass"); //根據class獲取元素列表
$("div.myclass"); //根據class獲取元素列表
$("label,div,input"); //根據元素並集
$("body *"); //*獲取所有元素,空格表示後代元素
層次選擇器
$("#myid a"); //獲取所有子孫後代元素列表
$("#myid>a"); //獲取一級子元素列表(不包含孫元素)
$("#myid").next ("a"); //獲取緊接在之後的同輩元素列表,等價於$("#myid+a");
$("#myid").nextAll("a"); //獲取之後的所有同輩元素列表,等價於$("#myid~a");
$("#myid").siblings("a"); //獲取所有同輩元素列表,無論前後
過濾選擇器(基本過濾器)
$("div:first"); //所有div中的第一個div元素
$("div:last"); //所有div中的最後一個div元素
$("div:not(.myclass)"); // 不是myclass類的所有div元素列表
$("div:even"); //索引是偶數的div列表,索引從0開始
$("div:odd"); //索引是奇數的div列表,索引從0開始
$("div:eq(1)"); //索引等於1的div,索引從0開始
$("div label:gt(5):not(:last)");//div元素下,索引大於5的不包含最後一個的label列表(不包含5,索引從0開始)
$("div:lt(1)"); //索引小於1的div列表(不包含1),索引從0開始
$(":header"); //所有標題元素列表
$("div:animated"); //正在執行動畫的div元素列表
$(":focus"); //當前聚焦元素列表
過濾選擇器(內容過濾器)
$("div:contains('我')"); //含有文字“我”的div元素列表
$("div:empty"); //不含有子元素或文字的div空元素列表
$("div:has(p)"); //含有p元素的div元素列表
$("div:parent"); //含有子元素或文字的div元素列表
過濾選擇器(可見性過濾)
$("div:hidden"); //獲取所有隱藏的div列表
$("div:visible"); //獲取所有可見的div列表
過濾選擇器(屬性過濾器)
$("div[title]"); //擁有屬性title的div列表
$("div[title=test]"); //屬性title為"test"的div列表
$("div[title!=test]"); //屬性title不等於"test"或沒有title屬性的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]"); //包含屬性id,同時屬性title以"test"結束的div列表
過濾選擇器(子元素過濾器)
通過冒號前加空格實現,和基本過濾器的區別,基本過濾器冒號前沒有空格,基本過濾器對元素進行操作,獲取元素列表,此處的過濾器對父元素進行操作,獲取子元素列表
$("div :nth-child(2)"); //獲取每個div下的第2個子元素,索引從1開始
$("div :nth-child(even)"); //獲取每個div下的索引為偶數的子元素,索引從1開始
$("div :nth-child(odd)"); //獲取每個div下的索引為奇數的子元素,索引從1開始
$("div :nth-child(3n+1)"); //獲取每個div下的索引為3n+1的子元素,索引從1開始
$("div label:first-child"); //獲取每個div下的第一個label列表
$("div label:last-child"); //獲取每個div下的最後一個label列表
$("div label:only-child"); //獲取每個div下的是唯一子元素的label的列表
過濾選擇器(表單物件屬性過濾器)
$("#form1 input:enabled"); //id為form1的表單內所有可用input元素列表
$(".form1 :disabled"); //class為form1的元素內所有不可用元素列表
$(".form1:disabled"); //所有不可用的且class為form1的元素
$("input:checked"); //所有被選中的iput元素(單選框,複選框)
$("select option:selected"); //所有被選中的選項元素(下拉列表)$("select :selected");也可以
表單選擇器
$("#form1 :input"); //選取id為form1的表單的所有input,textarea,select,button元素
$("#form1 input"); //選取id為form1的表單下的input元素
$(":text"); //選取所有單行文字框,:前可以有其他過濾器
$(":password"); //選取所有密碼框
$(":radio"); //選取所有單選框
$(":checkbox"); //選取所有複選框
$(":submit"); //選取所有提交按鈕
$(":image"); //選取所有圖片按鈕
$(":reset"); //選取所有重置按鈕
$(":button"); //選取所有按鈕
$(":file"); //選取所有上傳域
$(":hidden"); //選取所有不可見元素