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 相关文章推荐
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 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
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
PHP eval函数使用介绍
2013/12/08 PHP
php利用事务处理转账问题
2015/04/22 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
jquery五角星评分插件示例分享
2014/02/21 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
浅谈PDF.js使用心得
2018/06/07 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
python编程开发之类型转换convert实例分析
2015/11/13 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python 装饰器深入理解
2017/03/16 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
零基础小白多久能学会python
2020/06/22 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
学习雷锋倡议书
2014/04/15 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
初中作文评语
2014/12/25 职场文书
怎样写观后感
2015/06/19 职场文书
名人传读书笔记
2015/06/26 职场文书
校友会致辞
2015/07/30 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python