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. 1、docker centos 安装

    Docker for CentOS: 第一步:使用官方yum仓库 [root@linux-node1 ~]# yum install -y yum-utils [root@linux-node1 ~] ...

  2. Python全栈开发：Mysql(一)

    一.概述 1.什么是数据库 ? 答:数据的仓库,如:在ATM的示例中我们创建了一个 db 目录,称其为数据库 2.什么是 MySQL.Oracle.SQLite.Access.MS SQL Serve ...

  3. 【默默努力】react-drag-grid

    先放项目地址:https://github.com/Bilif/react-drag-grid 项目运行效果 感谢无私开源的程序员 先看项目入口文件 //index.js import React f ...

  4. 筛法求欧拉函数（poj2478

    求1-n的欧拉函数的值 #include <iostream> #include <cstdio> #include <queue> #include <al ...

  5. HTML - 内嵌标签相关

    <html> <head></head> <body> <!-- iframe (内嵌标签) src : 要显示的网页资源路径(本地资源或网络资源 ...

  6. 分享一个现代的，免费的，简单而有效的编辑器Vis

    Vis是一个免费的开源,类似Vi的代码编辑器,它扩展了vi的模态编辑,内置支持使用相同编辑器的基于结构正则表达式的命令语言实现的多个游标/选择.并将其与基于sam结构正则表达式的命令语言相结合. Vi ...

  7. 高效开发 Dubbo？用 Spring Boot 可得劲！

    不仅简化了 Dubbo 基于 xml 配置的方式,也提高了日常开发效率,甚至提升了工作幸福感. 为了节省亲爱的读者您的时间,请根据以下2点提示来阅读本文,以提高您的阅读收获效率哦. 如果您只有简单的 ...

  8. python 版本配置问题

    环境变量里有anaconda 但是命令行输入python却并不是anaconda里的python 这个现象的产生是由于anaconda在环境变量里的顺序靠后,python2.7已经在其他环境变量里被找 ...

  9. LintCode刷题笔记-- A+B problem

    标签: 位运算 描述 Write a function that add two numbers A and B. You should not use + or any arithmetic ope ...

  10. 实用的 JavaScript 调试小技巧

    ‘debugger;’ 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断 ...