JQ筆記之選擇器

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:hiddenopacity: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的元素。

       :image選擇所有圖像類型的元素。

       :input選擇所有inputtextarea select button 元素。

       :password選擇所有類型爲密碼的元素。

       :radio選擇所有類型爲單選框的元素。

       :reset選擇類型爲重置的元素。等價於[type=’reset’]

       :select獲取select元素中所有被選中的元素。

       :submit選擇所有類型爲提交的元素。

       :text選擇所有類型爲文本的元素。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章