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. 【特别篇】NOIP2017划水记

    本文是在精分状态下写的.. 逻辑混乱.. 记忆模糊.. 如果有不符合事实的地方欢迎各位当事人拿出证据指正.. 可能会很啰嗦 很矫情 很zz 不过不要对本蒟蒻进行人身攻击 武力威胁 他还是个宝宝(大雾) ...

  2. Ascii码 、16进制与 char

            对于一个非计算机专业出身的人,以前只知道计算机中所有的数据都是以二进制形式进行存储,计算,通信的.但是人类文明中,主要的信息展现以文本的形式展现的.如果使用内存中的0和1来表示文本一直 ...

  3. UVALive-3722 留个坑，为什么费马小定理求逆元不对？？

    #include <iostream> #include <cstdlib> #include <queue> #include <algorithm> ...

  4. day08 网络设置、软件包管理

    网络设置 ifconfig //最小化安装时不可用,需要安装安装包,命令为查看网卡信息 yum install net-tools mtu 网卡的最大发送字节 iptables -F 清掉防火墙配置 ...

  5. Ionic3 demo TallyBook 实例3

    1.准备应用相关组件 echarts--直接 npm install 安装即可 2.home.ts import { Component,ViewChild,ElementRef } from '@a ...

  6. JVM的内存空间

    一.JVM运行起来,就会给内存划分空间,这块空间成为运行时数据区.运行时数据区主要划分为以下几部分内容: 1.栈 每一个线程运行起来的都会对应一个栈(线程栈),栈中的数据是该线程独有的,不会产生资源共 ...

  7. LUOGU P1505 [国家集训队]旅游 (树链剖分+线段树)

    传送门 解题思路 快被调死的码农题,,,其实就是一个边权下放到点权的线段树+树剖. #include<iostream> #include<cstdio> #include&l ...

  8. javascript 释放变量

    JavaScript 释放变量 在Javascript是可以使用“delete”来手动删除变量,通过这样的方法让GC(Garbage collection)来回收内存,但在JS中并不是所有的变量都可以 ...

  9. python中检测mysql的主键唯一性异常

    有两种方法: 1.直接检测是什么异常(查mysql文档找出异常代码) import os import mysql_operate.mysql_connect as mysql import re d ...

  10. fiddler报错：creation of the root certificate was not successful 证书安装不成功

    fiddler提示:creation of the root certificate was not successful 证书安装不成功 首先 找到Tools——>Options 在弹出的菜单 ...