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. JS流程控制语句 重复重复（for循环）语句结构： for(初始化变量;循环条件;循环迭代) { 循环语句 }

    重复重复(for循环) 很多事情不只是做一次,要重复做.如打印10份试卷,每次打印一份,重复这个动作,直到打印完成.这些事情,我们使用循环语句来完成,循环语句,就是重复执行一段代码. for语句结构: ...

  2. Redis理解和使用

    摘抄并用于自查笔记 1. Redis简介 我们日常Java Web开发,一般使用数据库进行存储,在数据量较大的情况下,单一使用数据库保存数据的系统会因为面向磁盘,磁盘读写速度比较慢而存在严重的性能弊端 ...

  3. thinkphp 数据写入

    直线电机优势 ThinkPHP的数据写入操作使用add方法,使用示例如下: $User = M("User"); // 实例化User对象 $data['name'] = 'Thi ...

  4. Django之深入了解模板层

    目录 模板语法 模板传值 过滤器 标签 自定义过滤器和标签 模板继承 模板导入 模板语法 前端模板的语法只记住两种就行了. {{ xxx }} 变量相关的 { % % } 逻辑相关的 模板传值 我们通 ...

  5. css正則匹配、模糊匹配

    //所有class包含font-red的p标签 p[class~="font-red"] {color: red;} [abc^="def"] 选择 abc 属 ...

  6. HTTP各版本的区别

    什么是HTTP和HTTPS? HTTP是浏览器与服务器之间以明文的方式传送内容的一种互联网通信协议. HTTPS是在HTTP的基础上主要基于SPDF协议结合SSL/TLS加密协议,客户端依靠证书验证服 ...

  7. 简单科普下hosts文件原理与制作

    简单科普下hosts文件原理与制作 hosts文件是一个用于储存计算机网络中各节点信息的计算机文件.这个文件负责将主机名映射到相应的IP地址.hosts文件通常用于补充或取代网络中DNS的功能.和DN ...

  8. Java-slf4j：sfl4j

    ylbtech-Java-slf4j:sfl4j 1.返回顶部 1. SLF4J,即简单日志门面(Simple Logging Facade for Java),不是具体的日志解决方案,它只服务于各种 ...

  9. Android之RelativeLayout相对布局

    1.相关术语解释 1.基本属性 gravity :设置容器内组件的对齐方式 ignoreGravity : 设置该属性为true的组件,将不受gravity属性的影响 2.根据父容器定位 layout ...

  10. 北京信息科技大学校赛 题解 | AK记录贴

    比赛链接:https://ac.nowcoder.com/acm/contest/940#question 花了一天时间全部解决,题目不难,全是基础题+模板题. A - kotori和糖果 链接:ht ...