jq: dom-删除、包裹

2024-08-20 16:48
文章标签 删除 dom 包裹 jq

本文主要是介绍jq: dom-删除、包裹,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

replaceAll() 使用元素把什么元素替换

        <!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>Page Title</title>
</head>
<body><ul><li class="one">one</li><li class="two">two</li></ul><li class="three">three</li><script src="../jquery-3.4.1.js"></script><script>$('.three').replaceAll($('.two'));</script>
</body>
</html>

v2-1906560bd4f77750f4f70073fe52d88e_b.jpg

replaceWith() 希望元素被什么元素替换

        $('.one').replaceWith($('.three'));

v2-37149df7c740bee46fe0bca4bf48b383_b.jpg

empty() 把元素的子元素都清空

        $('ul').empty();

v2-5645cd98d357bf89d5813efd93cf1569_b.jpg
        $('ul').html('');
$('ul').text('');

使用这两个方法也可以达到empty清空的方法。


删除方法: remove() 和 detach()

他们都是一模一样的删除方法,唯一的区别在于remove删除元素后,返回删除的元素不包含了事件函数;而detach删除之后返回的元素,还保留着事件函数。如:

        var one = $('.one').click(function() {$(this).remove();
});
var two = $('.two').click(function() {$(this).detach();
})$('.add').click(function() {
$('ul').append(function() {return one.add(two)})
})

v2-8aa37fbeb6270dc75b21ee28a63678ba_b.gif

clone 克隆元素

默认普通克隆,不会克隆事件函数

        var clone1 = $('.one').clone();  // 克隆元素后赋值
$('.clone').click(function() {   // 点击按钮添增
    $('ul').append(clone1);
})

v2-3cf19f9793d3e470ac1346c8adecf3e7_b.gif

如果传参true,那么也可以克隆事件函数

        var clone1 = $('.one').clone(true);

v2-3e2f4de9c9c21741dcd497dd18a6eaca_b.gif

wrap() 在元素上包裹一层什么元素

如:

        $('li').wrap('<div></div>')

v2-665c9e158bb721faba8e2f3b5efe7ce8_b.jpg

wrapAll() 把相同的元素合集包裹

先选中谁,就把其他的拿过来一起包裹。

        <ul><li class="one">one</li><li class="two">two</li>
</ul>
<li>我不在ul中</li>
<script src="../jquery-3.4.1.js"></script>
<script>$('li').wrapAll('<div></div>')
</script>

v2-6c1d2a5e1d8f9c676fc7a3e9973dd25e_b.jpg

wrapInner() 在元素的里层包裹

        $('li').wrapInner('<a></a>')

v2-56660efd4897f2bbcc7c1b9e1b9d09f8_b.jpg

unwrap() 解除元素的上层包裹(body不可以接触),不需要传参。

        $('li').unwrap()

v2-596453b7f80063c436d68f3ec2b302de_b.jpg

这篇关于jq: dom-删除、包裹的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1090629

相关文章

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型(范围、哈希、列表、键值),主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区(Range Partitioning1、新建分区表:2、分

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》:本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法: 示例:2.TRUNCATE语句✅ 基本语

一文详解Git中分支本地和远程删除的方法

《一文详解Git中分支本地和远程删除的方法》在使用Git进行版本控制的过程中,我们会创建多个分支来进行不同功能的开发,这就容易涉及到如何正确地删除本地分支和远程分支,下面我们就来看看相关的实现方法吧... 目录技术背景实现步骤删除本地分支删除远程www.chinasem.cn分支同步删除信息到其他机器示例步骤

python删除xml中的w:ascii属性的步骤

《python删除xml中的w:ascii属性的步骤》使用xml.etree.ElementTree删除WordXML中w:ascii属性,需注册命名空间并定位rFonts元素,通过del操作删除属... 可以使用python的XML.etree.ElementTree模块通过以下步骤删除XML中的w:as

Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

《Navicat数据表的数据添加,删除及使用sql完成数据的添加过程》:本文主要介绍Navicat数据表的数据添加,删除及使用sql完成数据的添加过程,具有很好的参考价值,希望对大家有所帮助,如有... 目录Navicat数据表数据添加,删除及使用sql完成数据添加选中操作的表则出现如下界面,查看左下角从左

如何在Mac上彻底删除Edge账户? 手动卸载Edge浏览器并清理残留文件技巧

《如何在Mac上彻底删除Edge账户?手动卸载Edge浏览器并清理残留文件技巧》Mac上的Edge账户里存了不少网站密码和个人信息,结果同事一不小心打开了,简直尴尬到爆炸,想要卸载edge浏览器并清... 如果你遇到 Microsoft Edge 浏览器运行迟缓、频繁崩溃或网页加载异常等问题,可以尝试多种方

Java实现删除文件中的指定内容

《Java实现删除文件中的指定内容》在日常开发中,经常需要对文本文件进行批量处理,其中,删除文件中指定内容是最常见的需求之一,下面我们就来看看如何使用java实现删除文件中的指定内容吧... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细介绍3.1 Ja

Redis过期删除机制与内存淘汰策略的解析指南

《Redis过期删除机制与内存淘汰策略的解析指南》在使用Redis构建缓存系统时,很多开发者只设置了EXPIRE但却忽略了背后Redis的过期删除机制与内存淘汰策略,下面小编就来和大家详细介绍一下... 目录1、简述2、Redis http://www.chinasem.cn的过期删除策略(Key Expir

使用C#删除Excel表格中的重复行数据的代码详解

《使用C#删除Excel表格中的重复行数据的代码详解》重复行是指在Excel表格中完全相同的多行数据,删除这些重复行至关重要,因为它们不仅会干扰数据分析,还可能导致错误的决策和结论,所以本文给大家介绍... 目录简介使用工具C# 删除Excel工作表中的重复行语法工作原理实现代码C# 删除指定Excel单元

Python对PDF书签进行添加,修改提取和删除操作

《Python对PDF书签进行添加,修改提取和删除操作》PDF书签是PDF文件中的导航工具,通常包含一个标题和一个跳转位置,本教程将详细介绍如何使用Python对PDF文件中的书签进行操作... 目录简介使用工具python 向 PDF 添加书签添加书签添加嵌套书签Python 修改 PDF 书签Pytho