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 相关文章推荐
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
puppeteer库入门初探
Jan 09 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
php读取3389的脚本
2014/05/06 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
python @property的用法及含义全面解析
2018/02/01 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
美国性感内衣店:Yandy
2018/06/12 全球购物
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
文明宿舍获奖感言
2014/02/07 职场文书
拓展训练激励口号
2014/06/17 职场文书
社会实践的活动方案
2014/08/22 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL