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 相关文章推荐
用javascript来实现动画导航效果的代码
Dec 16 Javascript
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
JQUERY操作JSON实例代码
Feb 09 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
Vue渲染过程浅析
Mar 14 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
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网站)
2015/10/20 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
网上应用的一个不错common.js脚本
2007/08/08 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
在Mac OS上搭建Python的开发环境
2015/12/24 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
中海讯通笔试题
2015/09/15 面试题
本科毕业生自我鉴定
2013/11/02 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
工业设计专业自荐书
2014/06/05 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书