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)的下一個兄弟節(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)的前一個兄弟節(jié)點(diǎn) prev()
舉例:$('li#tmpBroccoli').prev().addClass('tmpExample');
查找ID為tmpBroccoli的li節(jié)點(diǎn)的前一個兄弟節(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),都增加一個tmpExample樣式。
11、選擇節(jié)點(diǎn)集合中的片段 slice()
舉例:$('ul li').slice(1,4).addClass('tmpExample');
查找到的li集合中,選擇從第1個(從0計數(shù),第一個其實是第二個)節(jié)點(diǎn)開始的,向后4個節(jié)點(diǎn),并為這4個
節(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選擇器排除某個DOM元素的方法(實例演示)
- 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)用法實例分析
相關(guān)文章
jQuery實現(xiàn)帶滾動導(dǎo)航效果的全屏滾動相冊實例
這篇文章主要介紹了jQuery實現(xiàn)帶滾動導(dǎo)航效果的全屏滾動相冊,涉及jQuery針對頁面圖片元素與鼠標(biāo)事件的相關(guān)操作技巧,需要的朋友可以參考下2015-06-06Jquery中$.post和$.ajax的用法小結(jié)
本節(jié)重點(diǎn)講的是jquery中調(diào)用ajax的4種方法中最常用的:$.post、和$ajax。如果讀者沒有javascript和jquery的知識,或者沒有ajax的概念,那么請先去問問度娘,再來讀本文。2015-04-04ASP.NET中使用后端代碼注冊腳本 生成JQUERY-EASYUI的界面錯位的解決方法
上一篇解決了用了JQUERY-EASYUI時 后端注冊腳本重復(fù)執(zhí)行的問題.今天又發(fā)現(xiàn),通過后端代碼 生成的界面有錯位現(xiàn)象.2010-06-06jquery validation驗證身份證號,護(hù)照,電話號碼,email(實例代碼)
jquery validation驗證身份證號,護(hù)照,電話號碼,email(實例代碼)。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11jQuery 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-12jQuery .tmpl(), .template()學(xué)習(xí)資料小結(jié)
昨晚無意中發(fā)現(xiàn)一個有趣的jQuery插件.tmpl(),其文檔在這里。2011-07-07