jquery 节点遍历

  1. <html>
  2. <head>
  3.     <title></title>
  4.     <script src="Jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
  5. </head>
  6. <body>
  7.     <div>AA</div>
  8. 	<div>BB</div>
  9.     <div>CC</div>
  10.  
  11.     <p>DD</p>
  12.     <p>EE</p>
  13.  
  14.     <div>FF</div>
  15.     <div>KK</div>
  16. </body>
  17. </html>
  1. <script type="text/javascript">
  2.         //节点遍历
  3.  
  4.         /*--next()方法用于获取“节点之后”挨着它的第一个“同类同辈”元素--*/
  5.         $(function () {
  6.  
  7.             $("div").click(function () {
  8.             alert($(this).next("div").text())  //效果：当单击AA的时候会弹出BB,当点击BB的时候会弹出CC。当点击CC的时候会弹出空的警告框（由于CC这个div节点后挨着它的是p元素。所以就弹出一个空的警告框），当点击FF的时候会弹出KK，当点击KK的时候会弹出空的警告框，(由于KK这个div节点后没有同辈的div元素挨着它了，所以就弹出一个空的警告框)
  9.  
  10.             /*--nextAll()方法用于获取“节点之后”全部的同辈元素--*/
  11.  
  12.             $("div,p").click(function () {
  13.             	alert($(this).nextAll().text()); //当单击div标签或者p标签的时候弹出点击的当前标签后的全部标签的text();
  14.             })
  15.  
  16.             $("div,p").click(function () {
  17.             	alert($(this).nextAll("p").text()); //当单击div标签或者p标签的时候弹出点击的当前标签后的全部p标签的text();
  18.             })
  19.  
  20.             $("div").click(function () {
  21.             	$(this).nextAll("div").css("background", "red"); //当点击div标签的时候将它后面的全部div标签的背景都设为红色
  22.             })
  23.  
  24.             $("div").click(function () {
  25.             	$.each($(this).nextAll("div"), function () { $(this).css("background-color", "red") })
  26. 			//当点击div标签的时候将它后面的全部div标签的背景都设为红色,与上面的那一条效果是一样的（解释：先取得当前点击的div标签后面的全部div标签。然后对它进行遍历。然后通过后面的匿名函数将取得的全部div标签的背景设为红色）注意这前后两个this意思是不一样的：前面的this指的是当前点击的div标签。后面的thi是：在获取到当前点击的div标签的“后面的div标签”后，遍历他们的每个div,后面的thi是：在后面的匿名函数正在处理的“当前遍历到的div标签” 【前面的是当前点击的div，后面的匿名函数的真正处理的当前div】
  27.             })
  28.  
  29.             $("div,p").click(function () {
  30.                 //$(this).css("background", "red"); $(this).siblings().css("background", "yellow"); //将当前点击的div或者P标签背景设为红色，其它的兄弟标签背景设为黄色
  31.  
  32.                 $(this).css("background", "red").siblings().css("background", "yellow");//与上面一句等同
  33.             })
  34.         })
  35.     </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. 基于visual Studio2013解决面试题之0808寻找中间数

     题目

  2. 基于W5500+Yeelink的远程灯光控制设计

    概述 工具:物联网云平台Yeelink  DHT11温湿度传感器   W5500EVB 编译环境:Keil4 目的:通过以太网实时监控远程某个位置的温度和湿度 在W5500EVB端连接LED灯.通过W ...

  3. POJ - 1422 Air Raid 二分图最大匹配

    题目大意:有n个点,m条单向线段.如今问要从几个点出发才干遍历到全部的点 解题思路:二分图最大匹配,仅仅要一条匹配,就表示两个点联通,两个点联通仅仅须要选取当中一个点就可以,所以有多少条匹配.就能够减 ...

  4. Endnote X6 如何修改输出格式（output style）成为自己想要的输出格式：

    Endnote X6 如何修改输出格式(output style)成为自己想要的输出格式: (1)首先尝试在endnote output style 网站中查找: http://www.endnote ...

  5. MVC控制器里面使用dynamic和ExpandoObject

    MVC控制器里面使用dynamic和ExpandoObject 在很多时候,我们在数据库里面定义表字段和实际在页面中展示的内容,往往是不太匹配的,页面数据可能是多个表数据的综合体,因此除了我们在表设计 ...

  6. 重操JS旧业第八弹：面向对象与继承

    js里面没有语言语法层面的继承机制,但这并不意味着js就不能实现继承,利用js属性和方法动态性来模拟实现继承,通过总结大概有如下方法实现: 1 原型链继承 我们知道原型在对象中扮演着重要的角色,函数本 ...

  7. 安装m2eclipse

    Help->Eclipse Marketplace- 搜索 maven 安装 Maven Integration for Eclipse

  8. perl 继承概述

    <pre name="code" class="html">[root@wx03 test]# cat Horse.pm package Horse ...

  9. 性能测试之LoardRunner 结果分析

    性能结果分析是性能测试中的重中之重,也是难点所在,以下总结了看图的一些顺序: 1.首先可以检查Analysis模块提供的Summary Report,整个测试过程中我们所关心的各业务 2.首先关注性能 ...

  10. git使用说明

    1,git clone git://github.com/schacon/simplegit.git git工作目录,暂存目录,本地代码仓库都有代码了. 2,git pull git://github ...