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

