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. selector状态选择器

    Selector selector就是状态选择器(StateList),它分为两种,一种Color-Selector 和Drawable-Selector. Color-Selector color- ...

  2. Sqlite轻量级数据库

     SQLite,是一款轻量型的数据库,是遵守ACID(原子性.一致性.隔离性.持久性)的关联式数据库管理系统,多用于嵌入式开发中. SQLite的数据类型:Typelessness(无类型), 可以保 ...

  3. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-4.在线教育后台数据库设计

    笔记 4.在线教育后台数据库设计     简介:讲解后端数据库设计    ,字段冗余的好处,及常见注意事项 1.数据库设计:          er图:          实体对象:矩形        ...

  4. manage.py migrate 报错

    第一个提示,setting里面的 STATICFILES_DIRS = (  os.path.join(BASE_DIR,'static')) 第二行的后面加','解决,这样可以被识别是tuple. ...

  5. 九十一：CMS系统之cms用户模型定义

    数据库信息 DEBUG = TrueSQLALCHEMY_DATABASE_URI = 'mysql+pymysql://root:123456@127.0.0.1:3306/test'SQLALCH ...

  6. 【查看修复HDFS中丢失的块】org.apache.hadoop.hdfs.BlockMissingException: Could not obtain block: BP

    首先得好看有多少损坏的文件,其中需要使用Hadoop的fsck命令: 以下是官方解释 用法:  hadoop fsck  //路径 以上将会展示该路径下所有受损的文件 最后用-delete 可以清除掉 ...

  7. vscode中如何加eslint检查工具

    代码的质量对开发人员个人的成长以及公司的发展至关重要,所以如何使用把控代码的质量是大家经常思考的问题.除了代码审核之外,代码检查工具成了把控代码质量的第一道门槛,非常好用,可以建立一些团队约定的代码风 ...

  8. GIL全局解释器锁，线程池与进程池 同步异步，阻塞与非阻塞，异步回调

    GIL全局解释器锁 1.什么是GIL 官方解释:'''In CPython, the global interpreter lock, or GIL, is a mutex that prevents ...

  9. 记录运行时间 StopWatch

  10. 【VS开发】使用CTabView分割多页卡窗口

    一般书中介绍的是使用CSplitterWnd来拆分窗口实现多视图,CSplitterWnd中的CreateClient可以保存其创建的pCreateContext指针,以便子视图共享Document. ...