juqery 學(xué)習(xí)之三 選擇器 層級 基本
#id
返回值
Element
參數(shù)
id (String) : 用于搜索的，通過元素的 id 屬性中給定的值
示例
查找 ID 為"myDiv"的元素。
HTML 代碼:
<div id="myDiv">id="myDiv"</div>
jQuery 代碼:
結(jié)果:
---------------------------------------------------------------------------------------
element
返回值
Array<Element>
參數(shù)
element (String) : 一個(gè)用于搜索的元素。指向 DOM 節(jié)點(diǎn)的標(biāo)簽名。
示例
查找一個(gè) DIV 元素。
HTML 代碼:
<div>DIV2</div>
<span>SPAN</span>
jQuery 代碼:
結(jié)果:
.class
返回值
Array<Element>
參數(shù)
class (String) : 一個(gè)用以搜索的類。一個(gè)元素可以有多個(gè)類，只要有一個(gè)符合就能被匹配到。
示例
查找所有類是 "myClass" 的元素.
HTML 代碼:
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery 代碼:
結(jié)果:
---------------------------------------------------------------------------------------
*
返回值
Array<Element>
示例
找到每一個(gè)元素
HTML 代碼:
<span>SPAN</span>
<p>P</p>
jQuery 代碼:
結(jié)果:
---------------------------------------------------------------------------------------
selector1,selector2,selectorN
返回值
Array<Element>
參數(shù)
selector1 (Selector) : 一個(gè)有效的選擇器
selector2 (Selector) : 另一個(gè)有效的選擇器
selectorN (Selector) : (可選) 任意多個(gè)有效選擇器
示例
找到匹配任意一個(gè)類的元素。
HTML 代碼:
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
jQuery 代碼:
結(jié)果:
ancestor descendant
返回值
Array<Element>
參數(shù)
ancestor (Selector) : 任何有效選擇器
descendant (Selector) : 用以匹配元素的選擇器，并且它是第一個(gè)選擇器的后代元素
示例
找到表單中所有的 input 元素
HTML 代碼:
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代碼:
結(jié)果:
---------------------------------------------------------------------------------------
parent > child
返回值
Array<Element>
參數(shù)
parent (Selector) : 任何有效選擇器
child (Selector) : 用以匹配元素的選擇器，并且它是第一個(gè)選擇器的子元素
示例
匹配表單中所有的子級input元素。
HTML 代碼:
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代碼:
結(jié)果:
---------------------------------------------------------------------------------------
prev + next
返回值
Array<Element>
參數(shù)
prev (Selector) : 任何有效選擇器
next (Selector) :一個(gè)有效選擇器并且緊接著第一個(gè)選擇器
示例
匹配所有跟在 label 后面的 input 元素
HTML 代碼:
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代碼:
結(jié)果:
---------------------------------------------------------------------------------------
prev ~ siblings
返回值
Array<Element>
參數(shù)
prev (Selector) : 任何有效選擇器
siblings (Selector) : 一個(gè)選擇器，并且它作為第一個(gè)選擇器的同輩
示例
找到所有與表單同輩的 input 元素
HTML 代碼:
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代碼:
結(jié)果:
相關(guān)文章
jQuery的事件模塊是較復(fù)雜的，前面僅僅提到了對事件對象的包裝。即統(tǒng)一了一些兼容性的問題。這篇會(huì)綜述下jQuery的整個(gè)事件模塊。2011-06-06
jQuery基于擴(kuò)展實(shí)現(xiàn)的倒計(jì)時(shí)效果
這篇文章主要介紹了jQuery基于擴(kuò)展實(shí)現(xiàn)的倒計(jì)時(shí)效果,涉及jQuery擴(kuò)展的使用與時(shí)間操作的相關(guān)技巧,需要的朋友可以參考下2016-05-05
上次用javascript實(shí)現(xiàn)了上色表格,見<JS實(shí)現(xiàn)雙色表格>。但通過jQuery強(qiáng)大的選擇器可更加簡潔，優(yōu)雅的實(shí)現(xiàn)。2009-12-12
基于jquery實(shí)現(xiàn)的定時(shí)顯示與隱藏div廣告的實(shí)現(xiàn)代碼
有時(shí)候我們需要在jquery中要顯示與隱藏層，很簡單的方法就是直接使用hide與show方法就可以了，但要定時(shí)我們需要結(jié)合setTimeout函數(shù)來實(shí)現(xiàn)2013-08-08
這篇文章主要介紹了Jquery Ajax方法傳值到action的方法,需要的朋友可以參考下2014-05-05
為什么會(huì)出現(xiàn)在IE無效化呢，從上面的解決方案可以知道是XML文件的編碼問題，在轉(zhuǎn)化會(huì)前臺(tái)可讀時(shí)并未符合IE的XML 對象，故需要翻譯成IE兼容的對象。2009-10-10
jQuery 利用ztree實(shí)現(xiàn)樹形表格的實(shí)例代碼
最近公司要做一個(gè)樹形表格，由于之前對ztree實(shí)現(xiàn)基本的樹形結(jié)構(gòu)，所以想到用ztree來做，下面小編給大家分享實(shí)現(xiàn)代碼，感興趣的朋友一起看看吧2017-09-09
jQuery實(shí)現(xiàn)單擊按鈕遮罩彈出對話框效果(1)
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)單擊按鈕遮罩彈出對話框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
刪除HTML元素可以使用remove及empty，下面有關(guān)這兩個(gè)方法的使用將以示例的方式為大家介紹下2014-08-08
jquery實(shí)現(xiàn)走馬燈特效實(shí)例(撲克牌切換效果）
本文主要介紹了jquery實(shí)現(xiàn)走馬燈特效實(shí)例(撲克牌切換效果），文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02