JQuery元素選擇

2021-09-08 17:06:17 字數 3171 閱讀 1600

1.基本元素選擇器

$(「p」)            //

選取元素

$(「p.info」)

//選取所有class=」info」的元素

$(「p#demo」)

//選取id=」demo」的第乙個元素

分層選擇器:使用這種選擇器時,需要傳入多個值,並用空格或大於號分隔。例如:

$(「div input」)        //

選擇div下所有的input

$(「div > input」) //

選擇父元素(div)下的子元素(input)

2、基本條件選擇器

使用這種選擇器時,需要在元素的選擇符後加上基本條件運算子,這些條件運算子都是jquery內建的運算子。例如:

$(「p:first」)      //

選擇第乙個段落

$(「p:last」)

//選擇最後乙個段落

$(「tr:even」)

//選擇偶數**行

$(「tr:odd」)

//選擇奇數**行

$(「input:not(:

checked)」) //

選擇所有未被選中的元素

$(「tr:eq(

1)」) //

選擇索引值為1的**行

$(「tr:gt(

0)」) //

選擇索引值大於0的**行

$(「tr:lt(

2)」) //

選擇索引值小於2的**行

$(「:header」)

//選擇所有標題元素

$(「:animated」)

//選擇所有正在執行動畫的元素

3、內容條件選擇器

使用這種選擇器時,需要在元素的後面加上內容篩選運算子。例如: $(「div:contains(„john‟)」)   //選擇包含『john』文字的層元素

$(「td:empty」)      //

選擇不包含文字或者子元素的**單元

$(「div:has(p)」)

//選擇包含段落元素的層元素

$(「td:parent」)

//選擇包含文字或者子元素的**單元

4、可見性條件選擇器

使用這種選擇器時,需要在元素後面加上可見性條件。例如:

$(「tr:hidden」)      //

選擇所有隱藏的**行

$(「tr:visible」)

//選擇所有可見的**行

5、屬性選擇器

使用這種選擇器時,需要利用元素屬性並使用一定條件來進行選擇。例如: $(「div[id]」)      //選擇具有id屬性的層

$(「input[name=‟newletter‟]」)  //

選擇具有屬性name並且屬性值為『newletter』的表單輸入元素

$(「input[name!=‟newsletter‟]」) //

選擇具有屬性name並且屬性值不為『newletter』的表單輸入元素

$(「input[name^=‟news‟]」) //

選擇具有屬性name並且屬性值以『news』為起始內容的表單輸入內容

$(「input[name$=‟letter‟]」) //

選擇具有屬性name並且屬性值以『letter』為結束內容的表單輸入元素

$(「input[name*=‟man‟]」) //

選擇具有屬性name並且屬性值包含『man』內容的表單輸入元素

$(「input[id][name$=‟man‟]」) //

選擇具有屬性id和name並且name的值以『man』為結束內容的表單輸入內容

6、子元素選擇器

使用這種選擇器時,需要加入子元素的選擇條件。例如:

$(「ul li:nth-child(2)」)    //

選擇第2個列表項

$(「ul li:nth-child(even)」) //

選擇偶數索引列表項

$(「ul li:nth-child(odd)」) //

選擇奇數索引列表項

$(「ul li:nth-child(3n)」) //

選擇索引值為3的倍數的列表項

$(「ul li:first-child」) //

選擇第乙個列表項

$(「ul li:last-child」) //

選擇最後乙個列表項

$(「ul li:only-child」) //

選擇列表出現且僅出現乙個的列表項

7、表單元素選擇器

使用這種選擇器時,需要加入代表不同表單元素型別的標示符。例如:

$(「:input」)       //

選擇所有input,textarea,select和button元素

$(「:text」)

//選擇單行文字框

$(「:password」)

//選擇密碼框

$(「:radio」)

//選擇單選按鈕

$(「:checkbox」)

//選擇核取方塊

$(「:submit」)

//選擇提交按鈕

$(「:image」)

//選擇所有影象域

$(「:reset」)

//選擇重置按鈕

$(「:button」)

//選擇普通按鈕

$(「:file」)

//選擇檔案域

$(「:hidden」)

//選擇隱藏域

$(「input:enabled」)

//選擇所有可用元素

$(「input:disabled」)

//選擇所有不可用元素

$(「input:

checked」) //

選擇所有被選中的核取方塊和單選按鈕

$(「select option:selected」) //

選擇所有被選中的option

jQuery元素選擇

1 查詢所有符合條件的元素 find 舉例 ul find li addclass tmpexample 查詢頁面中ul元素下的所有li元素,並為查詢到的li元素增加tmpexample樣式。2 查詢指定元素的兄弟節點 siblings 舉例 li tmpcarrot slblings addcla...

JQuery選擇元素

參考 jquery基礎教程 雖然我個人覺得這本書的講解順序毫無邏輯,瞎搞 1.基於列表項的級別新增樣式 selected plays li addclass horizontal 查詢id為selected plays的元素的子元素中所有的列表項 selected plays li not hori...

jquery 選擇相鄰元素 jQuery學習

不甘於 本該如此 多選引數 值得關注 選擇器名稱 描述返回 例項 id id選擇器 根據給定的id匹配乙個元素。單個元素 box 選取id為box元素 element 元素選擇器 根據給定的元素名匹配所有元素 集合元素 span 選取所有元素 class 類選擇器 根據給定的類匹配元素。集合元素 b...