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. 微信小程序前后台调用

    // pages/ruquestexer/index.js Page({ /** * 页面的初始数据 */ data: { }, getUserData:function(){ wx.request( ...

  2. html---三列布局

    三列布局 1一 1.两边固定 当中自适应 2.当中列要完整显示 3.当中列要优先加载 <!DOCTYPE html> <html> <head> <meta ...

  3. loj6005 [网络流24题]最长递增子序列

    题意:给你一个序列,求不严格上升lcs长度/最多有几个没有重复元素的lcs/如果x1和xn可以多次出现,求最多有几个lcs?n<=500. 标程: #include<cstdio> ...

  4. LoadRunner函数的介绍

    LoadRunner函数的介绍 LoadRunner函数 一:通用函数 LoadRunner的通用函数以lr为前缀,可以在任何协议中使用.可以如下分类: 信息相关的函数: lr_error_messa ...

  5. 关于underline

    1, 有些系统可能看不到下划线的效果,这是不妨按着Alt键看看: 2, underline=#, 数字表示在哪个字母下显示下划线,从0开始

  6. echarts的使用——vue

    在vue的项目开发中,数据的可视化可以用echarts来实现,具体用法如下: (1)安装echarts,进入项目目录,执行如下命令,安装echarts: npm install echarts (2) ...

  7. TCP/IP四层模型和OSI七层模型（模型分层的作用是什么）

    TCP/IP四层模型和OSI七层模型的概念(模型分层的作用是什么) 一.总结 一句话总结: 减轻问题的复杂程度,一旦网络发生故障,可迅速定位故障所处层次,便于查找和纠错: 在各层分别定义标准接口,使具 ...

  8. 转-Pycharm中运行Python代码的几种方式

    转自:Pycharm中运行Python代码的几种方式 在pycharm中的Python代码运行会出现各种奇葩的问题,比如,密码输入时不显示或没有提示,给我们带来一些麻烦,下面介绍几种代码运行的几种方式 ...

  9. WinForm中Dispose()和Close()的区别

    WinForm中Dispose()和Close()的区别 Close()会自动调用Dispose()方法,但是如果窗体是模态的,则不会调用 所以ShowDialog的时候,要用Dispose(),Sh ...

  10. Linux常见问题解答--如何修复“tar：Exiting with failure status due to previous errors”

    问题: 当我用tar命令来创建一个压缩文件时,总在执行过程中失败,并且抛出一个错误说明"tar:由于前一个错误导致失败退出"("Exiting with failure ...