jQuery中的基本選擇器「簡單記住」

2022-12-27    分類： 網(wǎng)站建設(shè)

本教程操作環(huán)境：windows7系統(tǒng)、jquery1.10.0版本。

1.基本選擇器

#id$（"#test").css("background","#bbffaa")//選取id為test的元素 element$("p");//選取所有的

元素 *$("*");//選取所有元素 .class$(".test");//選取類名為test的元素 selector1,selector2$("div,p.myClass,span");//組合選擇

2.層次選擇器

$("divspan")//選取
里所有元素（所有后代元素） $("div>span")//選取
元素下元素名為的子元素（只限于子元素） $(".one+div")//選取class為one的下一個
同輩元素 等價(jià)于$(".one").next("div") $("#two~div")//選取id為two的元素后面的所有
同輩元素 等價(jià)于$("#two").nextAll("div")

3.過濾選擇器（以“：”開頭）
1.基本過濾

:first選取個元素:$("div:first")選區(qū)所有
元素中個
元素:last選取最后一個元素$("div:last"):not(selector)去除所有給定選擇器匹配的元素$("input:not(.myClass)")選取class不是myClass的元素:even選取索引數(shù)是偶數(shù)的元素索引從0開始$("div:even"):odd選取索引數(shù)是奇數(shù)的元素索引從0開始$("div:odd"):eq(index)選取索引數(shù)等于index的元素$("div:eq(2)"):gt(index)選取索引數(shù)大于index的元素$("div:gt(2)"):lt(index)選取索引數(shù)小于index的元素$("div:lt(2)"):header選取所有標(biāo)題元素

..

$(":header"):animated選取所有當(dāng)前正在執(zhí)行動畫的的所有元素$("div:animated")選取正在執(zhí)行動畫的
元素:focus選取當(dāng)前獲得焦點(diǎn)的元素$(":focus")

2.內(nèi)容過濾

:contains(text)選取含有文本內(nèi)容為text的元素$("div:contains('我')")選取含有文本"我"的
元素:empty選取不包含子元素或者文本的空元素$("div:empty")選取不包含子元素（包括文本元素）的
空元素:has(selector)選取含有選擇器所匹配的元素的元素$("div:has(p)")選取含有

元素的

元素:parent選取還有子元素或文本的元素$("div:parent")選取擁有子元素（包括文本元素）的
元素

3.可見性過濾

:hidden選取所有不可見元素$(:hidden)選取所有不可見元素包括和等如果只想選取元素，可以使用$("input:hidden"):visible選取所有可見元素$(div:visible)選取所有可見的
元素

例如 顯示隱藏的

元素$(div:hidden).show(3000)

4.屬性過濾（Jquery中的單引號和雙引號沒有區(qū)別，如果一個字符串，外面用單引號里面的雙引號就字符串了，反之，如果外面是雙引號里面的單引號就是字體串,雙引號不能組合雙引號使用 ，單引號亦然，但是平時要盡量使用單引號）

[attribute]選取擁有此屬性的元素$("div[id]")選取擁有屬性id的元素[attribute=value]選取屬性值為value的元素$("div[title=test]")選取屬性title為“test”的
元素[attribute!=value]選取屬性的值不等于value的元素$("div[title!=test]")[attribute^=value]選取屬性的值以value開始的元素$("div[title^=te]")選取屬性title的值以te開始的div元素[attribute$=value]選取屬性的值以value結(jié)束的元素$("div[title$=est]")選取屬性title的值以est結(jié)束的div元素[attribute*=value]選取屬性的值含有value的元素$("div[title*=es]")選取屬性title的值含有es的div元素[attribute|=value]選取屬性等于給定字符串或以該字符串為前綴（該字符串后跟一個連字符"-"）的元素$('div[title|="en"]')[attribute~=value]選取屬性用空格分隔的值中包含一個給定值的元素$('div[title~="uk"]')[attribute1][attribute2][attributeN]用屬性選擇器合并成一個復(fù)合屬性選擇器，滿足多個條件。每選擇一次，縮小一次范圍$("div[id][title$='test']")

5.子元素過濾

:nth-child(index/evenn/odd/equation)選取每個父元素下得第index個子元素或者奇偶元素（index從1算起）解析：:eq(index)只匹配一個元素，而:nth-child將為每一個父元素匹配子元素，并且:nth-child(index)的index是從1開始的，而:eq(index)是從0開始的:first-child選取每個父元素的個子元素集合元素解析：:first只返回單個元素，而:first-child選擇符將為每個父元素匹配個子元素。例如$("ulli:first-child");選取每個
    中個
  • 元素:last-child選取每個父元素的最后一個子元素解析：:last只返回單個元素，:last-child選擇符將為每個父元素匹配最后一個子元素例如$("ulli:last-child")；選擇
      中最后一個
    • 元素:only-child如果某個元素是他父元素中的子元素，那么將會被匹配。如果父元素中含有其他元素，則不會被匹配$("ulli:only-child")在
        中選取是子元素的
      • 元素

        6.表單對象屬性過濾

        :enabled選取所有可用元素$("#form1:enabled")選取id為form1的表單內(nèi)所有可用元素:disabled選取所有不可用元素$("#form1:disabled"):checked選取所有被選中的元素（單選框，復(fù)選框）$("input:checked")選取所有被選中的元素: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)容，更多請關(guān)注html中文網(wǎng)其它相關(guān)文章！

        本文題目：jQuery中的基本選擇器「簡單記住」
        文章來源：http://muchs.cn/news/225848.html

        成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、微信公眾號、網(wǎng)頁設(shè)計(jì)公司、虛擬主機(jī)、用戶體驗(yàn)、網(wǎng)站營銷

        廣告

        聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)