二 jQuery選擇器

2021-07-03 08:24:25 字數 2476 閱讀 5856

jquery選擇器的優勢:

1.簡潔的寫法

2.支援css1到css3選擇器,瀏覽器相容性好

3.完善的處理機制,使用jquery獲取網頁中不存在的元素不會報錯

注意:當要用jquery檢查某個元素在網頁上是否存在時,應該根據獲取到元素的長度來判斷或者轉化成dom物件來判斷,**如下:

if( $("#tt").length >0 )

或者if( $("#tt")[0] )

jquery選擇器的分類:

$("div span"):選取裡的所有的元素

$("div >span")選取元素下元素名是的子元素

$(".one +div")選取class為one的下乙個同輩元素,可以使用next()方法來代替

$("#two ~div")選取id為two的元素後面的所有同輩元素,可以使用nextall()方法來代替

注意:siblings()方法可以獲取所有的同輩節點,與前後位置無關,不同於$("prev~ siblings")

基本過濾、內容過濾、可見性過濾、屬性過濾、子元素過濾和表單物件屬性過濾

基本過濾選擇器:

:firsteg:$("div:first") 選取所有元素中第1個元素

:lasteg:$("div:last")選取所有元素中最後乙個元素

:not(selector)eg:$("input:not(.myclass)")選取class不是myclass的元素

:eveneg:$("input:even")選取索引是偶數的元素

:oddeg:$("input:odd")選取索引是奇數的元素

:eq(index)

:gt(index)

:lt(index)

:header選取所有的標題元素

:animated選取當前正在執行動畫的所有元素

:focus選取當前獲取焦點的元素

內容過濾選擇器:

:empty選取不包含子元素或者文字的空元素

:parent選取含有子元素或者文字的元素

:contains(text) 選取含有文字內容為「text」

:has(selector) 選取含有選取器所匹配的元素的元素

可見性過濾選擇器:

:hidden選取所有不可見的元素

:visible選取所有可見的元素

屬性過濾選擇器:

[attribute]

[attribute=value]

[attribute!=value]

[attribute^=value]

[attribute$=value]

[attribute*=value]

[attribute|=value]

[attribute~=value]

[attribute1][attribute2][attributen]

子元素過濾選擇器:

:nth-child(index/even/odd/equation)eg: :nth-child(3n+1)選取每個父元素下的索引值是(3n+1)的元素

:first-child

:last-child

:only-child

表單物件屬性過濾選擇器:

:enabled

:disabled

:checkedeg:$("input:checked")選取所有被選中的元素

:selectedeg:$("select option:selected")選取所有被選中的選項元素

表單選擇器:

:input選取所有的、、、元素

:text選取所有的單行文字框

:password選取所有的密碼框

:radio選取所有的單選框

:checkbox選取所有的多選框

:submit選取所有的提交按鈕

:image

:reset

:button

:file

:hidden

選擇器中的一些注意事項:

1.選擇器中含有「.」、「#」、「(」或「]」等特殊字元

解決方式:使用轉義符轉義

2.屬性選擇器的@符號問題

如果專案中使用了較早的jquery**和外掛程式,公升級jquery後,出現**報錯或不正常執行,很可能是因為**中使用了屬性選擇器的@符號而引起的。

3.選擇器中含有空格的注意事項

選擇器中的空格是有著特殊的意義的

關鍵點:

removeattr

:not(selector)

:has(selector)

$category.is(":visible")

find()方法

text()方法

filter()方法

removeclass()

示例:

顯示全部品牌 1

2 2

jQuery(二)選擇器

jquery選擇器 1.基本選擇器 jquery選擇器用於查詢滿足條件的元素。1.id id 選擇器,document.getelementbyid id 2.div 元素選擇器 document.getelementsbytagname div 3.myclass 類選擇器 返回所有 class ...

jQuery 選擇器(二)

過濾選擇器 過濾選擇器,就是在選擇器中通過 新增過濾條件。按照不同的過濾規則,過濾選擇器可以分為基本過濾,內容過濾,可見性過濾,屬性過濾,子元素過濾和表單物件屬性過濾選擇器。基本過濾選擇器 1.獲取第乙個input元素 var input query input first 2.獲取最後乙個inpu...

Jquery選擇器(二)

三 過濾選擇器 1.基本過濾器 1.獲取第乙個元素 索引為0 document ready function 獲取最後乙個元素 document ready function 獲取偶數項元素 document ready function 獲取基數項元素 document ready functio...