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特效效果，这些课学习的遍历，来实现左侧导航栏。其他的就简单了，就是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之路(第二十六篇) 面向对象进阶：内置方法

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

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

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

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

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

随机推荐

  1. leetcode探索高级算法

    C++版 数组和字符串 正文 链表: 正文 树与图: 树: leetcode236. 二叉树的最近公共祖先 递归(先序) leetcode124二叉树最大路径和 递归 图: leetcode 547朋 ...

  2. nginx优化后的主配置文件

    user web web; #nginx的程序账户和程序组 worker_processes auto; #worker进程数 auto设为默认 error_log /app/logs/nginx/w ...

  3. [转]MySQL查询语句执行过程详解

    Mysql查询语句执行原理 数据库查询语句如何执行?语法分析:首先进行语法分析,对使用sql表示的查询进行语法分析,生成查询语法分析树.语义检查:检查sql中所涉及的对象以及是否在数据库中存在,用户是 ...

  4. 小D课堂 - 新版本微服务springcloud+Docker教程_5-02 Netflix开源组件断路器

    笔记 2.Netflix开源组件断路器Hystrix介绍     简介:介绍Hystrix基础知识和使用场景          文档地址:         https://github.com/Net ...

  5. [PySpark] Spark SQL on a large file

    基础篇:[Spark] 03 - Spark SQL /* implement */

  6. openstack核心组件--nova计算服务（3）

    一.nova介绍:       Nova 是 OpenStack 最核心的服务,负责维护和管理云环境的计算资源.OpenStack 作为 IaaS 的云操作系统,虚拟机生命周期管理也就是通过 Nova ...

  7. 一、linux基础命令

    一. 常用系统工作命令 1.echo 命令 ​ echo命令用于在终端输出字符串或者变量提取后的值 ​ echo $SHELL 2.date命令 ​ date命令用于显示及设置系统的时间或者日期 参数 ...

  8. springcloud 心得记录

    1.nacos,模块启动无加载顺序 2.nacos,线上配置中心修改文件后,需重启模块

  9. 【Python】【基础知识】【内置函数】【object的使用方法】

    原英文帮助文档: class object Return a new featureless object. object is a base for all classes. It has the ...

  10. Nginx整合Tomcat

    现在先不考虑集群的配置问题,只实现Nginx实现一台tomact的代理 1.我们需要一个web项目,这里我把先准备好的web.war文件部署到Tomact服务器上 mvn clean install ...