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 相关文章推荐
js的写法基础分析
Jan 17 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
js严格模式总结(分享)
Aug 22 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
你不知道的SpringBoot与Vue部署解决方案
Nov 09 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 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 中文处理函数集合
2008/08/27 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
Javascript的并行运算实现代码
2010/11/19 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
页面使用密码保护代码
2013/04/10 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
Django和Flask框架优缺点对比
2019/10/24 Python
python实现连连看游戏
2020/02/14 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
python3中布局背景颜色代码分析
2020/12/01 Python
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
优秀团支部事迹材料
2014/02/08 职场文书
求职简历自我评价范例
2014/03/12 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
答谢词范文
2015/01/05 职场文书
教师个人发展总结
2015/02/11 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
Golang中异常处理机制详解
2021/06/08 Golang
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL