jQuery基础-DOM篇2

来源：互联网发布：微信发假金额红包软件编辑：程序博客网时间：2024/06/07 16:37

五、1、empty()的基本用法：empty顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了指定元素中的所有子节点。

$('.hello').empty()

//结果：<p>慕课网</p>被移除

2、remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。

$('.hello').on("click",fn)

$('.hello').remove()

//结果：<div class="hello"><p>慕课网</p></div>全部被移除

//节点不存在了,同事事件也会被销毁

可以选择性的删除指定的节点：$("p").remove(":contains('3')")

3、保留数据的删除操作detach()

与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

$("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

六、1、DOM拷贝clone()：.clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

HTML部分

JavaScript部分

$("div").on('click', function() {//执行操作})

//clone处理一

$("div").clone() //只克隆了结构，事件丢失

//clone处理二

$("div").clone(true) //结构、事件与数据都克隆

clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如右边代码我 $(this).clone().css('color','red') 增加了一个颜色

2、DOM替换replaceWith()和replaceAll()

<div>

</div>

替换第二段的节点与内容

$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')

$('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')

replaceWith()与.replaceAll()方法会删除与节点相关联的所有数据和事件处理程序

3、DOM包裹wrap()方法：将元素用其他元素包裹起来，也就是给它增加一个父元素

$('p').wrap('<div></div>')

最后的结构，p元素增加了一个父div的结构

<div>

</div>

$('p').wrap(function() {

return '<div><div/>'; //与第一种类似，只是写法不一样

})

DOM包裹unwrap()方法：将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

<div>

</div>

$('p').unwarp();

找到p元素，然后调用unwarp方法，这样只会删除父辈div元素了

结果：<p>p元素</p>

DOM包裹wrapAll()方法：给集合中匹配的元素增加一个外面包裹HTML结构

给所有p元素增加一个div包裹

$('p').wrapAll('<div></div>')

最后的结构，2个P元素都增加了一个父div的结构

<div>

</div>

通过回调的方式可以单独处理每一个元素，以上面案例为例，

$('p').wrapAll(function() {

return '<div><div/>';

})

以上的写法的结果如下，等同于warp的处理了

<div>

</div>

<div>

</div>

DOM包裹wrapInner()方法：将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素

给所有p元素增加一个div包裹

$('p').wrapInner('<div></div>')

最后的结构，匹配的p元素的内部元素被div给包裹了

以上面案例为例，

$('p').wrapInner(function() {

return '<div><div/>';

})

以上的写法的结果如下，等同于第一种处理了

<div>

</div>

<div>

</div>

七、jQuery遍历

1、.children( ) 方法：返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）

$(".div").children().css('border','3px solid red')

$('.div').children(':last').css('border', '3px solid blue')//找到div对应的子元素，然后筛选出最后一个，给边宽加上颜色

2、find()方法

.find()和.children()方法是相似的，.children只查找第一级的子节点.find查找范围包括子节点的所有后代节点

$('.left').find('li:last').css('border', '1px solid red')//在class="left"的元素中找到后代元素li中的最后一个并加上蓝色的边框

3、parent()方法：快速查找合集里面的每一个元素的父元素

$('.item-a').parent(':last').css('border', '1px solid blue') //找到所有class=item-a的父元素，然后筛选出最后一个，加上蓝色的边

4、parents()方法：快速查找合集里面的每一个元素的所有祖辈元素

//找到当前元素的所有祖辈元素,筛选出class="first-div"的元素并且附上一个边

$('.item-b').parents('.first-div').css('border', '2px solid blue')

5、closest()方法：从元素本身开始，在DOM树上逐级向上级元素匹配，并返回最先匹配的祖先元素

$("li.item-1").closest('.level-2').css('border','1px solid red')//找到class="item-1"的li元素通过closest方法往上找到class=".level-2"的li元素,加上边框颜色

6、.parents()和.closest()区别

起始位置不同：.closest开始于当前元素.parents开始于父元素

遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，知道找到一个匹配就停止查找，parents一直查找到根元素，并将匹配的元素加入集合

结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

7、next()方法：查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合

//找到所有class=item-3的li，然后给每个li,然后筛选出第一个，加上蓝色的边

$('.item-2').next(':first').css('border', '1px solid blue')

8、prev()方法：查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合

//找到所有class=item-2的li，然后给每个li,然后筛选出第一个，加上蓝色的边

$('.item-3').prev(':last').css('border', '1px solid blue')

9、siblings()：快速查找指定元集合中每一个元素紧邻的前面后面同辈元素

10、add()方法：用来创建一个新的jQuery对象，元素添加到匹配的元素集合中

<p>新的p元素</p>

处理一：传递选择器 $('li').add('p')

处理二：传递dom元素 $('li').add(document.getElementsByTagName('p')[0])

处理三：动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了

$('li').add('<p>新的p元素</p>').appendTo(目标位置)

11、each()

each是一个for循环的包装迭代器

each通过回调的方式处理，并且会有2个固定的实参，索引与元素

each回调方法中的this指向当前迭代的dom元素

<ul>

<li>Aaron</li>

</ul>

开始迭代li，循环2次

$("li").each(function(index, element) {

index 索引 0,1

element是对应的li节点li,li

this 指向的是li

})

//遍历所有的li，修改每个li内的字体颜色

$("li").each(function(index, element) {

$(this).css('color','red')

})

//遍历所有的li，修改偶数li内的字体颜色

$("li").each(function(index, element) {

if (index % 2) {

$(this).css('color','blue')

}

})

0 0