App下載

jQuery選擇器都有哪些?都有什么作用?

猿友 2020-12-18 15:19:23 瀏覽數(shù) (6113)
反饋

選擇器,就是用一種方法把你所要的元素選中。這個(gè)元素被選中了,你就能對(duì)它進(jìn)行各種操作。jQuery 選擇器和 CSS 選擇器幾乎完全一樣,當(dāng)然了,學(xué)習(xí) jQuery 之前你必須要學(xué)會(huì)CSS基礎(chǔ)教程。

在 JavaScript 中,如果你想要選取一個(gè)元素,只能使用 getElementByID( ),getElementTagName( ),getElementByClassName( ) 等方法來獲取,這些方法的功能有限,而且名字”又長又臭”,估計(jì)已經(jīng)嚇跑了不少初學(xué)的小伙伴。

相比 jQuery 的選擇器就不同了,jQuery 完全繼承了 CSS 選擇器的風(fēng)格,對(duì)我們的開發(fā)提供了極大的便利。

一. ID選擇器

QQ截圖20201218133636

二. Class選擇器

微信截圖_20201218133609

三. 元素選擇器

微信截圖_20201218133812

四. 層級(jí)選擇器

微信截圖_20201218133938

五. 全選擇器(*)

微信截圖_20201218133746

六.屬性篩選選擇器

選擇器 描述
$("[attribute|+'value']") 選擇指定屬性值等于給定字符串或以該文字串為前綴(該字符串后跟一個(gè)連字符“-”)的元素
$("[attribute|+'value']") 選擇指定屬性具有包含一個(gè)給定的子字符串的元素(選擇給定的屬性是以包含某些值的元素)
$("[attribute*+'value']") 選擇指定屬性用空格分隔的值中包含一個(gè)給定值的元素
$("[attribute~='value']") 選擇指定屬性是給定值得元素
$("[attribute='value']") 選擇不存在指定屬性,或者指定的屬性值不等于給定值的元素
$("[attribute^='value']") 選擇指定屬性是以給定字符串開始的元素
$("[attribute$='value']") 選擇指定屬性是以給定值結(jié)尾的元素,這個(gè)比較是區(qū)分大小寫的
$("[attribute]") 選擇所有具有指定屬性的元素,該屬性可以是任何職
$("[attribute$='value']") 選擇匹配所有指定的屬性篩選器的元素

七.子元素選擇器

選擇器 描述
$(":first-child") 選擇所有父級(jí)元素下的第一個(gè)子元素
$(":last-child") 選擇所有父級(jí)元素下的最后一個(gè)子元素
$(":only-child") 如果某個(gè)元素是其父元素的唯一子元素,那么它就會(huì)被選中
$(":nth-child") 選擇的他們所有父元素的第n個(gè)子元素
$(":nth-last-child") 選擇所有他們父元素的第n個(gè)子元素。計(jì)數(shù)從最后一個(gè)元素開始到第一個(gè)

八.表單元素選擇器

選擇器 描述
$(":input") 選擇所有 input,textarea,select 和 button 元素
$(":text") 匹配所有文本框
$(":password") 匹配所有密碼框
$(":radio") 匹配所有單選按鈕
$(":checkbox") 匹配所有復(fù)選框
$(":submit") 匹配所有提交按鈕
$(":image") 匹配所有圖像域
$(":reset") 匹配所有重置按鈕
$(":button") 匹配所有按鈕
$(":file") 匹配所有文本域

當(dāng)然了還有其他的選擇器,在 jQuery選擇器 中可以找到

小編找到了非常適合初學(xué)者學(xué)習(xí)的 jQuery選擇器檢測(cè)器,jQuery的樣式它應(yīng)有盡有

為了達(dá)到邊學(xué)邊練的效果,jQuery微課絕對(duì)能幫到你完整學(xué)習(xí)jQuery




0 人點(diǎn)贊