jQuery遍历与删除添加节点

个人名片：
😊作者简介：一名大二在校生
🤡 个人主页：坠入暮云间x
🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡

文章目录

    • 祖先元素
    • each()方法
    • 一、添加节点元素addNode
    • 二、删除节点
      • remove() 方法
    • empty() 方法
    • 复制节点与替换节点

jQuery遍历

遍历：jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

jQuery遍历
遍历：jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

在这里插入图片描述

  1. <div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
  2. <ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
  3. 左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
  4. <span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
  5. 两个 <li> 元素是同胞（拥有相同的父元素）。
  6. 右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
  7. <b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

祖先元素

1**.parent()**方法直接返回被选元素的直接父元素

$(document).ready(function(){
  $("span").parent();
});

2.parents() 方法

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。

3.parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jQuery文件/jquery-1.12.4.js"></script>
</head>

<body id="body1">
    <div id="div1">
        <ul id="ul1">
            <li id="li1">
                <span id="demo">hello</span>
            </li>
        </ul>
    </div>
</body>
<script>
    //parent()  获取父元素
    //parents()  获取所有祖先元素
    //parentsUntil(e)  获取e之后的所有祖先元素

    //1.获取hello的父元素的id
    //console.log($("#demo").parent().attr("id"));

    //2.获取hello的所有祖先元素的id
    // $("#demo").parents().each(function(){
    //     console.log($(this).attr("id"));
    // })

    //3.获取hello所有的div祖先的id
    // $("#demo").parents("div").each(function(){
    //     console.log($(this).attr("id"));
    // })
    //4.获取hello的祖先，且祖先在body之后
    $("#demo").parentsUntil("body").each(function(){
        console.log($(this).attr("id"));
    })
</script>

</html>

each()方法

each()： 方法为每个匹配元素规定要运行的函数。
语法：$(selector).each(function*(index,element)*)

在这里插入图片描述

代码实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jQuery文件/jquery-1.12.4.js"></script>
</head>

<body>

    <ul>
        <li>咖啡</li>
        <li>牛奶</li>
        <li>果汁</li>
        <li>红茶</li>
    </ul>

</body>
<script>
    //1.将ul下的所有li的文本变为“你好”
    //通过jQuery内部机制【隐式迭代】实现的
  //  $("ul li").text("你好");

    //2.循环输出所有的饮料
    //index:索引值 element:当前元素（一般用this即可）
    //这两个参数都是可以省略的
        // $("ul li").each(function(index,element){
        //     console.log(index+"_____"+element.innerHTML);
        // })
    //3.当索引为偶数时，将li的文本变为红色
    $("ul li").each(function(index){
           if(index % 2==0){
            $(this).css("color","red");
            $(this).css('opacity',(index+1)/10)
           }
        }) 
        $("ul li:even").css("color","red")
    //4.使用循环实现渐变 
    $("ul li").each(function(index){
        $(this).css("color","red");
        $(this).css('opacity',(index+1)/10)
        }) 
</script>

</html>

一、添加节点元素addNode

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jQuery文件/jquery-1.12.4.js"></script>
</head>

<body>
    <ul>
        <li>咖啡</li>
        <li>牛奶</li>
        <li>果汁</li>
        <li>红茶</li>
    </ul>
    <button>末尾添加</button>
    <button>开头添加</button>
    <button>牛奶之前添加</button>
    <button>牛奶之后添加</button>
</body>
<script>
    //1.在ul子节点列表末尾添加奶茶1、奶茶2、奶茶3
    //第一步创建节点
    $("button:first").click(function(){
        //方式一：使用$()方法创建节点
        var li1 = $("<li></li>").text("奶茶1");
        //方式2：使用html标签创建节点
        var li2="<li>奶茶2</li>";
        //方法3：使用dom方法创建节点
        var li3=document.createElement("li");
        li3.innerHTML="奶茶3"
        //插入节点
        //方法1：使用append()
    //    $("ul").append(li1,li2,li3)
        //方法2：使用appendTo() 一次只能添加一个节点
        $(li1).appendTo("ul")
        $(li2).appendTo("ul")
        $(li3).appendTo("ul")
    })

    //2.在ul子节点列表开头添加冰淇淋
        $("button:contains('开头添加')").on("click",function() {
            var li=$("<li></li>").text("冰淇淋").css("color","red");
            $("ul").prepend(li);
            $(li).prependTo("ul")
        })

    //3.在“牛奶”之前加巧克力牛奶
        $("button:eq(2)").on("click",function(){
            //var li="<li style='color:red'>巧克力牛奶</li>";
            var li=$("<li></li>").text("巧克力牛奶").css("color","red")
            $("ul li:eq(1)").before(li)
        })

    //4.在“牛奶”之后加拿铁
    $("button:eq(3)").on("click",function(){
           var li=document.createElement("li");
           li.style.color="red"
           li.innerText="拿铁";
           $("ul li:eq(1)").after(li)
        })
</script>

</html>

二、删除节点

remove() 方法

remove() - 删除被选元素（及其子元素）

$("#div1").remove();

empty() 方法

empty() 方法删除被选元素的子元素。
语法：

$("#div1").empty();

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jQuery文件/jquery-1.12.4.js"></script>
</head>

<body>
    <ul>
        <li>咖啡</li>
        <li>牛奶</li>
        <li>果汁</li>
        <li>红茶</li>
    </ul>
    <ul>
        <li>波霸奶茶</li>
        <li>乌龙奶茶</li>
        <li>草莓奶茶</li>
    </ul>
    <button>删咖啡</button>
    <button>删牛奶</button>
    <button>删牛奶下面的</button>
    <button>删所有奶茶</button>
</body>
<script>
    //ele.remove(); 删除ele节点
        $("button:first").click(function(){
            $("ul:first li:first").remove();
        })  
        $("button:eq(1)").click(function(){
            $("ul:first li").remove(":eq(1)");
        })
        $("button:eq(2)").click(function(){
            $("ul:first li:gt(1)").remove();
            // $("ul:first li").each(function(index){
            //     if(index>1){
            //         $(this).remove();
            //     }
           // })
        })
        $("button:eq(3)").click(function(){
            $("ul:eq(1)").empty()
        })
    //ele.empty(); 删除ele节点下的所有子节点，注意，ele本身还在
    
</script>

</html>

复制节点与替换节点

 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jQuery文件/jquery-1.12.4.js"></script>
</head>

<body>
    <div id="div1">
        <p style="color:red;font-size: 30px;">大家好，我是p
            <span style="color:orange">我是p里面的span1</span>
            <span style="color:green">我是p里面的span2</span>
        </p>
    </div>
    <button id="copyNode">复制节点</button>
    <button id="replaceNode">替换节点</button>
</body>
<script>
    $("#copyNode").click(function(){
        //第一步复制节点clone()
        var ele=$("#div1 p:first span:eq(1)").clone();
        //第二步插入
        $("#div1 p:first").append(ele)
    })

    //replaceWith()
    //replaceAll()
    $("#replaceNode").click(function(){
        //写法1：
       // $("<button>注册</button>").replaceAll("#div1 p:first span:eq(1)");
        $("#div1 p:first span:eq(1)").replaceWith("<button>注册</button>")
    })
</script>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/239617.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

极简壁纸js逆向(混淆处理)

极简壁纸js逆向(混淆处理)

本文仅用于技术交流&#xff0c;不得以危害或者是侵犯他人利益为目的使用文中介绍的代码模块&#xff0c;若有侵权请练习作者更改。 之前没学js&#xff0c;卡在这个网站&#xff0c;当时用的自动化工具&#xff0c;现在我要一雪前耻。 分析 第一步永远都是打开开发者工具进…
阅读更多...
接口管理——Swagger

接口管理——Swagger

Swagger是一个用于设计、构建和文档化API的工具集。它包括一系列工具&#xff0c;如Swagger Editor&#xff08;用于编辑Swagger规范&#xff09;、Swagger UI&#xff08;用于可视化API文档&#xff09;和Swagger Codegen&#xff08;用于根据API定义生成客户端库、server stu…
阅读更多...
【FPGA】Verilog：BCD 加法器的实现 | BCD 运算 | Single-level 16 bit 超前进位加法器 | 2-level 16-bit 超前进位加法器

【FPGA】Verilog：BCD 加法器的实现 | BCD 运算 | Single-level 16 bit 超前进位加法器 | 2-level 16-bit 超前进位加法器

0x00 BCD 运算 在 BCD 中，使用4位值作为操作数，但由于只表示 0 到 9 的数字，因此只使用 0000 到 1001 的二进制数，而不使用 1010 到 1111 的二进制数（dont care）。 因此，不能使用常规的 2complement 运算来计算，需要额外的处理：如果 4 位二进制数的运算结果在 1010 …
阅读更多...
Rxjs 学习笔记 - 简化版

Rxjs 学习笔记 - 简化版

RxJS 提供了一套完整的异步解決方案&#xff0c;让我们在面对各种异步行为&#xff08;Event, AJAX, Animation 等&#xff09;都可以使用相同的 API 做开发。 前置知识点 同步&#xff08;Synchronous&#xff09;就是整个处理过程顺序执行&#xff0c;当各个过程都执行完毕&…
阅读更多...
【acwing】92. 递归实现指数型枚举

【acwing】92. 递归实现指数型枚举

穿越隧道 递归枚举、位运算 方法① 从1到n&#xff0c;顺序访问每位数&#xff0c;是否选择&#xff0c;每位数有两种状态&#xff0c;选1或不选0. AC代码如下&#xff1a; #include <iostream> using namespace std;const int N 100; // bool st[N]; int n;void dfs(in…
阅读更多...
JVM面试

JVM面试

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.JVM 的整体结构2.类加载做了哪些事情?类加载器有哪些&#xff1f;双亲委派和沙箱安全 3.Java虚拟机栈是什么4.方法区的理解HotSpot 中方法区的演进方法区的内部结…
阅读更多...
XSS漏洞 深度解析 XSS_labs靶场

XSS漏洞 深度解析 XSS_labs靶场

XSS漏洞 深度解析 XSS_labs靶场 0x01 简介 XSS原名为Cross-site Sciprting(跨站脚本攻击)&#xff0c;因简写与层叠样式表(Cascading style sheets)重名&#xff0c;为了区分所以取名为XSS。 这个漏洞主要存在于HTML页面中进行动态渲染输出的参数中&#xff0c;利用了脚本语…
阅读更多...
git常规操作流程(纯命令行操作)和一些注意事项

git常规操作流程(纯命令行操作)和一些注意事项

当你在单位拿到了git仓库,并利用公司给你的OA账号和邮箱完成了你的git基础配置,下面就是使用命令行的无错固定操作流程 如果你很着急,你可以直接跳到最后的总结部分 具体步骤 1.从仓库克隆代码到本地 这里的[codeUrl]就是你仓库的地址,当你在仓库点击图中绿色位置时,剪贴板…
阅读更多...
1841_在Windows上安装emacs irony server

1841_在Windows上安装emacs irony server

Grey 全部学习内容汇总&#xff1a;GitHub - GreyZhang/editors_skills: Summary for some common editor skills I used. 1841_在Windows上安装emacs irony server emacs有很多优点&#xff0c;配置出来不仅用着顺手而且有一定的成就感。但是&#xff0c;对于大多数人来说或…
阅读更多...
001两数之和

001两数之和

题意 给出一个数组和一个目标值&#xff0c;让你在数组中找出和为目标值的两个数&#xff0c;并且这两个数在数组中的下标&#xff08;索引&#xff09;不同。 示例 输入&#xff1a;nums[2,7,11,15],target9 输出&#xff1a;[0,1] 解释&#xff1a;因为nums[0]nums[1]9&#…
阅读更多...
苹果app应用ipa文件程序开发后如何运行到苹果iOS真机上测试？

苹果app应用ipa文件程序开发后如何运行到苹果iOS真机上测试？

在苹果应用程序开发过程中&#xff0c;将app安装于真机进行测试是一个不可或缺的步骤&#xff0c;它可以帮助你检测app在实际设备上的性能表现及存在的潜在问题。这篇文章将详细阐述如何将开发好的苹果app&#xff08;.ipa文件&#xff09;安装到真机上进行测试。 图片来源&…
阅读更多...
DataFunSummit：2023年数据治理在线峰会-核心PPT资料下载

DataFunSummit：2023年数据治理在线峰会-核心PPT资料下载

一、峰会简介 数据治理&#xff08;Data Governance&#xff09;是组织中涉及数据使用的一整套管理行为。由企业数据治理部门发起并推行&#xff0c;关于如何制定和实施针对整个企业内部数据的商业应用和技术管理的一系列政策和流程。 数据治理是一个通过一系列信息相关的过程…
阅读更多...
【数据结构】堆的模拟实现

【数据结构】堆的模拟实现

前言:前面我们学习了顺序表、单链表、栈、队列&#xff0c;今天我们就开始新的学习吧&#xff0c;今天我们将进入堆的学习&#xff01;(最近博主处于低谷期)一起加油吧各位。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:数据结构 &…
阅读更多...
idea__SpringBoot微服务10——整合JDBC（新依赖）

idea__SpringBoot微服务10——整合JDBC（新依赖）

整合JDBC 完整项目地址&#xff1a;一、创建一个项目二、idea配置连接mysql三、创建yaml数据库连接配置文件四、测试一下&#xff0c;没有问题五、增删改查————————创作不易&#xff0c;如觉不错&#xff0c;随手点赞&#xff0c;关注&#xff0c;收藏(*&#xffe3;︶…
阅读更多...
P4 Qt基础控件——工具按钮toolButton（上）

P4 Qt基础控件——工具按钮toolButton（上）

前言 &#x1f3ac; 个人主页&#xff1a;ChenPi &#x1f43b;推荐专栏1: 《C_ChenPi的博客-CSDN博客》✨✨✨ &#x1f525; 推荐专栏2: 《Linux C应用编程&#xff08;概念类&#xff09;_ChenPi的博客-CSDN博客》✨✨✨ &#x1f33a;本篇简介 &#xff1a;这一章我们学一…
阅读更多...
[湖湘杯 2021 final]MultistaeAgency

[湖湘杯 2021 final]MultistaeAgency

文章目录 题目是给了源码&#xff0c;我们先来看web的main.go package mainimport ("bytes""crypto/md5""encoding/json""fmt""io""io/ioutil""log""math/rand""net/http""o…
阅读更多...
数据库系统相关概念

数据库系统相关概念

数据&#xff1a;描述事务的符号记录。 数据库(DB)&#xff1a;按一定的数据模型组织&#xff0c;描述和存储在计算机内的&#xff0c;有组织的&#xff0c;可共享的数据集合。 数据库管理系统(DBMS)&#xff1a;位于用户和操作系统之间的一层数据管理软件。主要功能包括&#…
阅读更多...
iframe 与主应用页面之间如何互相通信传递数据

iframe 与主应用页面之间如何互相通信传递数据

背景 当我们的Web页面需要复用现有网站的页面时&#xff0c;我们通常会考虑代码层面的抽离引用&#xff0c;但是对于一些过于复杂的页面&#xff0c;通过 iframe 嵌套现有的网站页面也是一种不错的方式&#xff0c;。目前我就职的项目组就有多个业务利用 iframe 完成业务的复用…
阅读更多...
【实用】sklearn决策树怎么导出规则

【实用】sklearn决策树怎么导出规则

目录 一、什么是决策树模型 0.1 什么是决策树 02.决策树模型有哪些 二、在sklearn中怎么训练一棵决策树 三、什么是决策树的规则 0.1决策树的决策规则 02. 决策树的决策规则是怎么存储的 四、怎么导出决策树的规则 4.1 导出决策树文本规则 4.2 导出可视化决策树 4.3…
阅读更多...
C++入门【3-C++ 变量类型】

C++入门【3-C++ 变量类型】

C 变量类型 变量其实只不过是程序可操作的存储区的名称。 在 C 中&#xff0c;有多种变量类型可用于存储不同种类的数据。 C 中每个变量都有指定的类型&#xff0c;类型决定了变量存储的大小和布局&#xff0c;该范围内的值都可以存储在内存中&#xff0c;运算符可应用于变量…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站