1、向下遍历

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.3.1.min.js"></script>

    <style>

        #div1{

            width:500px;

            height:200px;

            border:3px solid chocolate;

        }

        #div2{

            width:400px;

            height:150px;

            margin-top:10px;

            margin-left:10px;

            border:3px solid chocolate;

        }

        p{

            margin-left:10px;

            margin-top:10px;

            width:150px;

            height:80px;

            border:3px solid chocolate;

        }

    </style>

    <script>

        /*

        * children

        * find

        * */

        $(document).ready(function(){

           // $("#div1").children().css({border:"3px solid red"});

           // $("#div1").children("#div2").css({border:"3px solid red"});/*这两句效果是一样的*/

            /*children获取节点只能获取自己的儿子，而不能获取自己孙子节点的信息*/

            $("#div1").find("#p").css({border:"3px solid red"});

            /*find可以查找到自己的后代元素，所有的后代都可以在查找范围内

            * find方法需要带一个参数*/

        });

    </script>

</head>

<body>

<div id="div1">div1

    <div id="div2">div2

        <p id="p">p

            <a href="http://www.baidu.com">

            hello

            </a>

        </p>

    </div>

</div>

</body>

</html>

2、向上遍历

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.3.1.min.js"></script>

    <style>

        #div1{

            width:500px;

            height:200px;

            border:3px solid chocolate;

        }

        #div2{

            width:400px;

            height:150px;

            margin-top:10px;

            margin-left:10px;

            border:3px solid chocolate;

        }

        p{

            margin-left:10px;

            margin-top:10px;

            width:150px;

            height:80px;

            border:3px solid chocolate;

        }

    </style>

    <script>

        /*

        * parent()

        * parents()

        * parentsUntil()

        * */

        $(document).ready(function(){

           // $("a").parent().css({border:"3px solid red"});/*向上的一级父元素变成这个样式*/

           // $("a").parents().css({border:"3px solid red"});/*向上的所有父元素都要变成这个样式*/

           $("a").parents("#div1").css({border:"3px solid red"});/*向上的某一个父元素要变成这个样式*/

           // $("a").parentsUntil("#div1").css({border:"3px solid red"});/*向上的所有父元素直到div1之前的都要变为这个样式（a和div1之间的元素）*/

        });

    </script>

</head>

<body>

<div id="div1">div1

    <div id="div2">div2

        <p id="p">p

            <a href="http://www.baidu.com">

            hello

            </a>

        </p>

    </div>

</div>

</body>

</html>

3、同级遍历

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.3.1.min.js"></script>

    <script>

        /*  siblings()

            next()

            nextAll()

            nextUntil() //until是区间的意思

            prev() //下面三个是向前算的方法

            prevAll()

            prevUntil()

        */

        $(document).ready(function(){

           // $("h4").siblings().css({border:"3px solid red"});/*修改掉除了给定元素的所有同级元素为给定的样式*/

           // $("h4").next().css({border:"3px solid red"});/*修改掉除了给定元素的所有同级元素为给定的样式*/

           // $("h2").nextAll("h6").css({border:"3px solid red"});/*包括h2在内的下面所有同级元素*//*这里加参数是下面所有的某一类元素，不加参数就是默认所有的同级元素*/

           $("h2").nextUntil("h4").css({border:"3px solid red"});/*h2到给定的元素之间的所有元素*/

        });

    </script>

    <style>

        .classa *{

            display:block;

            border:3px solid gray;

            color:gray;

            padding:5px;

            margin:15px;

        }

    </style>

</head>

<body>

<div class="classa">

    <p>p</p>

    <h2>h2</h2>

    <h3>h3</h3>

    <h4>h4</h4>

    <h5>h5</h5>

    <h6>h6</h6>

</div>

</body>

</html>

4、过滤

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.3.1.min.js"></script>

    <script>

        /*

        * first()//寻找同样元素的第一个

        * last()//寻找同样元素的最后一个

        * eq()

        * filter()

        * not()

        * */

        $(document).ready(function(){

            // $("div p").first().css({backgroundColor:"red"});

            /*jQuery中的backgroundColor和css中的background-color还不一样呢。。。666*/

            // $("div p").first().css("background-color","red");

            /*jQuery中的backgroundColor和css中的background-color还不一样呢。。。666*/

            // $("div p").eq(1).css("background-color","red");

            /*eq()方法指定第几个元素，索引从0开始*/

            // $("div p").filter(".plei1").css("background-color","red");/*选中满足要求的*/

            $("div p").not(".plei1").css("background-color","red");/*过滤给定要求的*/

        });

    </script>

    <style>

    </style>

</head>

<body>

    <div>

        <p class="plei1">div1的p</p>

    </div>

    <div>

        <p>div2的p</p>

    </div>

    <div>

        <p class="plei1">div3的p</p>

    </div>

    <div>

        <p>div3的p</p>

    </div>

</body>

</html>

前端（jQuery）（8）-- jQuery元素遍历的更多相关文章

  1. 前端笔记之jQuery（下）事件&节点操作&净位置&拖拽&页面卷动值&遍历JSON

    一.监听事件大全 1.1 JavaScript事件 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onfoc ...

  2. js进阶 11-14 jquery如何实现元素的替换和遍历

    js进阶  11-14  jquery如何实现元素的替换和遍历 一.总结 一句话总结:替换:replaceAll() 与 replaceWith().遍历:each(). 1.replaceAll() ...

  3. jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

  4. Python学习（二十三）—— 前端基础之jQuery

    转载自http://www.cnblogs.com/liwenzhou/p/8178806.html 一.jQuery入门 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQue ...

  5. 前端基础之:JQuery(可编辑版)

     前端基础之jquery   一 jQuery是什么? ［1］   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］   ...

  6. 第四篇 前端学习之JQuery基础

    一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...

  7. 前端基础 之 jQuery

    浏览目录 jQuery介绍 jQuery的优势 jQuery对象 jQuery内容 一.jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户 ...

  8. 进击的Python【第十六章】：Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  9. 前端(5)之jQuery

    前端(5)之jQuery jQuery介绍 1.jQuery是一个轻量级的,兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现 ...

  10. 前端第四篇---前端基础之jQuery

    前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...

随机推荐

  1. mysqldump使用记录

    #导出单个数据库:结构 无数据 [root@localhost ~]#mysqldump -h127.0.0.1 -uroot -p --opt --no-data db_name >~/db_ ...

  2. 使用log4j实现日志API

    添加SLF4J依赖,用于提供日志API, 使用log4j作为实现 1.pom.xml添加SLF4J依赖 <!-- SLF4J --> <dependency> <grou ...

  3. C++ AOP手法

    1.代理模式 2.模版 3.NVI(non-virtual interface) 参考:https://www.cnblogs.com/qicosmos/p/4772389.html <effe ...

  4. LUGOU P1092 虫食算

    传送门 解题思路 刚开始按yzy神犇给的方法写,就是每次要把能算出来的都算出来,结果因为太菜写挂了..后来直接爆搜水过.. #include<iostream> #include<c ...

  5. Cannot find module '@babel/plugin-proposal-class-properties'

    cnpm install --save-dev @babel/plugin-proposal-class-properties

  6. Origin使用自定义函数拟合曲线函数

    (2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年10月28日) 最近应该是六叔的物化理论作业要交了吧,很多人问我六叔的作业里面有两道题要怎么进行图像函数的拟合.综 ...

  7. java基础温习 -- Thread

    启动线程两种方式: 1. 实现Runnable接口: 2. 继承Thread类. 选用:能使用接口,就不用从Thread类继承.    使用继承的方法不够灵活,从这个类继承了就不能从其他类继承: 实现 ...

  8. Compile_Netgen_WITH_OpenCascade

    title: Compile_Netgen_WITH_OpenCascade date: 2016-04-23 21:14:42 tags: 结合OCCT编译Netgen date: 2016-04- ...

  9. C++面向对象高级编程（下）-Geekband

    11, 组合和继承 一, Composition 复合  has-a的关系 简单来讲, 就是: class A{     classB b1;   }; 这里讲到Adapter设计模式: templa ...

  10. Leetcode958. Check Completeness of a Binary Tree二叉树的完全验证性

    给定一个二叉树,确定它是否是一个完全二叉树. 百度百科中对完全二叉树的定义如下: 若设二叉树的深度为 h,除第 h 层外,其它各层 (1-h-1) 的结点数都达到最大个数,第 h 层所有的结点都连续集 ...