Jquery节点遍历next与nextAll方法使用示例


Posted in Javascript onJuly 22, 2014

Jqeruy节点遍历

<!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> 
<title></title> 
<script src="Jquery/jquery-1.10.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//节点遍历 

/*--next()方法用于获取“节点之后”挨着它的第一个“同类同辈”元素--*/ 
$(function () { 
/* 
$("div").click(function () { 
alert($(this).next("div").text()) //效果:当单击AA的时候会弹出BB,当点击BB的时候会弹出CC,当点击CC的时候会弹出空的警告框(因为CC这个div节点后挨着它的是p元素,所以就弹出一个空的警告框),当点击FF的时候会弹出KK,当点击KK的时候会弹出空的警告框,(因为KK这个div节点后没有同辈的div元素挨着它了,所以就弹出一个空的警告框) 
*/ 

/*--nextAll()方法用于获取“节点之后”所有的元素--*/ 
/* 
$("div,p").click(function () { 
alert($(this).nextAll().text()); //当单击div标签或者p标签的时候弹出点击的当前标签后的所有标签的text(); 
}) 
*/ 

/* 
$("div,p").click(function () { 
alert($(this).nextAll("p").text()); //当单击div标签或者p标签的时候弹出点击的当前标签后的所有p标签的text(); 
}) 
*/ 

/* 
$("div").click(function () { 
$(this).nextAll("div").css("background", "red"); //当点击div标签的时候将它后面的所有div标签的背景都设为红色 
}) 
*/ 

/* 
$("div").click(function () { 
$.each($(this).nextAll("div"), function () { $(this).css("background-color", "red") })//当点击div标签的时候将它后面的所有div标签的背景都设为红色,与上面的那一条效果是一样的(解释:先取得当前点击的div标签后面的所有div标签,然后对它进行遍历,然后通过后面的匿名函数将取得的所有div标签的背景设为红色)注意这前后两个this意思是不一样的:前面的this指的是当前点击的div标签,后面的thi是:在获取到当前点击的div标签的“后面的div标签”后,遍历他们的每一个div,后面的thi是:在后面的匿名函数正在处理的“当前遍历到的div标签” 【前面的是当前点击的div,后面的匿名函数的真正处理的当前div】 
}) 
*/ 


$("div,p").click(function () { 
//$(this).css("background", "red"); $(this).siblings().css("background", "yellow"); //将当前点击的div或者P标签背景设为红色,其他的兄弟标签背景设为黄色 

$(this).css("background", "red").siblings().css("background", "yellow");//与上面一句等同 

}) 

}) 
</script> 
</head> 
<body> 
<div> 
AA</div> 
<div> 
BB</div> 
<div> 
CC</div> 
<p> 
DD</p> 
<p> 
EE</p> 
<div> 
FF</div> 
<div> 
KK</div> 
</body> 
</html>
Javascript 相关文章推荐
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
javascript流程控制语句集合
Sep 18 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
js中实现继承的五种方法
Jan 25 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 #Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 #Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 #Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 #Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 #Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 #Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 #Javascript
You might like
php中实现记住密码自动登录的代码
2011/03/02 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
php session_decode函数用法讲解
2019/05/26 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
Prototype Class对象学习
2009/07/19 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
python将字典内容存入mysql实例代码
2018/01/18 Python
详解Python字典的操作
2019/03/04 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
战友聚会邀请函
2014/01/18 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
班主任寄语大全
2014/04/04 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
课程设计感想范文
2015/08/11 职场文书
python 逐步回归算法
2021/04/06 Python
Django中的JWT身份验证的实现
2021/05/07 Python