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 迁移目录
Dec 18 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
JS实现简单日历特效
Jan 03 Javascript
如何用JS模拟实现数组的map方法
Jul 30 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
基于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实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
keras的三种模型实现与区别说明
2020/07/03 Python
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
大学三年的自我评价
2013/12/25 职场文书
国际贸易个人求职信范文
2014/01/04 职场文书
员工薪酬福利制度
2014/01/17 职场文书
给老师的检讨书
2014/02/11 职场文书
房产代理公证处委托书
2014/04/04 职场文书
大学生新学期计划书
2014/04/28 职场文书
法律顾问服务方案
2014/05/15 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
先进典型发言材料
2014/12/30 职场文书
田径运动会广播稿
2015/08/19 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
多人股份制合作协议书
2016/03/19 职场文书
高质量“欢迎词”
2019/04/03 职场文书