Jquery遍历节点的方法小集


Posted in Javascript onJanuary 22, 2014

本文给大家带来Query遍历方法的总结,需要的朋友可以参考下,希望能帮助到大家。下面跟随小编一起来看一下吧。
函数 描述

.add() 将元素添加到匹配元素的集合中。
.andSelf() 把堆栈中之前的元素集添加到当前集合中。
.children() 获得匹配元素集合中每个元素的所有子元素。
.closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。
.contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点。
.each() 对 jQuery 对象进行迭代,为每个匹配元素执行函数。
.end() 结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。
.eq() 将匹配元素集合缩减为位于指定索引的新元素。
.filter() 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
.find() 获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。
.first() 将匹配元素集合缩减为集合中的第一个元素。
.has() 将匹配元素集合缩减为包含特定元素的后代的集合。
.is() 根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true。
.last() 将匹配元素集合缩减为集合中的最后一个元素。
.map() 把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象。
.next() 获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。
.nextUntil() 获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。
.not() 从匹配元素集合中删除元素。
.offsetParent() 获得用于定位的第一个父元素。
.parent() 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。
.parents() 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。
.parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。
.prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。
.prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。
.prevUntil() 获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。
.siblings() 获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。
.slice() 将匹配元素集合缩减为指定范围的子集。

测试代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=GBK"> 
<link rel="stylesheet" type="text/css" href="table.css"> 
<title></title> 
<script src="../jquery-1.7.2.js" type="text/javascript"></script> 
<style type="text/css"> 
</style> 
<script type="text/javascript"> 
$(function() 
{ 
//next()查找下一个紧邻的节点next("#x")查找下一个紧邻的id为x的节点 
$("#d4").next().css("background-color","red"); 
//nextAll()之后的所有节点.之后的所有的div标签nextAll("div") 
$("#d4").nextAll().css("background-color","red"); 
//之前的紧邻节点 
$("#d4").prev().css("background-color","red"); 
//之前的所有节点 
$("#d4").prevAll().css("background-color","red"); 
//查找所有的兄弟节点 
$("#d4").siblings().css("background-color","red"); 
//查找本节点和本节点之后的节点,end()返回上一次jQuery对象被破坏之前的状态 
$("#d4").nextAll().css("background-color","red").end().css("background-color","red"); 
$("#d4").nextAll().andSelf().css("background-color","red"); 
$("#d4").nextAll().andSelf().end().css("background-color","red"); 
}); 
</script> 
</head> 
<body> 
<div>11111111</div> 
<div>22222222</div> 
<div>33333333</div> 
<div id="d4">44444444</div> 
<p>55555555</p> 
<div>66666666</div> 
<div>77777777</div> 
<div>88888888</div> 
<div>99999999</div> 
</body> 
</html>

大家可以测试一下,对学习很有帮助。

Javascript 相关文章推荐
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 #Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 #Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 #Javascript
在JS中如何调用JSP中的变量
Jan 22 #Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 #Javascript
JS中的数组的sort方法使用示例
Jan 22 #Javascript
禁止拷贝网页内容的js代码
Jan 22 #Javascript
You might like
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python简单的制作图片验证码实例
2017/05/31 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
Django 实现图片上传和下载功能
2020/12/31 Python
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
营业员实习自我鉴定
2013/12/07 职场文书
初二生物教学反思
2014/02/03 职场文书
精彩的广告词
2014/03/19 职场文书
自我鉴定书
2014/03/24 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
升学宴学生答谢词
2015/01/05 职场文书
违纪开除通知书
2015/04/25 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
Redis分布式锁的7种实现
2022/04/01 Redis