Jquery节点遍历
jquery 节点遍历
<html>
<head>
<title></title>
<script src="Jquery/jquery-1.10.2.min.js" type="text/javascript"></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>
<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>
Jquery节点遍历的更多相关文章
- jquery 源码解析 节点遍历
jquery遍历,用于根据其相对于其他元素的关系来查找或选取html元素,以某项选择开始,并沿着这个选择移动,知道移动被称为对dom进行遍历 ☑ <div> 元素是 <ul> ...
- jQuery（九）：节点遍历
一.遍历子元素 children()方法可以用来获取元素的所有子元素,语法如下: 示例: <!DOCTYPE html> <html lang="en"> ...
- 第四章 jQuery节点操作
1.DOM操作分为三类:(1)DOM Core:任何一种支持DOM的编程语言都可以使用用它如:getElementById()(2)HTML-DOM:用于处理HTML文档,如document,form ...
- 深入学习jQuery节点操作
× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...
- jquery学习——遍历
1.each() $(selector).each(function(index,element)) var arr = [ "a", "bb", " ...
- jquery $.each遍历json数组方法
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/ ...
- jQuery使用（十一）：jQuery实例遍历与索引
each() children() index() 一.jQuery实例遍历方法each() jQuery实例上的each()方法规定要运行的函数,并且给函数传入两个参数:index,element. ...
- JQuery each遍历A标签获取href 和 里面指定的值
JQuery each遍历A标签获取href $('.scol_subject').each(function(){ var href = $(this).attr('href'); $(this). ...
- [osg]节点遍历nodevisitor浅析
参考:https://www.cnblogs.com/hzhg/archive/2010/12/17/1908764.html OSG中节点的访问使用的是一种访问器模式.一个典型的访问器涉及抽象访问者 ...
随机推荐
- 怎样在Ubuntu中使用条件布局
我们知道现代手机能够随着手持的方位发生改变而使得手机的方位也随着发生改变.对有些应用来说,我们也希望手机的布局也能尾随发生变化.第二种情况是当我们的应用安装到不同屏幕尺寸的平台上,我们希望我们的布局会 ...
- windows 2003 域控制器(AD)的常规命令行操作以及修复
查询服务器的角色 Netdom query fsmo 强制升级操作主机角色(如果两台DC都无损,可以直接用图形模式传送,这里指的是一台DC出问题,另一台强制升级占用角色的情况) Ntdsutil Ro ...
- MYSQL查询表结构
mysql查看表结构命令,如下: desc 表名;show columns from 表名;describe 表名;show create table 表名; use information_sche ...
- javascript 中 undefined 和 null 区别
1.相同点 如果我们直接用 undefined == null 比较他们是相等的返回的将是 true. 2.区别 当我们用undefined === null 比较的时候最后返回的将是 false. ...
- 基于visual Studio2013解决面试题之0501上台阶
题目
- zoj1028-Flip and Shift
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=28 题意:有相互交叉的黑白两种颜色的小球,每一个小球每次可以跳两格:问你是否可以 ...
- hive udaf 用maven打包运行create temporary function 时报错
用maven打包写好的jar,在放到hive中作暂时函数时报错. 错误信息例如以下: hive> create temporary function maxvalue as "com. ...
- Cocos2dx 3.0 过渡篇（三十一）ValueVector和Vector不得不说的故事
本文投票地址:http://vote.blog.csdn.net/Article/Details?articleid=37834689 前天看到一个颇为纠结的选择题:有一天你遇到一个外星人,这时外星人 ...
- Delphi 设置文件属性
复制代码uses FileCtrl; procedure TForm1.BitBtn1Click(Sender: TObject);begin with OpenDialog1 do if Execu ...
- 中国本土管理咨询公司排名TOP50
中国本土管理咨询公司排名TOP50 1. 北京正略钧策管理顾问有限公司 2. 北京和君咨询公司 3. 北大纵横管理咨询公司 4. 远卓管理顾问公司 5. AMT管理咨询公司 6. 华夏基石管理咨询有限 ...