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 相关文章推荐
javascript  Error 对象 错误处理
May 18 Javascript
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
JavaScript 变量命名规则
Sep 23 Javascript
js word表格动态添加代码
Jun 07 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
jQuery实现返回顶部功能
Feb 23 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 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 output buffering缓存及程序缓存深入解析
2013/07/15 PHP
php中fsockopen用法实例
2015/01/05 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
玩转方法:call和apply
2014/05/08 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
python实现二分查找算法
2020/09/18 Python
python 利用toapi库自动生成api
2020/10/19 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
python 数据类型强制转换的总结
2021/01/25 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
大学生求职信怎么写
2015/03/19 职场文书
Pandas 数据编码的十种方法
2022/04/20 Python
基于Redission的分布式锁实战
2022/08/14 Redis