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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
Jquery 弹出层插件实现代码
Oct 24 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
Vue性能优化的方法
Jul 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
桌面中心(三)修改数据库
2006/10/09 PHP
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
通俗易懂的php防注入代码
2010/04/07 PHP
PHP 函数执行效率的小比较
2010/10/17 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
Python如何实现定时器功能
2020/05/28 Python
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
日期和时间问题
2015/01/04 面试题
拓展培训心得体会
2014/01/04 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
小学家长会邀请函
2014/01/23 职场文书
保护环境建议书300字
2014/05/13 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers