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

相关文章

电脑桌面文件删除了怎么找回来?别急,快速恢复攻略在此

在日常使用电脑的过程中,我们经常会遇到这样的情况:一不小心,桌面上的某个重要文件被删除了。这时,大多数人可能会感到惊慌失措,不知所措。 其实,不必过于担心,因为有很多方法可以帮助我们找回被删除的桌面文件。下面,就让我们一起来了解一下这些恢复桌面文件的方法吧。 一、使用撤销操作 如果我们刚刚删除了桌面上的文件,并且还没有进行其他操作,那么可以尝试使用撤销操作来恢复文件。在键盘上同时按下“C

学习记录:js算法(二十八):删除排序链表中的重复元素、删除排序链表中的重复元素II

文章目录 删除排序链表中的重复元素我的思路解法一:循环解法二:递归 网上思路 删除排序链表中的重复元素 II我的思路网上思路 总结 删除排序链表中的重复元素 给定一个已排序的链表的头 head , 删除所有重复的元素,使每个元素只出现一次 。返回 已排序的链表 。 图一 图二 示例 1:(图一)输入:head = [1,1,2]输出:[1,2]示例 2:(图

如何恢复回收站中已删除/清空的文件

回收站清空后如何恢复已删除的文件?是否可以恢复永久删除的文件?或者最糟糕的是,如果文件直接被删除怎么办?本文将向您展示清空回收站后恢复已删除数据的最佳方法。 回收站清空后如何恢复已删除的文件? “回收站清空后我还能恢复已删除的文件吗?” 答案是肯定的,但是在这种情况下您将需要一个  回收站恢复工具 来从回收站中检索文件: 错误/永久删除回收站或任何数字存储设备中的文件 直接删除的文件/

Linux 删除 当前下的 mysql-8.0.31 空文件夹

在Linux中,如果你想要删除当前目录下的名为mysql-8.0.31的空文件夹(即该文件夹内没有任何文件或子文件夹),你可以使用rmdir命令。但是,如果mysql-8.0.31文件夹并非完全为空(即它包含文件或子文件夹),rmdir命令会失败。 如果你的目标是删除mysql-8.0.31文件夹及其内部的所有内容(无论是否为空),你应该使用rm命令结合-r(或-R,它们是等价的)选项来递归地删

17 通过ref代替DOM用来获取元素和组件的引用

重点 ref :官网给出的解释是: ref: 用于注册对元素或子组件的引用。引用将在父组件的$refs 对象下注册。如果在普通DOM元素上使用,则引用将是该元素;如果在子组件上使用,则引用将是组件实例: <!-- vm.$refs.p will be the DOM node --><p ref="p">hello</p><!-- vm.$refs.child will be the c

react笔记 8-19 事件对象、获取dom元素、双向绑定

1、事件对象event 通过事件的event对象获取它的dom元素 run=(event)=>{event.target.style="background:yellowgreen" //event的父级为他本身event.target.getAttribute("aid") //这样便获取到了它的自定义属性aid}render() {return (<div><h2>{

如何删除不小心上传到git远程仓库中的.idea .iml文件

如果在开始的时候不配置,gitignore文件或者文件配置不正确,初始化上传的时候就会有一些不必要的信息上传上去 如果已经存在了一些文件在git远程仓库中,如。idea,.iml文件等。 首先在项目中定义一个  .gitignore文件,简单的实例如下也可以用idea中的gitignore插件 .DS_Storeclasses/*.settings/target/.classpath

Win8下如何快速查找和删除电脑中的病毒

Win8系统如何查找和删除病毒?检查你的电脑是否存在病毒的一种快速方法是使用 Windows Defender. 此恶意软件防护随 Windows 提供,可帮助识别和删除病毒、间谍软件和其他恶意软件。   注意:如果你使用的是 Windows RT,则 Windows Defender 会始终启用,并且不能关闭。   如果你使用的是 Windows 8,则可以根据自己的喜好运行由其他

DOM 添加节点

DOM 添加节点 在Web开发中,文档对象模型(DOM)是一个非常重要的概念。DOM是HTML和XML文档的编程接口,它将文档表示为节点树,允许开发人员通过JavaScript等脚本语言进行操作。在本文中,我们将探讨如何在DOM中添加节点,包括各种方法和最佳实践。 DOM节点简介 在DOM中,文档的每一个部分都是一个节点。主要的节点类型包括: 元素节点:HTML标签,例如<div>或<sp

【数据结构与算法 | 灵神题单 | 删除链表篇】力扣3217, 82, 237

总结,删除链表节点问题使用到列表,哈希表,递归比较容易超时,我觉得使用计数排序比较稳,处理起来也不是很难。 1. 力扣3217:从链表中移除在数组中的节点 1.1 题目: 给你一个整数数组 nums 和一个链表的头节点 head。从链表中移除所有存在于 nums 中的节点后,返回修改后的链表的头节点。 示例 1: 输入: nums = [1,2,3], head = [1,2,3,