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. 【8583】ISO8583报文解析

    ISO8583报文(简称8583包)又称8583报文,是一个国际标准的包格式,最多由128个字段域组成,每个域都有统一的规定,并有定长与变长之分. [报文格式] POS终端上送POS中心的消息报文结构 ...

  2. react-native关闭所有黄色警告

    写RN经常会遇到黄色警告,很无奈,很多很多的黄色警告都是由组件自己导致的,建议在index.js 内的 AppRegistry.registerComponent('shareFile', () =& ...

  3. WPF学习笔记 - .Net Framework的分离存储技术

    写入: protected override void OnClosed(EventArgs e) { base.OnClosed(e); IsolatedStorageFile f = Isolat ...

  4. jar/war文件的解释

    http://blog.csdn.net/tang_123_/article/details/6012202#comments

  5. ZUK Z2 AospExtended-v6.7 Android 9.0可用的谷歌相机Mod.md

    目录 参考资料 系统版本: AospExtended-v6.7-z2_plus-20190821-1940-OFFICIAL.zip cstark27 ×PXv4.1.1_GoogleCamera_7 ...

  6. [ML] Feature Selectors

    SparkML中关于特征的算法可分为:Extractors(特征提取).Transformers(特征转换).Selectors(特征选择)三部分. Ref: SparkML中三种特征选择算法(Vec ...

  7. 从源码学习使用 node-delegates

    node-delegates 是 TJ 大神所写的一个简单的小工具,源码只有 157 行,作用在于将外部对象接受到的操作委托到内部属性进行处理,也可以理解为讲对象的内部属性暴露到外部,简化我们所需要书 ...

  8. 公式test

  9. Java日志体系（六）log4j2

    1.1 简介 log4j2,一个日志的实现框架,是log4j的升级版本,于2014年7月正式亮相.与第一代log4j不同,log4j2完全重写了log4j的日志实现,并不是在原有基础上进行的升级,解决 ...

  10. FUZZ测试简介

    基本思想:利用黑盒方法,发送大量恶意/随机数据到被测试系统,通过监视系统运行过程中的异常,来发现应用程序中可能存在的安全问题.