（JQuery學(xué)習(xí)筆記）我對jQuery選擇器的總結(jié)-創(chuàng)新互聯(lián)

jquery選擇器與css選擇器的風(fēng)格類似，但是jquery涉及到的功能更為強大，利用jquery選擇器，可以很快的找出特定的DOM元素，并且對其進行操作，無需擔(dān)心瀏覽器是否支持這一選擇器。

站在用戶的角度思考問題，與客戶深入溝通，找到站前網(wǎng)站設(shè)計與站前網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設(shè)計、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名注冊、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋站前地區(qū)。

    根據(jù)選擇器行為特點劃分，jquery選擇器主要有以下幾種分類：

    （1）基本選擇器

    （2）層次選擇器

    （3）過濾選擇器

    （4）表單選擇器

1.基本選擇器

  特點：最常用、最簡單。

選擇器描述返回示例
＃id（id選擇器）根據(jù)給定的id匹配一個元素單個元素$("#test")選擇id為test的元素
.class（類選擇器）根據(jù)給定的class名稱匹配多個元素集合元素$(".test")選擇類名為test的所有元素
element（元素選擇器）根據(jù)給定的元素名匹配多個元素集合元素$("div")選擇所有<div>元素
＊（全部選擇器）
匹配所有元素集合元素$("*")選擇所有元素
sele1,sele2,seleN有效選擇器將每一個選擇器匹配到的元素合并后一起返回集合元素$("div,p.test")選擇所有的<div>和擁有class為test的<p>元素合并的集合

    注：在網(wǎng)頁中，每個id名稱只能使用一次，class名稱可重復(fù)使用。

2.層次選擇器

    特點：利用DOM元素間的層次關(guān)系。

選擇器描述返回示例
$("a b") 后代選擇器選擇a元素中所有的b（后代）元素集合元素$("div span")選擇<div>后代元素中的所有的<span>元素
$("parent>child") 子選擇器選擇parent元素下的child（子）元素。集合元素$("div>span")選擇<div>下的所有<span>子元素
$("prev+next")相鄰?fù)呍剡x擇器選擇緊接在prev元素后的next元素單個元素$(".test+p")選擇緊接在class為test的元素后的第一個<p>同輩元素
$("prev~siblings")一般同輩元素選擇器選擇器prev元素后的所有同輩元素集合元素$("#test~div")選擇id為test的元素后面的所有<div>同輩元素

    注：

    （1）子選擇器與后代選擇器的區(qū)別：后代選擇器包括孫元素。

<body>
    <div>
        <p>
            <span></span>
        </p>
      <span></span>
      <span></span>
    </div>
</body>

如代碼所示，當(dāng)我們使用$("div span")后代元素選擇器時，可以匹配到<div>中后代為<span>的元素，所以匹配結(jié)果為3個；當(dāng)我們使用$("div>span")子元素選擇器時，可以匹配到<div>中子元素為<span>的元素，所以匹配結(jié)果為2個（因為p標(biāo)簽中的span元素不是div的子元素）。

    （2）可以用next()方法代替$("prev+next")選擇器；用nextAll()方法代替$("prev~siblings")選擇器。同時，有一個方法可選擇所有的同輩節(jié)點元素，即siblings()方法。

3.過濾選擇器

    特點：通過過濾規(guī)則選擇所需的DOM元素。按照不同的過濾規(guī)則，過濾選擇器可分為：基本過濾、內(nèi)容過濾、可見性過濾、屬性過濾、子元素過濾、表單對象屬性過濾。

基本過濾選擇器

選擇器描述返回示例
:first選擇第一個元素單個元素$("div:first")選擇所有<div>元素中第1個<div>元素
:last選擇最后一個元素單個元素同上反推
:not(selector)去除所有與給定選擇器匹配的元素集合元素$("div:not(.test)")選擇class不是test的div元素
:even從一個元素集合中選擇索引是偶數(shù)的所有元素集合元素$("div:even")選擇索引是偶數(shù)的div元素
:odd從一個元素集合中選擇索引是奇數(shù)的所有元素集合元素同上原理
:eq(index)
從一個元素集合中選擇索引等于index的元素單個元素$("div:eq(1)")選擇索引等于1的<div>元素
:gt(index)從一個元素集合中選擇索引大于index的元素集合元素$("div:gt(1)")選擇索引大于1的<div>元素
:lt(index)從一個元素集合中選擇索引小于index的元素集合元素同上反推
:header選擇所有的標(biāo)題元素集合元素$(":header")選擇網(wǎng)頁中所有的<h2>,<h3>...元素

:animated選擇當(dāng)前正在執(zhí)行動畫的所有元素集合元素$("div:animated")選擇正在執(zhí)行動畫的<div>元素
:focus選擇當(dāng)前獲取焦點的元素集合元素$("focus")選擇當(dāng)前獲取焦點的元素

內(nèi)容過濾選擇器

選擇器描述返回示例
:contains(text)選取含有文本內(nèi)容為"text"的元素集合元素$("div:contains('test')")選擇含有文本test的<div>元素
:empty選取不包含子元素或者文本的元素（即空元素）集合元素$("div:empty")選取不包含子元素的<div>元素
:has(selector)選取含有選擇器所匹配的元素的元素集合元素$("div:has(p)")選取含有<p>元素的<div>元素
:parent選擇擁有子元素（包括文本）的元素集合元素$("div:parent")選擇含有子元素的<div>元素

內(nèi)容過濾選擇器的過濾規(guī)則主要以標(biāo)簽所包含的子元素來進行篩選過濾，其中子元素也包括了文本信息。

可見性過濾選擇器

選擇器描述返回示例
:hidden選擇所有不可見的元素集合元素$(":hidden")
:visible選擇所有可見的元素集合元素$("visible")

隱藏元素包括：<input type="hidden"/>、<div >、<div >，如果需要確定元素類型，在前方加上元素名即可。例如，$("input:hidden")。

屬性過濾選擇器

選擇器描述返回示例
[attribute]選擇擁有此屬性的元素集合元素$("div[id]")選擇擁有屬性id的元素
[attribute=value]選擇屬性的值為value的元素集合元素$("div[class=test]")選擇屬性class為“test”的<div>元素
[attribute!=value]選擇屬性的值不等于value的元素集合元素同上反推
[attribute^=value]選擇屬性的值以value開始的元素集合元素$("div[class=te]")將選擇到例如class為"test"的<div>元素
[attribute$=value]選擇屬性的值以value結(jié)束的元素集合元素同上反推
[attribute*=value]選擇屬性的值含有value的元素集合元素$("div[class=es]")將選擇到例如class為"test"的<div>元素
[attribute|=value]選擇屬性等于給定字符串或以該字符串為前綴集合元素
$("div[class|='te']")選擇屬性title等于te或者以te為前綴的元素
[attribute~=value]選擇屬性用空格分隔的值中包含一個給定值的元素集合元素$("div[class~='te']")將選擇到例如class為"te abc"的<div>元素
[attribute1]...[attributeN]多個屬性選擇器合并成一個復(fù)合屬性選擇器集合元素$("div[id][title$='test']")選擇同時擁有id，并且title以test結(jié)束的<div>元素

屬性過濾選擇器主要是通過元素的屬性來獲取相應(yīng)的元素。

子元素過濾選擇器

選擇器描述返回示例
:nth-child(index/odd/even/equation)選擇每個父元素下的第index個子元素或者奇偶元素(index)從1開始計算集合元素$("div.test :nth-child(2)")選擇class為"test"的<div>父元素下的第二個子元素
:first-child選擇每個父元素的第一個子元素集合元素$("ul:first-child")將選擇每個<ul>元素中第一個<li>元素
:last-child選擇每個父元素的最后一個子元素集合元素同上反推
:only-child如果某個元素是它父元素中唯一的子元素，那將會被匹配集合元素$("ul li:only-child")在<ul>中選擇唯一子元素<li>

需要注意的是，“每個父元素”與“父元素”的區(qū)別，前者是多個元素的集合，后者是單個元素。:nth-child(3n)可以選擇到每個父元素下索引值是3的倍數(shù)的元素。

表單對象屬性過濾選擇器

選擇器描述返回示例
:enabled選擇所有可用元素集合元素$("#form :enabled")選擇id為form的表單內(nèi)的所有可用元素
:disabled選擇所有不可用元素集合元素同上反推
:checked選擇所有被選中的元素集合元素$("input:checked")選擇所有被選中的<input>元素
:selected選擇所有被選中的選項元素集合元素$("select option:selected")

表單對象屬性過濾選擇器主要是針對表單元素進行過濾。

4.表單選擇器

選擇器描述返回示例
:input選擇所有的<input>、<textarea>、<select>、<button>元素集合元素$(":input")
:text選擇所有的單行文本框集合元素$(":text")
:password選擇所有的密碼框集合元素$(":password")
:radio選擇所有的單選框集合元素$(":radio")
:checkbox選擇所有的復(fù)選框集合元素$(":checkbox")
:submit選擇所有的提交按鈕集合元素$(":submit")
:p_w_picpath選擇所有的圖像按鈕集合元素$(":p_w_picpath")
:reset選擇所有的重置按鈕集合元素$("reset")
:button選擇所有按鈕集合元素$("button")

:file選擇所有的上傳域集合元素$("file")

表單選擇器能使我們能夠方便的獲取到表單的某個或某類型的元素。

本文參考：

    《鋒利的jQuery（第2版）》，人民郵電出版社，單東林 張曉菲 魏然

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章名稱：（JQuery學(xué)習(xí)筆記）我對jQuery選擇器的總結(jié)-創(chuàng)新互聯(lián)
分享鏈接：http://muchs.cn/article28/dpppcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、Google、商城網(wǎng)站、網(wǎng)站維護、用戶體驗、ChatGPT

廣告

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

成都seo排名網(wǎng)站優(yōu)化