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的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
JavaScript浏览器选项卡效果
Aug 25 Javascript
jQuery.extend 函数详解
Feb 03 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
vue源码入口文件分析(推荐)
Jan 30 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检测图片木马多进制编程实践
2013/04/11 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
php分页查询的简单实现代码
2017/03/14 PHP
JScript中的undefined和"undefined"的区别
2007/03/08 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
Highcharts入门之简介
2016/08/02 Javascript
学习Node.js模块机制
2016/10/17 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
python获取文件扩展名的方法
2015/07/06 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
Python实现端口检测的方法
2018/07/24 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
python 写一个文件分发小程序
2020/12/05 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
《乌塔》教学反思
2014/02/17 职场文书
《锄禾》教学反思
2014/04/08 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers