jQuery学习笔记（三）DOM篇

最新推荐文章于 2024-04-27 16:43:08 发布
最新推荐文章于 2024-04-27 16:43:08 发布
阅读量144 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wlx001/article/details/86760720
版权

在这里插入图片描述

本文内容有：

  1. DOM内部插入append()与appendTo()
  2. DOM内部插入prepend()与prependTo()
  3. DOM外部插入after()与before()
  4. DOM外部插入insertAfter()与insertBefore()
  5. DOM节点删除之empty()的基本用法
  6. DOM节点删除之empty和remove区别
  7. DOM节点删除之保留数据的删除操作detach()
  8. DOM节点删除之detach()和remove()区别

（一）DOM内部插入append()与appendTo()

创建节点及节点属性

  • 创建元素：document.createElement
  • 设置属性：setAttribute
  • 添加文本：innerHTML
  • 加入文档：appendChild

几个问题：

  1. 每一个元素节点都必须单独创建
  2. 节点是属性需要单独设置，而且设置的接口不是很统一
  3. 添加到指定的元素位置不灵活
    最后还有一个最重要的：浏览器兼容问题处理

jQuery节点创建与属性的处理

  1. 把这个节点的结构给通过HTML标记字符串描述出来，通过 ( ) 函 数 处 理 ， ()函数处理， ()函数处理，(“html结构”)；
    eg：
var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
    $body.append(div)
选择器描述
append(content)向每个匹配的元素内部追加内容
$(A).appentTo(B)把所有匹配的元素追加到指定的元素集合中，把A追加到B中

（二）DOM内部插入prepend()与prependTo()

选择器描述
prepend向每个匹配的元素内部前置内容
prependTo把所有匹配的元素前置到指定的元素集合中，把A追加到B中

方法详解：

  • .prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).
  • .prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同
  • 对于.prepend() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数
  • 而.prependTo() 正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数。

这里总结下内部操作四个方法的区别：

  • append()向每个匹配的元素内部追加内容
  • prepend()向每个匹配的元素内部前置内容
  • appendTo()把所有匹配的元素追加到另一个指定元素的集合中
  • prependTo()把所有匹配的元素前置到另一个指定的元素集合中
//找到class="aaron1"的div节点
//然后通过prepend在内部的首位置添加一个新的p节点 
$('.aaron1').prepend('<p>prepend增加的p元素</p>')

//找到class="aaron2"的div节点
//然后通过prependTo内部的首位置添加一个新的p节点
$('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))

（三）DOM外部插入after()与before()

|:—|:—|
|.after(content)|在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点|
|.before(content)|在匹配元素的前面插入内容|

  • before与after都是用来对相对选中元素外部增加相邻的兄弟节点
  • 2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面
  • 2个方法都支持多个参数传递after(div1,div2,…) 可以参考右边案例代码

注意点：

  • after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入
  • before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插入

（四）DOM外部插入insertAfter()与insertBefore()

|:—|:—|
|.insertBefore(content)|在匹配元素前面插入集合中每个匹配的元素|
|.insertAfter(content)|在匹配元素后面插入集合中每个匹配的元素|

//在test1元素前后插入集合中每个匹配的元素
//不支持多参数
$('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1")) 

//在test2元素前后插入集合中每个匹配的元素
//不支持多参数
$('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))

（五）DOM节点删除之empty()的基本用法

这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。

过remove方法移除div及其内部所有元素，remove内部会自动操作事件销毁方法

//通过remove处理
$('.hello').remove()
//结果：<div class="hello"><p>慕课网</p></div> 全部被移除
//节点不存在了,同事事件也会被销毁

remove表达式参数：
remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点
我们可以通过$()选择一组相同的元素，然后通过remove（）传递筛选的规则处理

$("p").filter(":contains('3')").remove()

$("button:last").on('click', function() { 
        //找到所有p元素中，包含了3的元素
        //这个也是一个过滤器的处理
        $("p").remove(":contains('3')")
})

（六）DOM节点删除之empty和remove区别

要用到移除指定元素的时候，jQuery提供了empty()与remove([expr])二个方法，两个都是删除元素，但是两者还是有区别
empty方法

  • 严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点
  • empty不能删除自己本身这个节点

remove方法

  • 该节点与该节点所包含的所有后代节点将同时被删除
  • 提供传递一个筛选的表达式，删除指定合集中的元素

（七）DOM节点删除之保留数据的删除操作detach()

如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理
detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。
来看看jquery官方文档的解释：
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
$(“div”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。
当然这里要特别注意，detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据

if (!$("p").length) return; //去重
//通过detach方法删除元素
//只是页面不可见，但是这个节点还是保存在内存中
//数据与事件都不会丢失
p = $("p").detach()

（八）DOM节点删除之detach()和remove()区别

remove()和detach()可能就是其中的一个，可能remove()我们用得比较多，而detach()就可能会很少了
通过一张对比表来解释2个方法之间的不同

方法名参数事件及数据是否也被移除元素自身是否被移除
remove支持选择器表达是是（无参数时），有参数时要根据参数所涉及的范围
detach参数同remove否情况同remove

remove：移除节点

  • 无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据
  • 有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据

detach：移除节点

  • 移除的处理与remove一致
  • 与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来
  • 例如：$(“p”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

欢迎扫描下方二维码，关注weyoung公众号，一起交流学习~~
weyoung公众号

更多联系方式

平台链接
预览项目：https://nelucifer.gitee.io/
个人微信公众号：weyoung
segmentfault:https://segmentfault.com/u/nelucifer
CSDN:https://me.csdn.net/wlx001
简书：https://www.jianshu.com/u/99211cc23788
掘金：https://juejin.im/user/59b08c575188250f4850e80e
coder立夏
关注
专栏目录
jQuery 学习笔记
Dshuai7191的博客
08-26 360
演示通过 animate() 方法预定义 "hide", "show", "toggle" 值。演示更多 jQuery animate() 方法实例 (多个 animate() 回调).jQuery toggle() 用于切换 hide() 和 show() 方法。使用jQuery text() 和 html() 方法获取内容。演示 jQuery focus() 和 blur() 事件。演示jQuery hide() 和 show() 方法。演示简单的 jQuery animate() 方法。...
jQuery学习笔记之DOM对象和jQuery对象
12-03
在上面的示例代码中，`$(document).ready(function() {...})`确保了在DOM加载完成后执行内部的函数，这是jQuery中确保DOM就绪的常见方法。在该函数内部，`var domObj = document.getElementsByTagName("h3")[0]`获取...
JQuery学习笔记
热爱编程、热爱生活、热爱探索
08-21 1204
万字详解带你快速了解并上手JQuery，同时文中还参杂一些使用JQuery的经验，帮助你提前避坑
jQuery学习笔记
深思纵似丁香结，一展芭蕉寸凡心。
01-20 1087
jQuery学习笔记 JQuery入门-笔记部分 jQuery概述 jQuery是js库 库：相当于java的工具类，库是存放东西的，jQuery是存放js代码的地方，放的是用js代码写的函数 jquery是为了简化js的操作 jquery的安装 <script src="js/jquery-3.4.1.js" type="text/javascript"></script> 需要（在前面）引入jquery的核心js文件，不然会报错（$未定义）! jquery核心 $ 符号在j
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1327
本文主要介绍有关jQuery的相关知识点
jQuery学习笔记：DOM属性操作和DOM 的增删改
qq_49019244的博客
12-21 243
学习内容：DOM属性操作和DOM 的增删改 1. DOM属性操作 html() 它可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。 text() 它可以设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。 val() 它可以设置和获取表单项的 value 属性值。 跟 dom 属性 value 一样 <!DOCTYPE html> <html lang="zh_CN"> <head> <
jQuery学习笔记_DOM操作
sofia92的博客
12-22 350
一、DOM对象转jQuery对象用$()把DOM对象包起来即可
轻松学习jQuery控制DOM_jquery平滑显示指定dom
2401_84166811的博客
04-27 757
pendprepend()prepend()方法**语法说明：找到父元素ul，然后通过父元素ul去添加新元素li到第一个位置;**【4】prependToprependTo()方法**语法说明：创建新元素li，然后将新元素li追加到ul父元素中的最后位置；以上两种方法的运行效果是一样的，都是将新元素添加到第一个位置：以上四种方法是通过父元素和子元素的关系，给父元素ul添加li；兄弟关系下面将有四种方法是通过子元素li之间的关系来插入新的li。**【1】aft。
jQuery的学习笔记
qi_bai_jin的博客
11-06 1673
jQuery是一个快速，小型且功能丰富的JavaScript库。它使HTML文档遍历和操作，事件处理，动画和Ajax之类的事情变得更加简单，并且易于使用的API可以在多种浏览器上运行。凭借多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
jQuery学习笔记（四）jQuery遍历、DOM操作
一叶知秋
09-26 4207
一、DOM操作（增删改查） 1、新增节点 $(selector).append(content) 在匹配元素内部最后面新增一个节点 $(content).appendTo(selector) 把新节点追加到匹配元素内部最后面（效果同append，只是书写上前后位置互换） $(selector).prepend(content) 在匹配元素内部最前面新增一个节点 $(conten...
JQuery学习笔记（三）DOM操作，JQuery遍历
asdasd1fdsyrt的博客
06-12 404
JQuery基础用法一、DOM操作（增删改查） 一、DOM操作（增删改查） 1、新增节点 $(selector).append(content) //在匹配元素内部最后面新增一个节点 $(content).appendTo(selector) //把新节点追加到匹配元素内部最后面 $(selector).prepend(content) //在匹配元素内部最前面新增一个节点 $(content).prependTo(selector) //把新节点追加到匹配元素内部最前面 $(selec
jQuery学习笔记之创建DOM元素
01-19
而jQuery使用$就可以直接创建DOM元素 代码如下: var oNewP = $(“使用jQuery创建的内容”); 以上代码等同于javascript 代码如下:  var oNewP2 = document.createElement(“p”);  var oText = document....
jQuery学习笔记之jQuery的DOM操作
01-19
一.节点的操作 1.查找节点： var $var_1=$(“htmltype”); //这句话就是获取所有htmltype节点 如：var $ul_1=$(“ul”);   2.创建并追加节点： var $var_1=$(“”);//这句话是创建一个节点 $(“htmltype2”)....
jQuery学习笔记[1] jQuery中的DOM操作
12-11
这篇学习笔记主要探讨了DOM的三个方面：DOM Core、HTML-DOM和CSS-DOM，并且介绍了jQuery如何简化这些操作。 1. DOM Core是DOM的基础部分，它定义了一种标准接口，使得任何支持DOM的语言（如JavaScript）都能处理...
基于java+Face++人脸识别项目前端采用android实现.zip
09-14
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使
基于go-zero的云盘管理系统（CloudDisk）.zip
最新发布
09-14
这是一个基于go-zero框架实现的云盘管理系统。它提供了用户管理、存储池管理以及文件分享等核心功能。系统支持密码登录、邮箱注册、用户详情、用户容量查询等用户模块功能。在存储池模块，系统支持中心存储池资源管理和个人存储池资源管理，包括文件上传、文件秒传、文件分片上传以及对接MinIO等功能。此外，系统还提供了文件分享模块，支持创建分享记录、获取资源详情和资源保存等操作。该项目轻量级、高效且易于扩展，是网盘系统的一个优秀实现。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看reADME.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
C#中的Lambda表达式：简化委托与表达式树
09-14
在C#编程语言中，Lambda表达式提供了一种简洁的方式来表示匿名函数，即没有具体名称的函数。Lambda表达式在C# 3.0中引入，作为.NET Framework的一部分，它们在LINQ（Language Integrated Query）查询中尤其有用，但也可以用于任何需要委托类型的地方。 Lambda表达式是C#中一个非常强大和灵活的特性，它允许以简洁的方式编写匿名函数。Lambda表达式可以用于委托、表达式树、LINQ查询等多种场景。通过使用Lambda表达式，开发者可以编写更加简洁、可读和可维护的代码。理解Lambda表达式的工作原理和使用场景对于编写高效的C#程序至关重要。 在C#编程语言中，Lambda表达式提供了一种简洁的方式来表示匿名函数，即没有具体名称的函数。Lambda表达式在C# 3.0中引入，作为.NET Framework的一部分，它们在LINQ（Language Integrated Query）查询中尤其有用，但也可以用于任何需要委托类型的地方。 Lambda表达式是C#中一个非常强大和灵活的特性，它允许以简洁的方式编写匿名函数。Lambda表达式可以
基于ssm的旅游管理系统设计与实现.docx
09-14
基于ssm的旅游管理系统设计与实现.docx
windows将网易云ncm格式转换为mp3-flac的小工具.zip
09-14
在windows平台上，用户经常遇到的问题之一是无法直接播放网易云音乐下载的NCM格式音频文件，因为这是一种专有的加密格式。本压缩包提供了一个小工具，帮助用户将NCM格式转换为更通用的MP3或FLAC格式，以便在其他设备或音乐播放器上自由享用。：
jQuery学习笔记：DOM操作与选择器
"jQuery 学习笔记" jQuery 是一个流行的 JavaScript 库，它简化了 DOM 操作、事件处理、动画效果和Ajax交互等多个方面的工作。以下是对 jQuery 的详细讲解： 1. **选择器与对象** - `$()` 和 `jQuery()` 是等价的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值