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节点遍历的更多相关文章

  1. jquery 源码解析 节点遍历

    jquery遍历,用于根据其相对于其他元素的关系来查找或选取html元素,以某项选择开始,并沿着这个选择移动,知道移动被称为对dom进行遍历 ☑ <div> 元素是 <ul> ...

  2. jQuery（九）：节点遍历

    一.遍历子元素 children()方法可以用来获取元素的所有子元素,语法如下: 示例: <!DOCTYPE html> <html lang="en"> ...

  3. 第四章 jQuery节点操作

    1.DOM操作分为三类:(1)DOM Core:任何一种支持DOM的编程语言都可以使用用它如:getElementById()(2)HTML-DOM:用于处理HTML文档,如document,form ...

  4. 深入学习jQuery节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...

  5. jquery学习——遍历

    1.each() $(selector).each(function(index,element)) var arr = [ "a", "bb", " ...

  6. jquery $.each遍历json数组方法

    <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/ ...

  7. jQuery使用（十一）：jQuery实例遍历与索引

    each() children() index() 一.jQuery实例遍历方法each() jQuery实例上的each()方法规定要运行的函数,并且给函数传入两个参数:index,element. ...

  8. JQuery each遍历A标签获取href 和 里面指定的值

    JQuery each遍历A标签获取href $('.scol_subject').each(function(){ var href = $(this).attr('href'); $(this). ...

  9. [osg]节点遍历nodevisitor浅析

    参考:https://www.cnblogs.com/hzhg/archive/2010/12/17/1908764.html OSG中节点的访问使用的是一种访问器模式.一个典型的访问器涉及抽象访问者 ...

随机推荐

  1. Android 解屏幕锁与点亮屏幕

    前言          欢迎大家我分享和推荐好用的代码段~~ 声明          欢迎转载,但请保留文章原始出处:          CSDN:http://www.csdn.net        ...

  2. git项目同时支持多个远端仓库

    git项目同时支持多个远端仓库 为了防止github被墙,最好在国内的托管商做一个备份,这就需要同时提交到多个远端仓库,例如一个open source项目同时要提交csdn和github,url分别是 ...

  3. HDU 2544 最短

    链接:http://acm.hdu.edu.cn/showproblem.php? pid=2544 解析: 首先数据量为V<=100 那么这里使用不论什么基础的最短路的算法都不会超时! 常见数 ...

  4. Expert for SQL Server 诊断系列

    Expert for SQL Server 诊断系列 Expert 诊断优化系列------------------锁是个大角色   前面几篇已经陆续从服务器的几个大块讲述了SQL SERVER数据库 ...

  5. SRM 583 Div Level Two：IDNumberVerification

    题目来源:http://community.topcoder.com/stat?c=problem_statement&pm=12610 这道题比较有意思,估计是中国人出的吧,以前都不知道身份 ...

  6. HDU 4669 Mutiples on a circle （DP , 统计）

    转载请注明出处,谢谢http://blog.csdn.net/ACM_cxlove?viewmode=contents    by---cxlove 题意:给出一个环,每个点是一个数字,取一个子串,使 ...

  7. [置顶] 应广大童鞋的要求提供一个封装模块，直接和ADB 服务进程交互

    很多童鞋在用ADB 的时候都是直接启动ADB 的进程,然后通过管道的方式获取输出,这样多个线程同时使用ADB 的时候任务管理器一闪一闪的,是不是很不爽啊,原先介绍过可以直接和ADB 服务进程通信,不用 ...

  8. webdynpro MESSGAE

    1.  添加辅助类CL_WDR_DEMO_MESSAGES 环境,设计的控件有:输入控件,按钮,每个按钮对应一个事件.分别是下面,然后报消息 TEXT: SUCCESS: method ONACTIO ...

  9. Servlet的学习之Response响应对象（3）

    本篇来说明响应对象HttpServletResponse对象的最后一点内容. 首先来看响应对象控制浏览器定时刷新,在我的web应用[myservlet]中创建Servlet,在该Servlet中设置响 ...

  10. Selenium WebDriver java 简单实例

    开发环境 JDK 下载地址: http://www.oracle.com/technetwork/java/javase/downloads/index.html Eclipse: 下载地址:http ...