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 相关文章推荐
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
Javascript的this用法
Jan 16 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
JSON stringify方法原理及实例解析
Oct 23 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
微信小程序实现简单购物车功能
Dec 30 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脚本数据库功能详解(下)
2006/10/09 PHP
用PHP查询域名状态whois的类
2006/11/25 PHP
处理单名多值表单的详解
2013/06/08 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
深入理解Javascript中的this关键字
2015/03/27 Python
Python fileinput模块使用实例
2015/05/28 Python
Python复制文件操作实例详解
2015/11/10 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
如何通过python实现全排列
2020/02/11 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
python爬虫 requests-html的使用
2020/11/30 Python
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
人事专员的职责
2014/02/26 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
党的生日演讲稿
2014/09/10 职场文书
保安2014年终工作总结
2014/12/06 职场文书
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL