您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“jquery選擇器的類(lèi)型有哪些”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“jquery選擇器的類(lèi)型有哪些”吧!
jquery選擇器有4種類(lèi)型,分別是:1、基本選擇器,通過(guò)元素的id、class等來(lái)查找元素;2、層次選擇器,根據(jù)層次關(guān)系獲取特定元素;3、過(guò)濾選擇器,包括內(nèi)容過(guò)濾、可見(jiàn)性過(guò)濾、屬性過(guò)濾、和子元素過(guò)濾;4、表單選擇器,可以返回元素的集合。
本教程操作環(huán)境:windows10系統(tǒng)、jquery3.2.1版本、Dell G3電腦。
基本選擇器是jQuery中最常用也是最簡(jiǎn)單的選擇器,它通過(guò)元素的id、class和標(biāo)簽名等來(lái)查找DOM元素。
1、ID選擇器 #id
描述:根據(jù)給定的id匹配一個(gè)元素, 返回單個(gè)元素(注:在網(wǎng)頁(yè)中,id名稱(chēng)不能重復(fù))
示例:$("#test") 選取 id 為 test 的元素
2、類(lèi)選擇器 .class
描述:根據(jù)給定的類(lèi)名匹配元素,返回元素集合
示例:$(".test") 選取所有class為test的元素
3、元素(標(biāo)簽)選擇器 element
描述:根據(jù)給定的元素名匹配元素,返回元素集合
示例:$("p") 選取所有的<p>元素 $("div") :選取所有的div標(biāo)簽
4、*
描述:匹配所有元素,返回元素集合
示例:$("*") 選取所有的元素
5、selector1,selector2,...,selectorN(并集選擇器)
描述:將每個(gè)選擇器匹配到的元素合并后一起返回,返回合并后的元素集合
示例:$("p,span,p.myClass") 選取所有<p>,<span>和class為myClass的<p>標(biāo)簽的元素集合
層次選擇器根據(jù)層次關(guān)系獲取特定元素。
1、后代選擇器
示例:$("p span") 選取<p>元素里的所有的<span>元素(注:后代選擇器選擇父元素所有指定選擇的元素,不管是兒子級(jí),還是孫子級(jí))
2、子選擇器 $("parent>child")
示例:$("p>span") 選擇<p>元素下的所有<span>元素 (注:子選擇器只選擇直屬于父元素的子元素)
3、同輩選擇器 $("prev+next")
描述:選取緊接在prev元素后的next元素,返回元素集合
示例:$(".one+p") 選取class為one的下一個(gè)<p>同輩元素集合
4、同輩選擇器 $("prev~siblings")
描述:選取prev元素后的所有siblings元素,返回元素集合
示例:$("#two~p")選取id為two的元素后所有<p>同輩元素集合
1>基本過(guò)濾選擇器
1、 :first
描述:選取第一個(gè)元素,返回單個(gè)元素
示例:$("p:first") 選取所有<p>元素中第一個(gè)<p>元素
2、 :last
描述:選取最后一個(gè)元素,返回單個(gè)元素
示例:$("p:last") 選取所有<p>元素中最后一個(gè)<p>元素
3、 :not(selector)
描述:去除所有與給定選擇器匹配的元素,返回元素集合
示例:$("input:not(.myClass)") 選取class不是myClass的<input>元素
4、 :even
描述:選取索引是偶數(shù)的所有元素,索引從0開(kāi)始,返回元素集合
5、 :odd
描述:選取索引是奇數(shù)的所有元素,索引從0開(kāi)始,返回元素集合
6、 :eq(index)
描述:選取索引等于index的元素,索引從0開(kāi)始,返回單個(gè)元素
7、 :gt(index)
描述:選取索引大于index的元素,索引從0開(kāi)始,返回元素集合
8、 :lt(index)
描述:選取索引小于于index的元素,索引從0開(kāi)始,返回元素集合
9、 :focus
描述:選取當(dāng)前獲取焦點(diǎn)的元素
2>內(nèi)容過(guò)濾選擇器
1、:contains(text)
描述:選取含有文本內(nèi)容為text的元素,返回元素集合
示例:$("p:contains('我')") 選取含有文本“我”的元素
2、:empty
描述:選取不包含子元素或者文本元素的空元素,返回元素集合
示例:$("p:empty") 選取不包含子元素或者文本元素的空<p>元素(<p></p>)
3、:has(selector)
描述:選取含有選擇器所匹配的元素的元素,返回元素集合
示例:$("p:has(p)") 選取含有<p>元素的<p>元素(<p><p/></p>)
4、:parent
描述:選取含有子元素或者文本的元素,返回元素集合
示例:$("p:parent") 選取含有子元素或者文本元素的<p>元素(<p><p/></p>或者<p>文本</p>)
3>可見(jiàn)性過(guò)濾選擇器
1、:hidden
描述:選取所有不可見(jiàn)的元素,返回元素集合
2、:visible
描述:選取所有可見(jiàn)的元素,返回元素集合
4>屬性過(guò)濾選擇器(返回元素集合)
1、[attribute]
示例:$("p[id]") 選取擁有id屬性的p元素
2、[attribute=value]
示例:$("input[name=text]") 選取擁有name屬性等于text的input元素
3、[attribute!=value]
示例:$("input[name!=text]") 選取擁有name屬性不等于text的input元素
4、[attribute^=value]
示例:$("input[name^=text]") 選取擁有name屬性以text開(kāi)始的input元素
5、[attribute$=value]
示例:$("input[name$=text]") 選取擁有name屬性以text結(jié)束的input元素
6、[attribute*=value]
示例:$("input[name*=text]") 選取擁有name屬性含有text的input元素
7、[attribute~=value]
示例:$("input[class~=text]") 選取擁有class屬性以空格分割的值中含有text的input元素
8、[attribute1][attribute2][attributeN]
描述:合并多個(gè)屬性過(guò)濾選擇器
5>表單對(duì)象屬性過(guò)濾選擇器(返回元素集合)
1、:enabled
描述:選取所有可用元素
2、:disabled
描述:選取所有不可用元素
3、:checked
描述:選取所有被選中的元素(單選框,復(fù)選框)
示例:$("input:checked") 選取所有被選中的<input>元素
4、:selected
描述:選取所有被選中的選項(xiàng)元素(下拉列表)
示例:$("select option:selected") 選取所有被選中的選項(xiàng)元素
1、:text
描述:選擇所有的單行文本框
示例:$(":text")選取所有的單行文本框
2、:password
描述:選擇所有的密碼框
3、:button
描述:選擇所有的按鈕
4、:checkbox
描述:選擇所有的多選框
到此,相信大家對(duì)“jquery選擇器的類(lèi)型有哪些”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún),關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。