jQuery 選擇器詳解
$()函數(shù)在很多JavaScript類庫中都被作為一個選擇器函數(shù)來使用,在jQuery中就是.
$(“#id”)通過id來獲取元素,用來代替document.getElementById()函數(shù).
$(“tagName”)通過標(biāo)簽名來獲取元素,用來代替document.getElementsByTagName()函數(shù).
jQuery的基本語法是:$(selector).action(), selector即選擇器.
jQuery選擇器的分類
jQuery的選擇器基本可以分為四大類:
基本選擇器(basic)
層次選擇器(level)
過濾選擇器(filter)
表單選擇器(form)
有些類別又可以分為具體的子類別.
基本選擇器
* 匹配所有元素.示例:$(“*")選取所有元素.
#id根據(jù)給定的id匹配元素(最多只返回一個元素).示例: $("#lastname”)選取id="lastname"的元素.
.class根據(jù)給定的類名匹配元素.示例:$(".intro”)選取所有class=“intro"的元素.
element根據(jù)給定的元素名匹配元素.示例: $(“p")選取所有<p>元素.
.class.class 示例: $(".intro.demo”)選取所有且class="demo”的元素.(交集).
selector1, selector2, …, selectorN, 將每一個選擇器匹配到的元素合并后一起返回.(并集).
除了#id選擇器返回單個元素外,其他選擇器返回的都是元素集合.
這是因?yàn)镠TML規(guī)范里面id應(yīng)該是唯一的,所以重復(fù)id的元素沒有被考慮.
如果多個元素的id相同,取這個id也只能獲取第一個元素.即獲取的jQuery對象的length屬性是1.
如果要匹配的元素不存在,則都返回一個空的jQuery對象.
基本選擇器之間可以組合,用逗號分隔,結(jié)果取所有條件的結(jié)果的并集.
當(dāng)沒有用逗號分隔時,應(yīng)該是所有條件都滿足的交集.
層次選擇器
$(“ancestor descendant”) 選取ancestor元素里的所有descendant后代元素,包括直接子元素和更深嵌套的后代元素.
例:$(“div span”)選取<div>里的所有的<span>元素.
注意:選擇器都是全頁面掃描,返回一個集合,所有符合選擇條件的元素都會被包括進(jìn)去.所以多個<div>下面的<span>都會被選擇.
$(“parent>child”)選取parent元素下的child子元素,即只有直接子元素被選取.其他后代元素不包括.
例:$(“div>span”)選取<div>元素下元素名是<span>的子元素.
$(“prev+next”)選取緊接在prev元素后的next元素(同一層級).
例:$(“.one+div”)選取class為one的下一個div元素.
$(“prev+siblings”)選取prev元素之后的所有siblings元素(同一層級).
例:$(“#two~div”)選取id為two的元素后面的所有<div>兄弟元素.
等價方法:
$(“prev+next”)等價于方法$(“prev”).next(“next”);選取prev元素之后緊接著的一個next元素.
$(“prev~sublings”)等價于方法$(“prev”).nextAll(“sublings”),選取prev元素之后的所有同級的sublings元素.
而$(“prev”).sublings(“next”)方法選取與prev同輩的所有next元素,與前后位置無關(guān).
過濾選擇器
過濾選擇器這個大類又分為六個子類:
基本過濾;內(nèi)容過濾;可見性過濾;屬性過濾;子元素過濾;表單對象屬性過濾.
基本過濾
gt和lt分別是greaterthan和lessthan.
內(nèi)容過濾
可見性過濾
屬性過濾
屬性過濾是用方括號來標(biāo)識的.
注意多個屬性過濾選擇器連在一起的時候,取的是結(jié)果的交集.
子元素過濾
前面基本過濾選擇器里面index是從0算起的,這里子元素過濾選擇器的index是從1開始算起的.
表單對象屬性過濾
表單選擇器
相關(guān)文章
jQuery on()方法綁定動態(tài)元素的點(diǎn)擊事件無響應(yīng)的解決辦法
這篇文章主要介紹了jQuery on()方法綁定動態(tài)元素的點(diǎn)擊事件無響應(yīng)的解決辦法的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07jQuery在線選座位插件seat-charts特效代碼分享
這篇文章主要介紹了jQuery在線選座位插件seat-charts特效,推薦給大家,有需要的小伙伴可以參考下。2015-08-08淺談DOCTYPE對$(window).height()取值的影響
下面小編就為大家?guī)硪黄獪\談DOCTYPE對$(window).height()取值的影響。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07Jquery+ajax請求data顯示在GridView上(asp.net)
Jquery ajax請求data顯示在asp.net中GridView控件上,需要的朋友可以參考下。2010-08-08jQuery溫習(xí)篇 強(qiáng)大的JQuery選擇器
學(xué)習(xí)jQuery已經(jīng)有1年多的時間了,但是一直由于做WinForm程序開發(fā)沒有經(jīng)常實(shí)踐?,F(xiàn)在又開始重拾WebForm開發(fā)。寫幾篇jQuery系列,溫習(xí)下jQuery框架的知識。2010-04-04jquery提取元素里的純文本不包含span等里的內(nèi)容
如何實(shí)現(xiàn)提取元素里的純文本,不包含span等里的內(nèi)容,這就是本文要為大家介紹的重點(diǎn),你將學(xué)會使用jquery來實(shí)現(xiàn)2013-09-09