jQuery -- 知识点回顾篇（四）：jQuery 遍历

通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

1. 向上遍历 DOM 树，查找元素的祖先。

　　parent() 方法，parents() 方法，parentsUntil() 方法。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

            //parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。

            //parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

            //parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

            $("#btn_parent").click(function(){

                $("#myDiv3").parent().css({"color":"red","border":"3px solid red"});

            });

            $("#btn_parents").click(function(){

                $("#myDiv3").parents().css({"color":"red","border":"3px solid red"});

            });

            $("#btn_parentsUntil").click(function(){

                $("#myDiv3").parentsUntil("body").css({"color":"red","border":"3px solid red"});

            });

        });

    </script>

</head>

<body>

    <button type="button" id="btn_parent">parent</button><br/>

    <button type="button" id="btn_parents">parents</button><br/>

    <button type="button" id="btn_parentsUntil">parentsUntil</button><br/>

    <div id="myDiv1" style="width:210px;height:90px;padding: 10px;border:2px solid blue;">

        <div id="myDiv2" style="width:140px;height:60px;padding: 10px;border:2px solid green;" >

            <div id="myDiv3" style="width:70px;height:30px;padding: 10px;border:2px solid yellow;" >

            </div>

        </div>

    </div>

</body>

</html>

　　

　　

2. 向下遍历 DOM 树，查找元素的后代。children() 方法，find() 方法。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

            //children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。

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

            $("#btn_children1").click(function(){

                $("#myDiv1").children().css({"color":"red","border":"3px solid red"});

            });

            $("#btn_children2").click(function(){

                $("#myDiv1").children("div.class1").css({"color":"red","border":"3px solid red"});

            });

            $("#btn_find1").click(function(){

                $("#myDiv1").find("div").css({"color":"red","border":"3px solid red"});

            });

            $("#btn_find2").click(function(){

                $("#myDiv1").find("*").css({"color":"red","border":"3px solid red"});

            });

        });

    </script>

</head>

<body>

    <button type="button" id="btn_children1">children</button><br/>

    <button type="button" id="btn_children2">children_class1</button><br/>

    <button type="button" id="btn_find1">findDiv</button><br/>

    <button type="button" id="btn_find2">find*</button><br/>

    <div id="myDiv1" style="width:210px;height:140px;padding: 10px;border:2px solid blue;">

        <div id="myDiv2" style="width:140px;height:60px;padding: 10px;border:2px solid green;" >

            <div id="myDiv3" style="width:70px;height:40px;padding: 10px;border:2px solid yellow;" >

                <p id="myP1" style="width:50px;height:20px;padding: 3px;border:2px solid black;" >

                </p>

            </div>

        </div>

        <div Class="class1" style="width:140px;height:30px;padding: 10px;border:2px solid green;" >

        </div>

    </div>

</body>

</html>

 

 

3. 遍历元素的同胞元素：siblings() 方法，next() 方法，nextAll() 方法，nextUntil() 方法。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

            //children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。

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

            $("#btn_siblings").click(function(){

                $("#myDiv21").siblings().css({"color":"red","border":"3px solid red"});

            });

            $("#btn_next").click(function(){

                $("#myDiv21").next().css({"color":"red","border":"3px solid red"});

            });

            $("#btn_nextAll").click(function(){

                $("#myDiv21").nextAll().css({"color":"red","border":"3px solid red"});

            });

            $("#btn_nextUntil").click(function(){

                $("#myDiv21").nextUntil("h5").css({"color":"red","border":"3px solid red"});

            });

        });

    </script>

</head>

<body>

    <button type="button" id="btn_siblings">siblings</button><br/>

    <button type="button" id="btn_next">next</button><br/>

    <button type="button" id="btn_nextAll">nextAll</button><br/>

    <button type="button" id="btn_nextUntil">nextUntil</button><br/>

    <div id="myDiv1" style="width:210px;height:190px;padding: 10px;border:2px solid blue;">

        <div id="myDiv21" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >

        </div>

        <div id="myDiv22" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >

        </div>

        <div id="myDiv23" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >

        </div>

        <h5>Hello</h5>

        <div id="myDiv24" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >

        </div>

    </div>

</body>

</html>

 

4. 过滤方法：基于其在一组元素中的位置来选择一个特定的元素。

　　　　first() 方法，last() 方法，eq() 方法，filter() 方法，not() 方法

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test JQuery</title>

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" >

        $(function(){

            //first() 方法返回被选元素的首个元素。

            //last() 方法返回被选元素的最后一个元素。

            //eq() 方法返回被选元素中带有指定索引号的元素。

            //filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

            //not() 方法返回不匹配标准的所有元素。

            $("#btn_first").click(function(){

                $("#myDiv1 div").first().css({"color":"red","border":"3px solid red"});

            });

            $("#btn_last").click(function(){

                $("#myDiv1 div").last().css({"color":"red","border":"3px solid red"});

            });

            $("#btn_eq").click(function(){

                $("#myDiv1 div").eq(2).css({"color":"red","border":"3px solid red"});

            });

            $("#btn_filter").click(function(){

                $("#myDiv1 *").filter("h5").css({"color":"red","border":"3px solid red"});

            });

            $("#btn_not").click(function(){

                $("#myDiv1 *").not("h5").css({"color":"red","border":"3px solid red"});

            });

        });

    </script>

</head>

<body>

    <button type="button" id="btn_first">first</button>

    <button type="button" id="btn_last">last</button>

    <button type="button" id="btn_eq">eq</button>

    <button type="button" id="btn_filter">filter</button>

    <button type="button" id="btn_not">not</button>

    <div id="myDiv1" style="width:210px;height:190px;padding: 10px;border:2px solid blue;">

        <div id="myDiv21" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >

        </div>

        <div id="myDiv22" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >

        </div>

        <div id="myDiv23" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >

        </div>

        <h5>Hello</h5>

        <div id="myDiv24" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >

        </div>

    </div>

</body>

</html>

jQuery -- 光阴似箭（四）：jQuery 遍历的更多相关文章

  1. JavaScript学习总结(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  2. python 学习笔记十四 jQuery案例详解（进阶篇）

    1.选择器和筛选器 案例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  3. 第四十四课：jQuery UI和jQuery easy UI

    jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...

  4. jQuery组织您钞四----jQuery操作DOM

    一.采用jQuery创建节点 节点是DOM基础设施.依据DOM产品规格,Node是一个很宽泛的概念,包含元素.属性.正文.档..实际开发过程中,要创建动态内容,主要操作的节点包括元素. 属性和文本. ...

  5. jQuery通用的全局遍历方法$.each()用法实例

    1.jQuery通用的全局遍历方法$.each()用法 2. test.json文件代码: 3. html代码 4.jQuery代码 <script src="jquery-1.3.1 ...

  6. 原生JS forEach()和map()遍历，jQuery$.each()和$.map()遍历

    一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...

  7. jQuery 第四章 实例方法 DOM操作之data方法

    jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data()  干嘛用的, 看淘宝上 有自定义的属性, 为data -  什么什么,   这是为了dom 跟数据有 ...

  8. JavaScript学习笔记(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  9. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  10. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

随机推荐

  1. python字符串类型

    python中的字符串 python中的字符串类型为str,也是平时操作的类型.但除了str类型,还有一个专门的名为"string"的模块(导入即可知),是很早以前没有str类型的 ...

  2. go基础系列：简介

    1.Go简介 Go语言是编译型.静态类型的类C的语言,并带有GC(垃圾收集器,garbage collection).这意味着什么? 另外,Go是一种非常严格的语言,它几乎总是要求我们"以标 ...

  3. 华为路由器 IPSec 与 GRE 结合实验

    二者结合的目的 GRE 支持单播.组播.广播,IPSec 仅支持单播.GRE 不支持对于数据完整性以及身份认证的验证功能,并且也不具备数据加密保护.而 IPSec 恰恰拥有强大的安全机制.达到了互补的 ...

  4. lwIP 2.0.3 移植笔记（基于 STM32 + μC/OS-II）

    本次实验参考自原子已经移植好的 LWIP(版本:1.4.1)模板来进行的,感谢! 由于要做的一个小项目要用到网络通信,而且想要加上 UC/OS-II 跑个系统,感觉 LWIP 这个轻量级的 IP 协议 ...

  5. C# 7.1中default关键字的新用法

    default 关键字有两类用法 switch语句中指定默认标签 默认值表达式 switch 语句 int caseSwitch = 1; switch (caseSwitch) { case 1: ...

  6. [转]php hash_pbkdf2 和 node.js crypto.pbkdf2

    http://php.net/manual/en/function.hash-pbkdf2.php https://nodejs.org/api/crypto.html#crypto_crypto_p ...

  7. input 属性为 number，maxlength不起作用如何解决？

    <input type="text"  maxlength="5" />   效果ok, 当 <input type="number ...

  8. CentOS 安装 jdk

    1.首下载CentOS对应的jdk压缩包. 2.通过secureCRT工具远程连接目标服务器. 3.通过rz命令上传jdk压缩包到linux服务器. 4.解压缩上传的jdk压缩包 tar -zxvf ...

  9. HTML元素被定义为块级元素或内联元素。那么什么是块级元素，什么是内联元素呢

    块级元素(block)特性: 块级元素在浏览器显示时,通常会以新行来开始(和结束). 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制;就像以前用到的 ...

  10. 【机器学习】Google机器学习工程的43条最佳实践

    https://blog.csdn.net/ChenVast/article/details/81449509 本文档旨在帮助那些掌握机器学习基础知识的人从Google机器学习的最佳实践中获益.它提供 ...