第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素

时间：2021-07-25 08:55:15

jQuery 学习8 遍历-父亲兄弟子孙元素

 
jQuery遍历，可以理解为“移动”，使用“移动”还获取其他的元素。
 
什么意思呢？老师举一个例子：
班上30位同学，我是新来负责教这个班学生的老师，但我不认识所有学生，只认识上学期教过的几位同学、比如小明。我们再用一小串代码来作解释：
 
<body>

<span id="ming">我是小明</span>

<span>我坐在小明后面，我叫李四</span>

</body>
 
以上看的很清楚吧。他们是同级元素，两位同学是平级的，只是小明坐在第一排，而李四则坐在第二排，意思很简单。我(老师)上课提问题，但我不清楚小明后面的同学叫什么名字，而又要抽他起来回答问题，在jQuery里，我们知道他和小明的关系的时候，我们就可以用到next()方法(找到下一位同级元素)，这样的话，我就知道小明后面坐着的同学了。我们在script里测试一下代码：
 
<script>

    alert($("#ming").next().html());

</script>
 
找到小明的id，然后next()方法找到下一个兄弟元素，html()打印内容，alert()弹出提示。我们可以很清楚的看到，弹出的则是小明后面的李四。
 
来看一个完整的代码演示：
 
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>jQuery 学习8 遍历-父亲兄弟子孙元素</title>

    <!--使用jQuery一定不要忘记引用jQuery文件-->

    <script src="../js/jquery-1.12.2.min.js"></script>

</head>

<body>

<div id="boss">

    我是最大的，爷爷

    <div id="div1">

        我是老二呗

        <p id="x">兄长</p>

        <p id="d">弟弟</p>

    </div>

</div>

<!--以上就给出最简单的关系结构，爷爷、父亲、俩兄弟-->

<br/><br/>

<button onclick="boss1()">获取id为"boss"的儿子</button>

<button onclick="boss2()">获取id为"boss"的孙子并且id为"d"</button><br/><br/>

<button onclick="div1()">获取id为"div1"的父亲</button>

<button onclick="div2()">修改样式id为"div1"的儿子</button>

<button onclick="div3()">获取id为"div1"的儿子且id为"x"</button><br/><br/>

<button onclick="x1()">获取id为"x"的下一个兄弟</button>

<button onclick="x2()">获取id为"x"的父亲</button>

<button onclick="x3()">获取id为"x"的父亲的父亲，即为爷爷</button><br/><br/>

<button onclick="d1()">获取id为"d"的上一个兄弟</button>

<!--以上是给出按钮、给出事件，演示效果给同学们看-->

<br/><br/>

<!--给一个p元素，来看出效果-->

<p id="zhi" style="color:red;"></p>

<script>

    //以下就全是 点击事件调用的函数

    function boss1(){

        //获取id为"boss"的儿子

        $("#zhi").html($("#boss").children().html());

        //children()方法，返回被选元素的所有直接子元素

        //因为boss的儿子下面还有孩子，所以它的孩子也会跟着。但不管怎么样，我们获取了boss的儿子了

    }

    function boss2(){

        $("#zhi").html($("#boss").find("#d").html());

        //find()方法必须带参数，才能找到指定的孙子，可以用id、class、元素来指定，这里用的是id

        //find()方法 返回被选元素的后代元素，一路向下直到最后一个后代。

    }

    function div1(){

        $("#zhi").html($("#div1").parent().html());

        //parent()方法是找到当前元素的父亲，父亲只有一个，所以parent()方法不需要参数

    }

    function div2(){

        $("#div1").children().css("color","blue");

        //获取儿子只能获取一个，即为最近的一个，所以老师这里用修改样式给大家看出，能修改所以直接儿子的样式

    }

    function div3(){

        $("#zhi").html($("#div1").children("#x").html());

        //父亲可以有多个孩子，children()方法可以带参数，就是过滤一些儿子，找到指定的儿子

    }

    function x1(){

        $("#zhi").html($("#x").next().html());

        //next() 返回被选元素的下一个同胞元素 所以是不需要参数的哟

    }

    function x2(){

        $("#zhi").html($("#x").parent().html());

        //获取它的父亲，父亲的内容也会打印出儿子的内容，因为儿子是跟着父亲的

    }

    function x3(){

        $("#zhi").html($("#x").parent().parent().html());

        //这里老师用了两个parent()方法，就是找到，当前元素的父亲的父亲，即为爷爷。

        //所以说，咱们自己扩展，其他的方法，也是可以这样，两个甚至多个使用来 找到其他元素

    }

    function d1(){

        $("#zhi").html($("#d").prev().html());

        //prev() 即为返回上一个兄弟元素，和next()方法正好相反

    }

</script>

</body>

</html>
 
老师只演示了部分常用的：
next() 方法返回被选元素的下一个同胞元素。
prev() 方法返回被选元素的上一个同胞元素。
children() 方法返回被选元素的所有直接子元素。
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
parent() 方法返回被选元素的直接父元素。
以上引用w3c教程
 
这里只有五个遍历方法。还有一部分，老师认为并不是经常使用到的，有兴趣的同学可以去教程里看一下。
 
那么学到这里，很多同学疑问，遍历有什么好的？老师这里就说一下，比如你的导航栏，有一级和二级菜单，一级菜单点击一下，弹出相应的二级菜单，其他的二级菜单隐藏。
老师以前写呢，就是给每一个一级菜单给一个id，二级菜单一个id，然后点击一级菜单弹出相应的二级菜单，老师很肯定的说，有很多初学的同学肯定也是这么想的。那么问题来了，客户的需求，他的一级菜单有10个，20个甚至更多，难道我们就在页面上一个一个的给id吗？
像这种，我们就完全可以运用今天所学的，遍历，一级菜单找到下面的二级菜单弹出，用jQuery的元素查找，用class类来查找，然后再找到它的儿子或者兄弟，再做显示或隐藏，几行代码高效且稳定的搞定一切，还能在这个基础上再新加导航栏，js代码不管，依旧能实现二级菜单。
 
 
下一篇，我们写一个小项目，实战一下，将这26篇，html+css+js+jQuery这些，所学，再加上自己扩展，写一个简单的页面。
 
页面(简单点)：
第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素
 
可以用jQuery特效效果，这些课学习的遍历，来实现左侧导航栏。其他的就简单了，就是html+css静态布局了。
 

第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素的更多相关文章

  1. 第二十五篇 jQuery 学习7 获取并设置 CSS 类

    jQuery 学习7 获取并设置 CSS 类   jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...

  2. 第二十四篇 jQuery 学习6 删除元素

    jQuery 学习6 删除元素   上节课我们做了添加元素,模拟的是楼主发的文章,路人评论,那么同学们这节课学了删除之后,去之前的代码上添加一个删除,模拟一个楼主删除路人的评论. jQuery的删除方 ...

  3. 第二十二篇 jQuery 学习4 内容和属性

    jQuery 内容和属性   这节课,我们学习使用jQuery来控制元素的内容.值和属性.   html() 控制所选元素的内容(包括HTML标记): text() 控制所选元素的内容: val() ...

  4. 第二十六篇 -- wifi学习

    参考网址:https://blog.csdn.net/zwl1584671413/article/details/77936950 https://blog.csdn.net/Righthek/art ...

  5. 第二十六篇：两个SOUI新控件 ---- SListView和SComboView（借用Andorid的设计）

    SOUI原来实现的SListBoxEx的效率一直是我对SOUI不太满意的地方.包括后来网友实现的SListCtrlEx. 这类控件为每一个列表项创建一个SWindow来容纳数据,当数据量比较大(100 ...

  6. 第二十六篇-单击事件、Toast（提示框信息）

    单击事件有3种方法: 第一种: layout.xml <?xml version="1.0" encoding="utf-8"?> <Line ...

  7. Python之路&lpar;第二十六篇&rpar; 面向对象进阶：内置方法

    一.__getattribute__ object.__getattribute__(self, name) 无条件被调用,通过实例访问属性.如果class中定义了__getattr__(),则__g ...

  8. flask第二十六篇——模板【控制语句】【2】

    如果你也在学flask,就请加船长的公众号:自动化测试实战 我们先补充一下for循环的知识,我们之前说过,flask是由Jinja2+sqlAlchemy+werkzeug组成的,我们现在学的控制语句 ...

  9. SpringBoot非官方教程 &vert; 第二十六篇： sprinboot整合elk，搭建实时日志平台

    转载请标明出处: 原文首发于https://www.fangzhipeng.com/springboot/2017/07/11/sprinboot25-elk/ 本文出自方志朋的博客 这篇文章主要介绍 ...

随机推荐

  1. iOS 开发总结（下）

    来源:蝴蝶之梦天使 链接:http://www.jianshu.com/p/d333cf6ae4b0 四十.AFNetworking 传送 form-data 将JSON的数据,转化为NSData, ...

  2. git提交

    1.git pull 本地已经commit 2.git checkout master 3.git pull 4.git checkout - 5.git merge master 6.git pus ...

  3. 【jmter】逻辑控制器&lpar;Logic Controller&rpar;

    1. Jmeter官网对逻辑控制器的解释是:“Logic Controllers determine the order in which Samplers are processed.”.意思是说, ...

  4. JavaWeb-JDK下载安装

    JDK官方下载地址:http://www.oracle.com/index.html JDK下载: 64位的下64的 JDK安装:(这是32位的) JDK部署测试:(配置环境变量) JAVA_HOME ...

  5. POI根据EXCEL模板，修改内容导出新EXCEL （只支持HSSF）

    package excelPoiTest; import java.io.File; import java.io.FileInputStream; import java.io.FileOutput ...

  6. delphi服务程序&lpar;service&rpar;的调试方法

    方法一: 1.调试delphi 写的服务程序,有这么一个办法.原来每次都是用attach to process方法,很麻烦.并且按照服务线程的执行线路,可能会停不到想要的断点.笨办法是,在proced ...

  7. Codeforces Round &num;277&period;5 &lpar;Div&period; 2&rpar; --E&period; Hiking &lpar;01分数规划&rpar;

    http://codeforces.com/contest/489/problem/E E. Hiking time limit per test 1 second memory limit per ...

  8. Lua 服务器Socket通信实例（转）

    local socket = require"socket" local host = "127.0.0.1"local port = "843&qu ...

  9. VB高清图标制作方法

    我隆重介绍一个软件:ResHacker !!! 这个软件可以修改软件的很多东西包括图标和标题,下面看**作. 运行ResHacker打开要更改图标的exe文件, 图标组--1--右键0--替换资源-- ...

  10. 画PCB之电流与线宽的关系

    来源:(多图) 超强整理!PCB设计之电流与线宽的关系http://www.51hei.com/bbs/dpj-39134-1.html 关于PCB线宽和电流的经验公式,关系表和软件网上都很多,本文把 ...

相关文章