您好,登錄后才能下訂單哦!
用JQ有一段時間了,今天對JQ的一些知識進行一些總結。
首先在JQ中分為幾大模塊:選擇器,屬性/CSS,操作,遍歷,事件,效果,Ajax,還有核心。
一、選擇器
1、基本選擇器
.class 用法$(“.class”)
element 用法 $(“element”)
#id 用法 $(“#id”)
Selector1,selectorN 用法 $(“Selector1,selectorN”)
2、層級選擇器
parent> child 用法$(“parent> child”)
E>F元素組合器和E F 都作為后代組合,但他們有所不同,更具體的是E>F只會選擇第一級的后代。
prev+next選擇所有緊跟在prev后的next元素
prev ~ siblings 匹配prev后的所有兄弟元素,具有相同的父元素,并匹配過濾siblings選擇器。
3、基本篩選
:animated選擇所有正在執行動畫的元素
:eq(index)在匹配集合中選擇索引為index的元素。(index為正數從0開始計數,負數從最后一個開始計數)
:even選擇索引為偶數的元素,從0開始計數。
:odd選擇索引為奇數的元素,從0開始計數。
:first選擇第一個匹配的元素。
:gt選擇匹配集合中所有大于給定index的元素。若index為負數,從最后一個元素開始反向計數。從0開始的索引值。
:lt選擇匹配集合中所有小于給定index的元素。若index為負數,從最后一個元素開始反向計數。
:header選擇所有標題元素。
:lang選擇指定語言的所有元素。例如:$(“div:lang(en)”)將匹配<div lang=”en”>和<div lang=”en-us”>
:last選擇最后一個匹配的元素。
:not(selector)選擇所有元素,去除不匹配給定的選擇器的元素。
:root選擇該文檔的根元素,在HTML中,永遠是<html>元素。
:target選擇由文檔URI的格式化識別碼表示的目標元素。
4、內容篩選
:contains(text)選擇所有包含指定文本的元素。Text中的文本是區分大小寫的。
:empty選擇所有沒有子元素的元素(包括文本節點)。
:has()例如:$(“div:has(p)”)匹配一個<div>,那么應該有一個<p>存在于<div>后代元素的任何地方,不是直接的子元素也可以。
注意:因為:has()是一個JQ延伸出來的一個選擇器。并且不是CSS規范的一部分,使用:has()查詢不能充分利用原生DOM提供的querySelectorAll()方法來提高性能。
:parent選擇所有含有子元素或文本的父級元素。
5、可見性篩選
:hidden選擇所有隱藏的元素。例如:$(“div:hidden”)
:visible選擇所有可見的元素。(在文檔中占據一定空間,被認為是可見的)
元素可以被認為是隱藏的幾個情況:
他們的CSS display值為none;
他們是type=’hidden’的表單元素;
元素的寬和高都顯示的設置為0;
一個祖先元素是隱藏的,因此自身不會在頁面上顯示。
元素visibility:hidden或opacity:0被認為是可見的,因為他們還占據空間。
6、屬性
[attribute|=value]選擇指定元素值等于給定字符串或該字符串前綴的元素。
[arrribute*=value]選擇指定屬性具有包含一個給定子字符串的元素。
[attribute~=value]選擇指定屬性用空格分隔的值中包含一個給定元素值得元素。
[attribute$=value]選擇指定屬性是以給定值結尾的元素。區分大小寫。
[attribute=value]選擇指定屬性等于給定值的元素。
[attribute!=value]選擇不存在指定屬性,或指定屬性不等于給定值的元素。等同于:not([attr=value])
[attribute^=value]選擇指定屬性以給定字符串開始的元素。
[attribute] 選擇所有指定元素,屬性可以是任何值。
[ ][ ] 多條件屬性查詢。
7、子元素篩選
:first-child選擇所有父級元素下第一個子元素。相當于:nth-child(1)
:last-child 選擇所有父級元素下最后一個子元素。
:first-of-type選擇所有相同元素名稱的第一個兄弟元素。
:last -of-type 選擇所有相同元素名稱的最后一個兄弟元素。
:nth-child(n)選擇他們所有父元素的第n個子元素。從一開始計數。
:nth-last-child(n)選擇他們所有父元素的第n個子元素。從最后一個開始計數到第一個。
:nth-last-of-type(n)選擇他們所有父元素的第n個子元素。從最后一個開始計數到第一個。
:nth-of-type選擇同屬于一個父元素之下,并且標簽名相同的子元素中的第n個。
:only-child如果某個元素是其父元素唯一的子元素,那么他就會被選中。
:nth-of-type如果父元素有相同的元素名稱的其他子元素,那么沒有元素會被匹配。
8、表單
:button匹配所有按鈕和類型為按鈕的元素。
:checkbox選擇類型為復選框的元素。
:checked選擇所有勾選的元素。
:disabled選擇所有被禁用的元素。
:enabled選擇未被禁用的元素。
:focus選擇當前獲取焦點的元素。
:file選擇文件類型為file的元素。
:p_w_picpath選擇所有圖像類型的元素。
:input選擇所有inputtextarea select button 元素。
:password選擇所有類型為密碼的元素。
:radio選擇所有類型為單選框的元素。
:reset選擇類型為重置的元素。等價于[type=’reset’]
:select獲取select元素中所有被選中的元素。
:submit選擇所有類型為提交的元素。
:text選擇所有類型為文本的元素。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。