jquery選擇器
- 2020 年 5 月 3 日
- 筆記
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 的元素