JQuery 選擇和過(guò)濾方法代碼總結(jié)
1、查找所有符合條件的元素 find()
舉例: $('ul').find('li').addClass('tmpExample');
查找頁(yè)面中ul元素下的所有l(wèi)i元素,并為查找到的li元素增加tmpExample樣式。
2、查找指定元素的兄弟節(jié)點(diǎn) siblings()
舉例:$('li#tmpCarrot').slblings().addClass('tmpExample');
查找ID為tmpCarrot的li元素所有的兄弟節(jié)點(diǎn),并為查找到的兄弟節(jié)點(diǎn)增加tmpExample樣式。
可以在slblings()的括號(hào)中添加選擇器來(lái)查找指定條件的兄弟節(jié)點(diǎn)。如:slblings('.tmpClass'),就是查找類(lèi)
為tmpClass的兄弟節(jié)點(diǎn)。
3、查找指定節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn) next()
舉例:$('li#tmpBroccoli').next().addClass('tmpExample');
查找ID為tmpBroccoli的li節(jié)點(diǎn)的下一兄弟節(jié)點(diǎn)。并為查找到的兄弟節(jié)點(diǎn)增加tmpExample樣式。
4、查找指定節(jié)點(diǎn)的后面的所有兄弟節(jié)點(diǎn) next()
舉例:$('li#tmpBroccoli').nextAll().addClass('tmpExample');
查找ID為tmpBroccoli的li節(jié)點(diǎn)后面的所有兄弟節(jié)點(diǎn)。并為查找到的兄弟節(jié)點(diǎn)增加tmpExample樣式。
5、查找指定節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn) prev()
舉例:$('li#tmpBroccoli').prev().addClass('tmpExample');
查找ID為tmpBroccoli的li節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)。并為查找到的兄弟節(jié)點(diǎn)增加tmpExample樣式。
6、查找指定節(jié)點(diǎn)的前面所有的兄弟節(jié)點(diǎn) prevAll()
舉例:$('li#tmpBroccoli').prevAll().addClass('tmpExample');
查找ID為tmpBroccoli的li節(jié)點(diǎn)的前面所有的兄弟節(jié)點(diǎn)。并為查找到的兄弟節(jié)點(diǎn)增加tmpExample樣式。
可以在prevAll()的括號(hào)中添加選擇器來(lái)查找指定條件的兄弟節(jié)點(diǎn)。如:prevAll('li.tmpClass'),就是查找當(dāng)
前節(jié)點(diǎn)前面所有類(lèi)為tmClass的兄弟節(jié)點(diǎn)。
7、查找所有符合條件的上級(jí)節(jié)點(diǎn) parents()
舉例:$('li#tmpCarrot').parents('div#tmpSelection').addClass('tmpExample');
查找ID為tmpCarrot的li節(jié)點(diǎn)所有id為tmpSelection的div上級(jí)節(jié)點(diǎn)。并為查找到的節(jié)點(diǎn)增加tmpExample樣
式。
8、查找上級(jí)節(jié)點(diǎn) parent()
舉例:$('li#tmpCarrot').parent().addClass('tmpExample');
查找ID為tmpCarrot的li節(jié)點(diǎn)的上級(jí)節(jié)點(diǎn)。并為查找到的節(jié)點(diǎn)增加tmpExample樣式。
9、查找子節(jié)點(diǎn) children()
舉例:$('div.tmpList').children('h4').addClass('tmpExample');
查找class為tmplist的div下面的子節(jié)點(diǎn)中為h4標(biāo)簽的。并為查找到的節(jié)點(diǎn)增加tmpExample樣式。
10、查找到的節(jié)點(diǎn)集合中反選 not()
舉例:$('ul li').not('li.tmpVegetables').addClass('tmpExample');
查找到的li集合中,除了class為tmpVegetables的節(jié)點(diǎn),都增加一個(gè)tmpExample樣式。
11、選擇節(jié)點(diǎn)集合中的片段 slice()
舉例:$('ul li').slice(1,4).addClass('tmpExample');
查找到的li集合中,選擇從第1個(gè)(從0計(jì)數(shù),第一個(gè)其實(shí)是第二個(gè))節(jié)點(diǎn)開(kāi)始的,向后4個(gè)節(jié)點(diǎn),并為這4個(gè)
節(jié)點(diǎn)增加tmpExample樣式。
12、向查找的結(jié)果集中添加節(jié)點(diǎn) add()
舉例:$('ul#tmpAnimals li').add('li#tmpBrocoli,li#tmpPepper').addClass('tmpExample');
id為tmpAnimals的ul節(jié)點(diǎn)下的li節(jié)點(diǎn)集,添加id為tmpBrocoli的li節(jié)點(diǎn)和添加id 為tmpPepper的li節(jié)點(diǎn)。并
將組合后的集合中所有l(wèi)i節(jié)點(diǎn)增加tmpExample樣式。
13、結(jié)果集中選擇指定元素 eq()
舉例:$('ul li').eq(10).addClass('tmpExample');
頁(yè)面ul下面的li集合中,給第10元素增加tmpExample樣式。
- jquery選擇器排除某個(gè)DOM元素的方法(實(shí)例演示)
- jQuery過(guò)濾選擇器:not()方法使用介紹
- jQuery獲取復(fù)選框被選中數(shù)量及判斷選擇值的方法詳解
- jQuery選擇id屬性帶有點(diǎn)符號(hào)元素的方法
- jQuery選擇器總結(jié)之常用元素查找方法
- JQuery的常用選擇器、過(guò)濾器、方法全面介紹
- jquery $(this).attr $(this).val方法使用介紹
- 詳談jQuery中的this和$(this)
- jQuery中$this和$(this)的區(qū)別介紹(一看就懂)
- JQuery this 和 $(this) 的區(qū)別
- jQuery 中$(this).index與$.each的使用指南
- jQuery 選擇方法及$(this)用法實(shí)例分析
相關(guān)文章
jQuery實(shí)現(xiàn)帶滾動(dòng)導(dǎo)航效果的全屏滾動(dòng)相冊(cè)實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶滾動(dòng)導(dǎo)航效果的全屏滾動(dòng)相冊(cè),涉及jQuery針對(duì)頁(yè)面圖片元素與鼠標(biāo)事件的相關(guān)操作技巧,需要的朋友可以參考下2015-06-06Jquery中$.post和$.ajax的用法小結(jié)
本節(jié)重點(diǎn)講的是jquery中調(diào)用ajax的4種方法中最常用的:$.post、和$ajax。如果讀者沒(méi)有javascript和jquery的知識(shí),或者沒(méi)有ajax的概念,那么請(qǐng)先去問(wèn)問(wèn)度娘,再來(lái)讀本文。2015-04-04ASP.NET中使用后端代碼注冊(cè)腳本 生成JQUERY-EASYUI的界面錯(cuò)位的解決方法
上一篇解決了用了JQUERY-EASYUI時(shí) 后端注冊(cè)腳本重復(fù)執(zhí)行的問(wèn)題.今天又發(fā)現(xiàn),通過(guò)后端代碼 生成的界面有錯(cuò)位現(xiàn)象.2010-06-06jQuery超簡(jiǎn)單選項(xiàng)卡完整實(shí)例
這篇文章主要介紹了jQuery超簡(jiǎn)單選項(xiàng)卡實(shí)現(xiàn)方法,以一個(gè)完整實(shí)例形式較為詳細(xì)的分析了jQuery實(shí)現(xiàn)選項(xiàng)卡切換功能的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09JQuery實(shí)現(xiàn)定時(shí)刷新功能代碼
在網(wǎng)頁(yè)開(kāi)發(fā)中,經(jīng)常會(huì)需要不斷的刷新某個(gè)頁(yè)面或某個(gè)局部數(shù)據(jù)。這時(shí)候就需要用到定時(shí)刷新來(lái)實(shí)現(xiàn)了。接下來(lái)通過(guò)本文給大家分享jquery實(shí)現(xiàn)定時(shí)刷新功能,需要的朋友參考下吧2017-05-05jquery validation驗(yàn)證身份證號(hào),護(hù)照,電話號(hào)碼,email(實(shí)例代碼)
jquery validation驗(yàn)證身份證號(hào),護(hù)照,電話號(hào)碼,email(實(shí)例代碼)。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11jQuery position() 函數(shù)詳解以及jQuery中position函數(shù)的應(yīng)用
position()函數(shù)用于返回當(dāng)前匹配元素相對(duì)于其被定位的祖輩元素的偏移,也就是相對(duì)于被定位的祖輩元素的坐標(biāo)。該函數(shù)只對(duì)可見(jiàn)元素有效,通過(guò)本文給大家介紹jQuery position() 函數(shù)詳解以及jQuery中position函數(shù)的應(yīng)用,感興趣的朋友一起學(xué)習(xí)吧2015-12-12jQuery .tmpl(), .template()學(xué)習(xí)資料小結(jié)
昨晚無(wú)意中發(fā)現(xiàn)一個(gè)有趣的jQuery插件.tmpl(),其文檔在這里。2011-07-07