JavaWeb

jQuery学习笔记（三）DOM篇

2019-02-03  本文已影响2人  程序员七平
logo-jquery-20191111489

本文内容有：

  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()区别


<h3 align=center> （一）DOM内部插入append()与appendTo()</h3>

创建节点及节点属性

几个问题：

  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中

<h3 align=center> （二）DOM内部插入prepend()与prependTo()</h3>

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

方法详解：

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

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

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

<h3 align=center> （三）DOM外部插入after()与before()</h3>

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

注意点：

<h3 align=center> （四）DOM外部插入insertAfter()与insertBefore()</h3>

|:---|:---|
|.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"))

<h3 align=center> （五）DOM节点删除之empty()的基本用法</h3>

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

过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')")
})

<h3 align=center> （六）DOM节点删除之empty和remove区别</h3>

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

remove方法

<h3 align=center> （七）DOM节点删除之保留数据的删除操作detach()</h3>

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

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

<h3 align=center> （八）DOM节点删除之detach()和remove()区别</h3>

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

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

remove：移除节点

detach：移除节点

欢迎关注微信公众号weyoung，记录学习笔记和一些有趣的东西，欢迎交流~~

个人微信公众号weyoung
更多联系方式
平台 链接
个人博客 https://www.wanglixia.top/
预览项目： 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
上一篇 下一篇

猜你喜欢

热点阅读