2022-12-27 分類(lèi): 網(wǎng)站建設(shè)
本教程操作環(huán)境:windows7系統(tǒng)、jquery1.10.0版本。
1.基本選擇器
#id$("#test").css("background","#bbffaa")//選取id為test的元素 element$("p");//選取所有的<p>元素 *$("*");//選取所有元素 .class$(".test");//選取類(lèi)名為test的元素 selector1,selector2$("div,p.myClass,span");//組合選擇2.層次選擇器
$("divspan")//選取<div>里所有<span>元素(所有后代元素) $("div>span")//選取<div>元素下元素名為<span>的子元素(只限于子元素) $(".one+div")//選取class為one的下一個(gè)<div>同輩元素 等價(jià)于$(".one").next("div") $("#two~div")//選取id為two的元素后面的所有<div>同輩元素 等價(jià)于$("#two").nextAll("div")3.過(guò)濾選擇器(以“:”開(kāi)頭)
1.基本過(guò)濾
2.內(nèi)容過(guò)濾
:contains(text)選取含有文本內(nèi)容為text的元素$("div:contains('我')")選取含有文本"我"的<div>元素:empty選取不包含子元素或者文本的空元素$("div:empty")選取不包含子元素(包括文本元素)的<div>空元素:has(selector)選取含有選擇器所匹配的元素的元素$("div:has(p)")選取含有<p>元素的<div>元素:parent選取還有子元素或文本的元素$("div:parent")選取擁有子元素(包括文本元素)的<div>元素3.可見(jiàn)性過(guò)濾
:hidden選取所有不可見(jiàn)元素$(:hidden)選取所有不可見(jiàn)元素包括<inputtype="hidden"><divstyle="display:none">和<divstyle="visibility:hidden">等如果只想選取<input>元素,可以使用$("input:hidden"):visible選取所有可見(jiàn)元素$(div:visible)選取所有可見(jiàn)的<div>元素例如 顯示隱藏的<div>元素$(div:hidden).show(3000)
4.屬性過(guò)濾(Jquery中的單引號(hào)和雙引號(hào)沒(méi)有區(qū)別,如果一個(gè)字符串,外面用單引號(hào)里面的雙引號(hào)就字符串了,反之,如果外面是雙引號(hào)里面的單引號(hào)就是字體串,雙引號(hào)不能組合雙引號(hào)使用 ,單引號(hào)亦然,但是平時(shí)要盡量使用單引號(hào))
[attribute]選取擁有此屬性的元素$("div[id]")選取擁有屬性id的元素[attribute=value]選取屬性值為value的元素$("div[title=test]")選取屬性title為“test”的<div>元素[attribute!=value]選取屬性的值不等于value的元素$("div[title!=test]")[attribute^=value]選取屬性的值以value開(kāi)始的元素$("div[title^=te]")選取屬性title的值以te開(kāi)始的div元素[attribute$=value]選取屬性的值以value結(jié)束的元素$("div[title$=est]")選取屬性title的值以est結(jié)束的div元素[attribute*=value]選取屬性的值含有value的元素$("div[title*=es]")選取屬性title的值含有es的div元素[attribute|=value]選取屬性等于給定字符串或以該字符串為前綴(該字符串后跟一個(gè)連字符"-")的元素$('div[title|="en"]')[attribute~=value]選取屬性用空格分隔的值中包含一個(gè)給定值的元素$('div[title~="uk"]')[attribute1][attribute2][attributeN]用屬性選擇器合并成一個(gè)復(fù)合屬性選擇器,滿(mǎn)足多個(gè)條件。每選擇一次,縮小一次范圍$("div[id][title$='test']")5.子元素過(guò)濾
:nth-child(index/evenn/odd/equation)選取每個(gè)父元素下得第index個(gè)子元素或者奇偶元素(index從1算起)解析::eq(index)只匹配一個(gè)元素,而:nth-child將為每一個(gè)父元素匹配子元素,并且:nth-child(index)的index是從1開(kāi)始的,而:eq(index)是從0開(kāi)始的:first-child選取每個(gè)父元素的個(gè)子元素集合元素解析::first只返回單個(gè)元素,而:first-child選擇符將為每個(gè)父元素匹配個(gè)子元素。例如$("ulli:first-child");選取每個(gè)<ul>中個(gè)<li>元素:last-child選取每個(gè)父元素的最后一個(gè)子元素解析::last只返回單個(gè)元素,:last-child選擇符將為每個(gè)父元素匹配最后一個(gè)子元素例如$("ulli:last-child");選擇<ul>中最后一個(gè)<li>元素:only-child如果某個(gè)元素是他父元素中的子元素,那么將會(huì)被匹配。如果父元素中含有其他元素,則不會(huì)被匹配$("ulli:only-child")在<ul>中選取是子元素的<li>元素6.表單對(duì)象屬性過(guò)濾
:enabled選取所有可用元素$("#form1:enabled")選取id為form1的表單內(nèi)所有可用元素:disabled選取所有不可用元素$("#form1:disabled"):checked選取所有被選中的元素(單選框,復(fù)選框)$("input:checked")選取所有被選中的<input>元素:selected選取所有被選中的選項(xiàng)元素(下拉列表)$("selectoption:selected")選取所有被選中的選項(xiàng)元素4.表單選擇器
:input :text :password :radio :checkbox :submit :image :reset :button :file :hidden選擇器的注意事項(xiàng)
\\為轉(zhuǎn)義字符
$(".test:hidden")帶空格表示選取class為test里的隱藏元素$(".test:hidden")不帶空格表示選取隱藏的class為test的元素以上就是jquery常用選擇器有哪些的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注html中文網(wǎng)其它相關(guān)文章!
網(wǎng)頁(yè)標(biāo)題:jQuery中的基本選擇器「簡(jiǎn)單記住」
文章路徑:http://www.rwnh.cn/news48/225848.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、定制開(kāi)發(fā)、靜態(tài)網(wǎng)站、微信小程序、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容