juqery 學(xué)習(xí)之三 選擇器 層級(jí) 基本
#id
返回值
Element
參數(shù)
id (String) : 用于搜索的，通過(guò)元素的 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è)選擇器的子元素
示例
匹配表單中所有的子級(jí)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實(shí)現(xiàn)下拉框功能實(shí)例代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)下拉框功能實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-05-05
jquery實(shí)現(xiàn)兼容IE8的異步上傳文件
這里給大家分享的是使用jQuery插件實(shí)現(xiàn)兼容IE8的異步上傳文件的代碼，效果非常不錯(cuò)，有需要的小伙伴可以參考下。2015-06-06
這篇文章主要介紹了JS與jQuery實(shí)現(xiàn)隔行變色的方法,結(jié)合實(shí)例形式對(duì)比分析了javascript與jQuery實(shí)現(xiàn)隔行變色的具體操作步驟與相關(guān)技巧,體驗(yàn)一下jQuery的華麗與簡(jiǎn)潔,需要的朋友可以參考下2016-09-09
JSON(JavaScript Object Notation)javscript對(duì)象標(biāo)記，是一種輕量級(jí)的數(shù)據(jù)交換格式。具體的詳細(xì)基礎(chǔ)知識(shí)可以參考JSON官網(wǎng)http:/www.json.org/。不說(shuō)太多廢話，直接說(shuō)說(shuō)我對(duì)JSON的理解吧。2014-11-11
除了購(gòu)買電影票在線選座，我們還接觸過(guò)飛機(jī)機(jī)艙選座，隨著科技的發(fā)展，之后火車、汽車都會(huì)支持在線選座，下面給大家分享基于jQuery實(shí)現(xiàn)在線選座之高鐵版，需要的朋友可以參考下2015-08-08
解決同一頁(yè)面中兩個(gè)iframe互相調(diào)用jquery,js函數(shù)的方法
本文主要介紹了解決同一頁(yè)面中兩個(gè)iframe互相調(diào)用jquery,js函數(shù)的方法，具有很好的參考價(jià)值，需要的朋友可以看下2016-12-12
詳解jQuery中關(guān)于Ajax的幾個(gè)常用的函數(shù)
AJAX 是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)。下面通過(guò)本文給大家分享jQuery中關(guān)于Ajax的幾個(gè)常用的函數(shù)，需要的的朋友參考下2017-07-07
這篇文章主要介紹了jQuery的基本概念與高級(jí)編程的簡(jiǎn)單介紹，有需要的小伙伴可以參考下。2015-05-05
下面小編就為大家?guī)?lái)一篇淺談jquery中使用canvas的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
jquery.cookie.js實(shí)現(xiàn)用戶登錄保存密碼功能的方法
這篇文章主要介紹了jquery.cookie.js實(shí)現(xiàn)用戶登錄保存密碼功能的方法,結(jié)合實(shí)例形式詳細(xì)分析了jquery.cookie.js插件操作cookie實(shí)現(xiàn)保存用戶登錄信息的相關(guān)技巧,需要的朋友可以參考下2016-04-04