JQuery 选择和过滤方法代码总结


Posted in Javascript onNovember 19, 2010

1、查找所有符合条件的元素 find()
     举例: $('ul').find('li').addClass('tmpExample');
               查找页面中ul元素下的所有li元素,并为查找到的li元素增加tmpExample样式。

2、查找指定元素的兄弟节点 siblings()
     举例:$('li#tmpCarrot').slblings().addClass('tmpExample');
              查找ID为tmpCarrot的li元素所有的兄弟节点,并为查找到的兄弟节点增加tmpExample样式。
              可以在slblings()的括号中添加选择器来查找指定条件的兄弟节点。如:slblings('.tmpClass'),就是查找类

为tmpClass的兄弟节点。

3、查找指定节点的下一个兄弟节点 next()
     举例:$('li#tmpBroccoli').next().addClass('tmpExample');
              查找ID为tmpBroccoli的li节点的下一兄弟节点。并为查找到的兄弟节点增加tmpExample样式。

4、查找指定节点的后面的所有兄弟节点 next()
     举例:$('li#tmpBroccoli').nextAll().addClass('tmpExample');
              查找ID为tmpBroccoli的li节点后面的所有兄弟节点。并为查找到的兄弟节点增加tmpExample样式。

5、查找指定节点的前一个兄弟节点 prev()
     举例:$('li#tmpBroccoli').prev().addClass('tmpExample');
              查找ID为tmpBroccoli的li节点的前一个兄弟节点。并为查找到的兄弟节点增加tmpExample样式。   

6、查找指定节点的前面所有的兄弟节点 prevAll()
     举例:$('li#tmpBroccoli').prevAll().addClass('tmpExample');
              查找ID为tmpBroccoli的li节点的前面所有的兄弟节点。并为查找到的兄弟节点增加tmpExample样式。
               可以在prevAll()的括号中添加选择器来查找指定条件的兄弟节点。如:prevAll('li.tmpClass'),就是查找当

前节点前面所有类为tmClass的兄弟节点。

7、查找所有符合条件的上级节点 parents()
     举例:$('li#tmpCarrot').parents('div#tmpSelection').addClass('tmpExample');
              查找ID为tmpCarrot的li节点所有id为tmpSelection的div上级节点。并为查找到的节点增加tmpExample样

式。

8、查找上级节点 parent()
     举例:$('li#tmpCarrot').parent().addClass('tmpExample');
              查找ID为tmpCarrot的li节点的上级节点。并为查找到的节点增加tmpExample样式。

9、查找子节点 children()
     举例:$('div.tmpList').children('h4').addClass('tmpExample');
              查找class为tmplist的div下面的子节点中为h4标签的。并为查找到的节点增加tmpExample样式。

10、查找到的节点集合中反选 not()
      举例:$('ul li').not('li.tmpVegetables').addClass('tmpExample');
               查找到的li集合中,除了class为tmpVegetables的节点,都增加一个tmpExample样式。

11、选择节点集合中的片段  slice()
      举例:$('ul li').slice(1,4).addClass('tmpExample');
               查找到的li集合中,选择从第1个(从0计数,第一个其实是第二个)节点开始的,向后4个节点,并为这4个

节点增加tmpExample样式。

12、向查找的结果集中添加节点  add()
      举例:$('ul#tmpAnimals li').add('li#tmpBrocoli,li#tmpPepper').addClass('tmpExample');
               id为tmpAnimals的ul节点下的li节点集,添加id为tmpBrocoli的li节点和添加id 为tmpPepper的li节点。并

将组合后的集合中所有li节点增加tmpExample样式。

13、结果集中选择指定元素 eq()
      举例:$('ul li').eq(10).addClass('tmpExample');
              页面ul下面的li集合中,给第10元素增加tmpExample样式。

Javascript 相关文章推荐
原生JS实现加入收藏夹的代码
Oct 24 Javascript
Javascript基础教程之argument 详解
Jan 18 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
jQuery实现滚动效果
Nov 17 jQuery
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 #Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 #Javascript
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 #Javascript
Google AJAX 搜索 API实现代码
Nov 17 #Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 #Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 #Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 #Javascript
You might like
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
php实现word转html的方法
2016/01/22 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
python 实现堆排序算法代码
2012/06/05 Python
python关键字and和or用法实例
2015/05/28 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
通息工程毕业生自荐信
2013/10/16 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
销售经理岗位职责
2015/01/31 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python