jQuery的DOM操作

Posted 2020-10-04

jQuery的DOM操作和javascript的DOM操作类似 但是更加简单并且新增的一些十分使用的方法。

创建节点时DOM时选择先创建好元素节点然后把内容插入节点 经过几次插入和innerhtml的插入文本后的形成

而jQuery的创建节点十分简单可以在$()内直接书写HTML代码

$("<div class="name>学习jQuery</div>") 这样就可以创造一个节点并且这个节点还有自己得ClassName

jQuery插入节点使用的方法是append()和appendTo

append()类似于appendChild方法 是在指定的节点内插入节点 ()内放置想要插入的节点

$("div").append($("<span>haha</span>")  这样就在一个div的元素节点插入一个span元素

appendTo()方法是相反的 是把节点插入到指定的元素节点内 ()内放置被插入的指定节点  

$("<span>aa</span>").appendTo($("div"))  和上面的内容等价 两个方法内容功能相同只是位置和内容不同

append()和appendTo()都是把元素插入到指定元素节点内的最后一个子元素的位置 就相当于把元素放在指定元素节点的子节点的最后一位上

after()和before()方法是两个针对于兄弟节点的 使用这两个方法插入的节点都是指定节点的兄弟节点

after() ()括号内加入的想要插入的内容可以是jQuery对象也可以是HTML代码  所以前面说指定的元素节点  

把括号内的内容插入到指定元素节点的后面  紧挨着指定的元素节点 如果元素节点后面还有别的节点就把后面的节点顺次后移

同理before也是一样只不过是把内容插入到指定元素的前面并且一样是紧挨着的

这两个方法的内容可以接受的不只是HTML代码还可以是dom元素 元素数组

prepend()和prependTo也是插入节点用法类似语append()和appendTo()

prepend()和prependTo是把元素插入到指定元素内的前面 就是当指定元素的第一个子节点

insertAfter() insertBefore()同样是类似于after()和before()的语法功能是一样的只是内容和位置不同  

insertAfter()和insertBefore()把想要插入的内容放在前面而把目标的内容放在后面所以目标内容不接受多个参数

empty()方法是移除目标的所有子节点 例:$("ul").empty() 这会移除掉ul内部的所有的li节点但不会对ul节点本身有什么影响

被移除的子节点不光节点元素被移除而且文本内容也会被移除 例：<div>你好吗？<span>朋友</span></div>   

$("div").empty()  那么结果就是<div>你好吗？</div>

remove()移除节点不光移除子节点包括本身的节点也会被移除但是remove可以接受一个参数这个参数是一个选择器

就是把符合这个选择器的节点集合全部移除并且移除这些节点的事件和数据

$("div").remove(".name") 就相对移除div节点的所有class的值为name的节点  ?????仍有疑问以后再完善

remove()方法的返回值是这个被移除的所有节点的合集

detach()方法  和remove的效果类似也是移除元素节点但是会保留被移除的元素节点的内存模型  这样就可以保存被移除的节点上面的事件和内存

detach()方法的返回值也是被移除的节点  如果我们再次调用这些被移除的节点他们上面的事件并不会消失直接就可以使用

clone()方法是jQuery新增的方法是拷贝节点  也就是复制克隆节点  

clone()方法可以传入一个参数true 如果不传入参数则说明克隆为浅克隆 如果传入参数true则说明克隆是深克隆

浅克隆:只克隆结构  深克隆: 克隆结构数据和时间  节点是通过浅克隆得来的那么它将没有之前节点的事件 深克隆就会仍然拥有之前绑定的事件

元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个（并不理解）

replaceWith()和replaceAll()也是一对功能相同内容和位置不同的方法

replaceWith()括号内是用于替换的节点 它作用在被替换的节点上

replaceAll()相反  括号内是被替换的节点  作用在用于替换的节点上   括号内可以用HTML结构

wrap()方法  包裹方法 就是给指定元素包裹一个父元素  作用在指定元素内  ()括号内传入想要用于包裹的父元素(HTML结构的)

由于式包裹一个父元素 并不是祖父元素所以指定元素就是包裹内容的子节点而不是子孙节点

warp方法也有一个回调函数回电函数的返回值就是HTML内容和jQuery内容

unwrap()方法 删除包裹 保留内部结构只是删除父元素  并不需要传入任何参数

wrapInner()方法就是作用在节点的所有子节点上  为其所有的子节点包裹一段HTML代码

也支持回调函数回调函数的返回值应该是一段完整的HTML代码

例:<div>p元素1 </div> <div>p元素2</div>  $("div").warpInner("<p></p>")结果就是:

<div><p>p元素1</p></div> <div><p>p元素2</p></div>

children()方法  返回所有的子节点(不可以是子孙节点)   也就是必须是第一级子节点

可以选择性的接受参数  接受的参数也就是选择器  返回的就是在目标内的所有的子节点(第一级)中满足选择器内容的子节点

find()方法  返回所有的后代节点  包含父子节点 必须要传递参数  参数是选择器 如果所有的子节点全部需要那么就传入通配符*

find()方法并不会找到自己只会找寻所有的子节点

选择器 context 是由 .find() 方法实现的；因此，$(‘.item-ii‘).find(‘li‘) 等价于 $(‘li‘, ‘.item-ii‘)(找到类名为item-ii的标签下的li标签)。(还未理解)

parent()方法只会查找自己的父元素  并不会再向祖先元素等去查找  会匹配每一个父元素并且也接受选择器

parents()方法类似但是会查找向上查找 查找祖先元素 返回的也会是一个合集 可以接受一个选择器  

closest()方法 传入一个匹配元素的选择器参数  这个类似于parents()方法 都会对指定元素的祖先元素进行查找 但是查找到符合选择器的匹配元素后就会停止查找 而且还是从当前元素开始的

 parents()和closest()的区别 

1. 起始位置不同：.closest开始于当前元素 .parents开始于父元素
2. 遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
3. 结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

next()方法  会查找指定元素集合中每一个元素紧邻的后面的元素(一定是同辈元素)  也就是下一个直接兄弟元素  也允许传入一个选择器表达式进行筛选。