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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
javascript表格的渲染组件
Jul 03 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 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中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
js活用事件触发对象动作
2008/08/10 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
使用Python获取Linux系统的各种信息
2014/07/10 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
python 调用钉钉机器人的方法
2019/02/20 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
详解python metaclass(元类)
2020/08/13 Python
python exit出错原因整理
2020/08/31 Python
Django Form常用功能及代码示例
2020/10/13 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
什么是接口(Interface)?
2013/02/01 面试题
大学生党员承诺书
2014/05/20 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
银行贷款收入证明
2014/10/17 职场文书
政协委员个人总结
2015/03/03 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
外出学习心得体会范文
2016/01/18 职场文书
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python