五、1、empty()的基本用法:empty顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点。
<div class="hello"><p>慕课网</p></div>
$('.hello').empty()
//结果:<p>慕课网</p>被移除
<div class="hello"></div>
2、remove与empty一样,都是移除元素的方法,但是remove会将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。
<div class="hello"><p>慕课网</p></div>
$('.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部分
<div></div>
JavaScript部分
$("div").on('click', function() {//执行操作})
//clone处理一
$("div").clone() //只克隆了结构,事件丢失
//clone处理二
$("div").clone(true) //结构、事件与数据都克隆
clone()方法时,在将它插入到文档之前,我们可以修改克隆后的元素或者元素内容,如右边代码我 $(this).clone().css('color','red') 增加了一个颜色
2、DOM替换replaceWith()和replaceAll()
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</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>p元素</p>
$('p').wrap('<div></div>')
最后的结构,p元素增加了一个父div的结构
<div>
<p>p元素</p>
</div>
$('p').wrap(function() {
return '<div><div/>'; //与第一种类似,只是写法不一样
})
DOM包裹unwrap()方法:将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。
<div>
<p>p元素</p>
</div>
$('p').unwarp();
找到p元素,然后调用unwarp方法,这样只会删除父辈div元素了
结果:<p>p元素</p>
DOM包裹wrapAll()方法:给集合中匹配的元素增加一个外面包裹HTML结构
<p>p元素</p>
<p>p元素</p>
给所有p元素增加一个div包裹
$('p').wrapAll('<div></div>')
最后的结构,2个P元素都增加了一个父div的结构
<div>
<p>p元素</p>
<p>p元素</p>
</div>
通过回调的方式可以单独处理每一个元素,以上面案例为例,
$('p').wrapAll(function() {
return '<div><div/>';
})
以上的写法的结果如下,等同于warp的处理了
<div>
<p>p元素</p>
</div>
<div>
<p>p元素</p>
</div>
DOM包裹wrapInner()方法:将合集中的元素内部所有的子元素用其他元素包裹起来,并当作指定元素的子元素
<p>p元素</p>
<p>p元素</p>
给所有p元素增加一个div包裹
$('p').wrapInner('<div></div>')
最后的结构,匹配的p元素的内部元素被div给包裹了
<p><div>p元素</div></p>
<p><div>p元素</div></p>
以上面案例为例,
$('p').wrapInner(function() {
return '<div><div/>';
})
以上的写法的结果如下,等同于第一种处理了
<div>
<p>p元素</p>
</div>
<div>
<p>p元素</p>
</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对象 ,元素添加到匹配的元素集合中
<ul><li>list item 1</li><li>list item 3</li></ul>
<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>慕课网</li>
<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')
}
})