jquery選擇器

jQuery:對象是一個列表,可以包含很多的元素,也可以包含一個元素,所有的DOM方法,jQuery都不能使用。

DOm:對象是一個對象,並且他只能是一個對象,所有的jQuery方法,DOM都不能使用。

jQuery的功能:

1、事件處理更加方便;

2、簡化程式碼;

3、各種的動畫效果使用方便

4、使頁面更加美觀

5、自行擴展功能插件

 

簡單選擇器:語法:

1、$(“div).html(“) :添加HTML

2、$(“div”).text(“”) :添加文本

3、$(“div”).width(“”): 設置div的行內樣式的寬度

4、$(“div).height(“”):設置div的行內樣式的高度

5、$(“div”)..css(“color”,”red”):設置div的行內樣式

6、$(“div”).on(“click”,clickHandler}):給所有的div添加點擊事件偵聽

7、$(“div”).off(“click”,clickHandler):給所有的div添加刪除事件偵聽

 

進階選擇器

1、* 通配符選擇器

2、div,span 群組選擇器

3、 div span  後代選擇器

4、div>span  子代選擇器

5、div+span  緊鄰的下一個兄弟選擇器

6、div~span  div下的所有的兄弟選擇器

 

屬性選擇器:

1、$(“[type]”)  選擇有type屬性的元素

2、$(“[type][name]”) 選擇有type和name屬性的元素

3、$(“[abc=3]”)   選擇某個屬性是某個值的元素

4、$(“[hobby^=a]”) 選擇屬性是hobby並且值是以a字母開頭的元素

5、$(“[hobby$=a]”) 選擇屬性是hobby並且值是以a字母結束的元素

6、$(“[div[ hobby!=abc]]”) 選擇屬性是hobby但值不等於abc的所有元素

7、$(“[hobby|=abc]”) 選擇屬性是hobby,並且這個屬性值以abc為頭後面的緊跟著-的值

8、$(“[class~=div3]”)   獲取具有class屬性且屬性值是以空格分割的列表的元素

9、$(“[class*=div3]”)  獲取屬性是class且屬性值是div的字元串的元素

 

過濾器 :基於選擇器的基礎上,進行精細的過濾

1、$(“li:first”) 查找或選取li的第一個元素

2、$(“li:last”) 獲取li的最後一個元素

3、$(“li:not(.red)”) 選擇不是red的元素

4、$(「li:even」) 獲取索引值是偶數的所有元素,並且從0開始

5、$(「li:odd」) 獲取索引值是奇數的所有元素,並且從0開始

6、$(「li:eq(2)」)  獲取索引值是等於2的inde的元素,從0開始

7、$(“li:gt(2)”)  獲取索引值大於2 的index 的元素   從0開始

8、$(“li:lt(2)”)  獲取索引值小於2 的index 的元素   從0開始

9、$(“li:header”)  獲取標題元素:h1-h6

10、$(“:animated’) 選擇正在的執行的動畫元素

11、$(“:foucs”) 選擇當前被焦點的元素

內容過濾器

1、$(“div:contains(3)”) 查找div下的所有的文本內容元素

2、$(“‘div:empty”) 選擇沒有子元素或著位元組點的div元素

3、$(“ul:has(.red)’) 選擇子元素含有class是red的元素

4、$(“:parent”) 選擇非空元素

5、$(“:has(divs)”) 查找包含了選擇器元素的容器

6、$(“.divs”).parent()  查找當前divs元素的父容器

7、$(“.divs).parentsUntill(「html()」)  查找當前的divs元素的父元素

8、$(“:hidden” ) 隱藏的 所有不可見的元素怒,包扣display:none, 如visibility:hidden和height:0都不屬於隱藏的元素

9、$(“:visible’)  所有可顯示的元素

10、$(“$li0′).oprev(“li”)  獲取li的l0的上一=一個元素

11、$(‘#li0″).prevAll(“li”)  獲取li 的li0的上一個所有的兄弟元素

12、$(“#li0”).prevUntills(“span”) 從id是li0的元素開始向上選擇兄弟元素到span 元素為止

13、$(“#li0”).siblings(“span”) 根據id 是li0的元素所有的上下的兄弟元素中是spand 的元素