溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JQ筆記之選擇器

發(fā)布時間:2020-07-30 03:59:44 來源:網(wǎng)絡(luò) 閱讀:339 作者:張方成 欄目:web開發(fā)

JQ有一段時間了,今天對JQ的一些知識進行一些總結(jié)。

首先在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選擇所有正在執(zhí)行動畫的元素

       :eq(index)在匹配集合中選擇索引為index的元素。(index為正數(shù)從0開始計數(shù),負數(shù)從最后一個開始計數(shù))

       :even選擇索引為偶數(shù)的元素,從0開始計數(shù)。

       :odd選擇索引為奇數(shù)的元素,從0開始計數(shù)。

       :first選擇第一個匹配的元素。

       :gt選擇匹配集合中所有大于給定index的元素。若index為負數(shù),從最后一個元素開始反向計數(shù)。從0開始的索引值。

       :lt選擇匹配集合中所有小于給定index的元素。若index為負數(shù),從最后一個元素開始反向計數(shù)。

       :header選擇所有標題元素。

       :lang選擇指定語言的所有元素。例如:$(“div:lang(en)”)將匹配<div lang=”en”><div lang=”en-us”>

       :last選擇最后一個匹配的元素。

       :not(selector)選擇所有元素,去除不匹配給定的選擇器的元素。

       :root選擇該文檔的根元素,在HTML中,永遠是<html>元素。

       :target選擇由文檔URI的格式化識別碼表示的目標元素。

4、內(nèi)容篩選

       :contains(text)選擇所有包含指定文本的元素。Text中的文本是區(qū)分大小寫的。

       :empty選擇所有沒有子元素的元素(包括文本節(jié)點)。

       :has()例如:$(“div:has(p)”)匹配一個<div>,那么應(yīng)該有一個<p>存在于<div>后代元素的任何地方,不是直接的子元素也可以。

注意:因為:has()是一個JQ延伸出來的一個選擇器。并且不是CSS規(guī)范的一部分,使用:has()查詢不能充分利用原生DOM提供的querySelectorAll()方法來提高性能。

       :parent選擇所有含有子元素或文本的父級元素。

5、可見性篩選

       :hidden選擇所有隱藏的元素。例如:$(“div:hidden”)

       :visible選擇所有可見的元素。(在文檔中占據(jù)一定空間,被認為是可見的)

元素可以被認為是隱藏的幾個情況:

他們的CSS display值為none;

他們是type=’hidden’的表單元素;

元素的寬和高都顯示的設(shè)置為0;

一個祖先元素是隱藏的,因此自身不會在頁面上顯示。

元素visibility:hiddenopacity:0被認為是可見的,因為他們還占據(jù)空間。

6、屬性

       [attribute|=value]選擇指定元素值等于給定字符串或該字符串前綴的元素。

       [arrribute*=value]選擇指定屬性具有包含一個給定子字符串的元素。

       [attribute~=value]選擇指定屬性用空格分隔的值中包含一個給定元素值得元素。

       [attribute$=value]選擇指定屬性是以給定值結(jié)尾的元素。區(qū)分大小寫。

       [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個子元素。從一開始計數(shù)。

       :nth-last-child(n)選擇他們所有父元素的第n個子元素。從最后一個開始計數(shù)到第一個。

       :nth-last-of-type(n)選擇他們所有父元素的第n個子元素。從最后一個開始計數(shù)到第一個。

       :nth-of-type選擇同屬于一個父元素之下,并且標簽名相同的子元素中的第n個。

       :only-child如果某個元素是其父元素唯一的子元素,那么他就會被選中。

       :nth-of-type如果父元素有相同的元素名稱的其他子元素,那么沒有元素會被匹配。

8、表單

       :button匹配所有按鈕和類型為按鈕的元素。

       :checkbox選擇類型為復(fù)選框的元素。

       :checked選擇所有勾選的元素。

       :disabled選擇所有被禁用的元素。

       :enabled選擇未被禁用的元素。

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

       :file選擇文件類型為file的元素。

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

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

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

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

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

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

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

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


向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI