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