jQuery 查找元素操作實(shí)例小結(jié)
更新時(shí)間：2019年10月02日 11:59:30 作者：kevin.Xiang
這篇文章主要介紹了jQuery 查找元素操作,結(jié)合實(shí)例形式總結(jié)分析了jQuery針對(duì)頁(yè)面元素的各種常見(jiàn)查找操作實(shí)現(xiàn)方法,需要的朋友可以參考下
本文實(shí)例講述了jQuery 查找元素操作。分享給大家供大家參考，具體如下：
1. id
// 通過(guò)id查找
$('#id')
2. class
<div class='c1'></div>
// 通過(guò)class查找
$('.c1')
3. 標(biāo)簽、組合
<div id='i1' class='c1'> <a>x</a> </div> <div class='c1'> <div class='c2'>x</div> </div>
// 標(biāo)簽：找到所有a標(biāo)簽
$('a')
4. 層級(jí)
<div>up</div>
<div id='i10'>
<div>
<a>x</a>
</div>
<a>x</a>
<a>x</a>
</div>
<div>down</div>
// 以" "分割
// 查找指定id標(biāo)簽下的所有a標(biāo)簽
$('#i10 a')
// 以">"分割
// 查找指定id標(biāo)簽下子標(biāo)簽下的所有標(biāo)簽
$('#i10>div')
// 以"+"分割
// 查找指定id標(biāo)簽同級(jí)下的下一個(gè)div標(biāo)簽
$('#i10+div')
// 以"~"分割
// 查找指定id標(biāo)簽同級(jí)的所有div標(biāo)簽
$('#i10~div')
5. :first
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
// 獲取匹配的第一個(gè)元素
$('li:first');
// 塞選某個(gè)ID下標(biāo)簽下的第一個(gè)元素
$('#ID>標(biāo)簽:first')
6. :eq(index)
<table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>
// 匹配一個(gè)給定索引值的元素
$("tr:eq(1)")
7. :last()
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
// 獲取最后個(gè)元素
$('li:last')
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
JQuery移動(dòng)頁(yè)面開(kāi)發(fā)之屏幕方向改變與滾屏的實(shí)現(xiàn)
這篇文章主要介紹了JQuery移動(dòng)頁(yè)面開(kāi)發(fā)之隨屏幕方向改變與滾屏的實(shí)現(xiàn),通過(guò)相關(guān)兩個(gè)事件的添加來(lái)達(dá)到響應(yīng)移動(dòng)設(shè)備上操作的效果,需要的朋友可以參考下2015-12-12
在高版本的jquery引入prop方法后，什么時(shí)候該用prop？什么時(shí)候用attr？它們兩個(gè)之間有什么區(qū)別？這些問(wèn)題就出現(xiàn)了。下面這篇文章主要給大家介紹了Jquery中attr與prop區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-05-05
jQuery插件uploadify實(shí)現(xiàn)ajax效果的圖片上傳
本文主要介紹使用jQuery插件uploadify實(shí)現(xiàn)ajax效果的圖片上傳的功能，有需要的朋友可以參考一下。2016-06-06
jQuery是一個(gè)快捷簡(jiǎn)便的JavaScript框架，說(shuō)道框架可以直接理解為就是對(duì)原來(lái)底層的東西進(jìn)行了封裝使得開(kāi)發(fā)者能夠利用這個(gè)框架快速開(kāi)發(fā)。2010-11-11
基于jQuery實(shí)現(xiàn)掛號(hào)平臺(tái)首頁(yè)源碼
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)掛號(hào)平臺(tái)首頁(yè)源碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
本篇文章主要介紹了jQuery之動(dòng)畫效果，詳細(xì)的介紹了各種動(dòng)畫特效的用法，有需要的可以了解一下。2016-11-11
ztree簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
zTree 是利用 JQuery 的核心代碼，實(shí)現(xiàn)一套能完成大部分常用功能的 Tree 插件，本文給大家簡(jiǎn)單介紹下ztree的基本知識(shí)，感興趣的朋友一起看看吧2017-07-07
jQuery實(shí)現(xiàn)的手機(jī)發(fā)送驗(yàn)證碼倒計(jì)時(shí)效果代碼分享
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)手機(jī)注冊(cè)發(fā)送驗(yàn)證碼倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
JQuery.uploadify 上傳文件插件的使用詳解 for ASP.NET
今天下午整理文件上傳的例子，感覺(jué)收集到的例子都很不人性話，后來(lái)找到一個(gè)還可以的，本來(lái)想改成類似于騰訊QQ相冊(cè)那種方式，仔細(xì)看了一下是Flash的, 而且那個(gè)極速上傳插件也不知道用什么做的？問(wèn)了一下，說(shuō)是什么cgi. 搞得一頭霧水2010-01-01
jQuery通過(guò)ajax請(qǐng)求php遍歷json數(shù)組到table中的代碼(推薦)
這篇文章主要介紹了jQuery通過(guò)ajax請(qǐng)求php遍歷json數(shù)組到table中代碼(推薦)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06