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. manager 实现进程之间的数据共享 list dict

    manager 能够实现进程之间的数据共享 (list,dict) 如果多个进程同事修改同一份共享数据,这个时候需要加锁,保证数据的准确性. (1) dict list 可以实现进程之间的数据共享 ( ...

  2. java.lang.reflect.Method.getAnnotation()方法示例【通过反射获取到方法对象再获取方法对象上的注解信息】

    转: java.lang.reflect.Method.getAnnotation()方法示例 java.lang.reflect.Method.getAnnotation(Class <T&g ...

  3. 数位dp作业

    dp东西实在太多,昨天开了个树形dp入门,还没入呢,今天就要写数位dp,也不知道这种学习状态对不对啊? A - 不要62 题意: 输入n到m内,符合条件的数的个数.条件:不含62和4. 这里直接学习q ...

  4. Spring Boot开发Web应用之JSP篇

    前言 上一篇介绍了Spring Boot中使用Thymeleaf模板引擎,今天来介绍一下如何使用SpringBoot官方不推荐的jsp,虽然难度有点大,但是玩起来还是蛮有意思的. 正文 先来看看整体的 ...

  5. V8的垃圾回收和内存限制

    V8的垃圾回收和内存限制 前言 在第三次浏览器大战中,来自Google的Chrome浏览器凭借优异的性能成为聚光灯下的焦点.而Chrome的成功离不开站在其背后的JavaScript引擎V8. 随着V ...

  6. 三、使用VSCode配置简单的vue项目

    由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...

  7. 重点做EUR/USD、EUR/JPY、GBP/USD。

    这三种货币对,几乎每天都有合适的行情.

  8. 第九组 通信3班 063 自反ACL

    一.拓扑图 R4为外网,R2和R3为内网. 二.地址表 Device Interface IP address R1 F 0/0 10.1.63.1 F 0/1 14.1.63.1 R2 F 0/0 ...

  9. 【VS开发】学习VS2010 ------ 多种类型的视图集合CTabView

    多种类型的视图集合CTabView 首先利用AppWizard建立工程,然后将视类的基类更改为CTabView,并将所有的CView更改为CTabView. 依次插入以CSrollView.CList ...

  10. CSS实现网页背景图片自适应全屏,自适应背景图片

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...