jquery基础学习之DOM篇（二）

在此之前请牢记，jquery 是一个合集对象！！！！

1.节点创建

---

js创建方法：

创建元素：document.createElement

设置属性：setAttribute 添加文本：innerHTML

加入文档：appendChild

jq创建方法:

前三项可以合并成一个，直接向$()括号中加入要设置的html结构及内容，

然后append()添加到某个容器中 let div=$('jq创建'); $(body).append(div)

2.节点插入方法

---

向元素内部添加

append() 与appendTo

添加到容器最后的位置，这两个实现一样的功能，目标和源相对换

prepend() 与prependTo()

添加到容器最前的位置，这两个实现一样的功能，目标和源相对换

兄弟节点的添加

after() 与 insertAfter

功能相同，在选中的元素后面添加兄弟节点，目标和源相对换

before() 与 insertBefore

功能相同，在选中的元素前面添加兄弟节点，目标和源相对换

注意：

after() 和before()

都可以接收HTML字符串，DOM 元素，元素数组，用逗号隔开

insertAfter，insertBefore

这两个要插入的元素只能有一个根节点，比如如果想插入两个并列的p,只有第一个能成功

3.节点的删除

---

empty()

清空子节点，自己本身还在

remove()

连自己也删除，以及绑定的事件和数据也不再了,remove(selector)可以传递参数用来过滤将要被删除的元素集合

比如$('p').remove(':contains("xx")')，这句中，:contains("xx")是对前面所选中的$('p')元素集合的又一层筛选，只删除这些

detach()

跟remove一样，但是是临时的，保留数据与事件，下一个时间段还能继续用，数据与事件还在，内存对象还在

总结：

empty 身体被掏空

remove 自杀

detach 隐身

4.节点的复制与替换

---

clone()

默认只复制结构和内容，如果加上参数true,将会连着数据和事件一起复制

在插入文档中之前，还能先给他设置样式之类的，而不是必须插入之后才能修改

$(".left").append( $(this).clone().css('color','red') )

replaceWith() 与 replaceAll()

replaceWith(newContent) 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

$('div:eq(1)').replaceWith('<div>3</div>') //把第二个div替换成第三个

replaceAll(target) 用集合的匹配元素替换每个目标元素
和上一个功能相似，目标和源相反
$('<div>4</div>').replaceAll('div:eq(1)') //用div4 替换第二个
两者都会删除相关的所有数据和事件处理程序，replaceWith返回jquery对象，返回替换前的节点

wrap() 添加父元素
$('div:eq(0)').wrap('<div class="container"></div>')//把第一个div用container包裹起来
wrap(func),可以有回调函数，返回需要传入的父元素
$('div:contains("5")').wrap(()=>{
return '<div class="container"></div>'
})

wrapAll() 将集中的元素用其他元素包裹起来
$('p').wrapAll('<div></div>')给所有的p加一个统一的div,这些p会成为兄弟节点
wrapAll(func) 一个回调函数 返回用于包裹匹配元素的html内容或者jquery对象，通过回调的方式可以单独处理每一个元素，等同于wrap
$('input:eq(0)').on('click',()=>{
$('p').wrapAll('<div class="right"></div>')
})

注意

如果两个元素不是同一级别的，包裹后会变成同一级别的，且像包裹的比较深的那个靠近

wrap() 与wrapAll() 的区别
第一个是给选中每个元素分别添加一个父亲，第二个是给选中的元素添加同一个父亲，第二个如果有回调函数的话，等同于第一个

unwrap() 去掉父元素 不接受任何参数，参数无效

wrapInner() 给匹配到的元素的内部，增加父元素
$('div').wrapInner('<p></p>') 给div的内部套一个p标签，用来包裹div中原来的所有元素
wrapInner(func),函数返回那个包裹层

复制与替换总结

wrap单独一件外套，wrapInner 内衣 wrapAll 给所有的人穿一个外套 wrapAll(func)等同于wrap
unwrap 脱外套
detach 隐身 remove 自杀 empty 身体被掏空
clone 复制 true 全复制，有事件和数据，默认无
target.replaceWith(content) target被content替换掉;
 content.replaceAll(target) 用content来替换掉target
注意内联元素是不能包裹块级元素

5.节点遍历

---

children()

查找儿子，可以传参加选择器筛选
find()

查找子孙元素，不止儿子，必须传参，要查找的元素 $('.item-ii').find('li') 也可以写成$('li','.item-ii')
parent（）

查找父亲，如果里面有参数，这个参数是对查找出来的父亲集合的再筛选（jquery是一个对象合集。。。）
parent(':last') 找到这个合集以后，再选择最后一个
parents()

查找祖先节点，用法类似find()
closest()

查找最近的满足条件的本身或者祖先，只返回0个或者1个，和parents()相似，更精确化

不同点：
1.closest会加上自身，parents不会
2.closest查找到第一个匹配的就会停止，parents会一直查到根元素
3，结果不同，closet返回包含0个或者1个对象，parents返回0个或者1个或者多个
4.parents(':first')第一个父亲元素

next()
查找紧邻的后面的兄弟元素,注意是一个，但是jquery是要给对象合集，比如页面中好多p元素，那么查找p的next,就可能出现很多。。。
prev()

用法与next() 相同，向上查找，只查一个哟

siblings（）

所有的兄弟节点，无参数，如果有参数就是对查找到的合集进行再过滤，jQuery是一个对象合集哈哈哈哈

add()

多选的意思，比如
$('div.co').add('.444').css('font-size','24px') //选择class 为co 和 444 的元素，给他们加样式

each()

就是js中的forEach,回调函数中两个参数，index，item，this每次指向item