Hi~ o( ̄▽ ̄)ブ,大家好,好久不见啊,萍子近两个星期专心做了一个前后台合作的电商网站的项目,好累啊,但是又有点想念CSDN上的你们了,所以萍子马上马立刻立的就过来了,嘿嘿~有没有一点小感动啊。
好了,不扯闲篇了,我们今天来一起看看jQuery文档处理的内容吧,虽然项目期大部分用了jq的知识点,但是咋也老感觉一边学习一边忘呢,好尴尬啊真的是,唉~
内部插入
1、append[content/fn]
向每个匹配的元素内部追加内容。这个方法与js的DOM操作中的appendChild方法类似。
*注意:是在内部追加哦,也就是说插入到元素最后方的位置。
参数分析:
content:要追加到目标中的内容
function(index,html):这个函数会返回一个字符串,用于追加到每一个匹配元素的里边。接收两个参数,index为对象在这个集合中的索引值,html为这个对象原先的html值。
<div>Hello,</div>
$("div").append("<p>everyone</p>");
结果:<div>Hello,<p>everyone</p></div>
2、appendTo[content]
把所有匹配的元素追加到另一个指定的元素集合中。
注意:这个也是追加哦,也是加在元素内部最后。
实际上,这个方法的使用颠倒了append的操作。$(A).append(B),是把B添加到A的最后方,而appendTo,是把前者插入到后者内部最后
参数分析:
content:用于被追加的内容
<p>哈哈</p>
<div>啦啦啦</div>
$("p").appendTo("div");
结果:<div>啦啦啦<p>哈哈</p></div>
以上两种方法是把内容添加到元素内部的最后方。
3、prepend[content/fn]
向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。
参数分析:
content:要插入到目标元素内部前端的内容
function(index,html):返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。
<div>Hello,</div>
$("div").prepend("<p>everyone</p>");
结果:<div><p>everyone</p>Hello,</div>
4、prependTo[content]
把所有匹配的元素前置到另一个、指定的元素元素集合中。
实际上,这个方法的使用颠倒了prepend的操作。$(A).append(B),是把B添加到A的最前方,而appendTo,是把前者插入到后者内部最前
参数分析:
content:用于匹配元素的jQuery表达式
<p>哈哈</p>
<div>啦啦啦</div>
$("p").prependTo("div");
结果:<div><p>哈哈</p>啦啦啦</div>
以上两种方法是把content添加到匹配元素的最前方。
外部插入
5、after[content/fn]
在每个匹配元素之后插入内容
参数分析:
content:插入到每个目标后的内容
function:函数必须返回一个html字符串
<div>Hello,</div>
$("div").after("<p>everyone</p>");
结果:<div>Hello,</div><p>everyone</p>
6、before[content/fn]
在每个匹配的元素之前插入内容。
参数分析:
content:插入到每个目标后的内容
function:函数必须返回一个html字符串
<div>Hello,</div>
$("div").before("<p>everyone</p>");
结果:<p>everyone</p><div>Hello,</div>
7、insertAfter[content]
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面。
参数分析:
content:用于匹配元素的jQuery表达式
<div>Hello,</div>
$("div").insertAfter("<p>everyone</p>");
结果:<p>everyone</p><div>Hello,</div>
8、insertBefore[content]
把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
实际上,使用这个方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。
参数分析:
content:用于匹配元素的jQuery表达式
<div>Hello,</div>
$("div").insertBefore("<p>everyone</p>");
结果:<div>Hello,</div><p>everyone</p>
包裹
9、wrap[html/ele/fn]
把所以匹配的元素用其他元素的结构化标记包裹起来
需要注意的是:当被匹配的元素中包含文本时,无法使用这个函数,因此要添加文本应该在包裹完成之后再进行添加。
参数分析:
html:HTML标记代码字符串,用于动态生成元素并包裹目标元素
elem:用于包裹目标元素的DOM元素
fn:生成包裹结构的函数
用一个新建div包裹所有的p标签
$("p").wrap("<div></div>");
用id名为content的div包裹p标签
$("p").wrap(document.getElementById("content"));
10、unwrap()
这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素(以及他们的同辈元素)会在DOM结构上替换他们的父元素。
把一组用div包裹的p标签移除
<div>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</div>
$("p").unwrap()
结果:
<p>Hello</p>
<p>cruel</p>
<p>World</p>
替换
11、replaceWith[content/fn]
将所有匹配的元素替换成指定的html或dom元素
参数分析:
content:用于将匹配元素替换掉的内容。
fn:返回html字符串,用来替换的内容。
这个函数需要注意的是,匹配到的元素是移动过来替换,而不是复制一份过来替换。也就是说替换的移动过来替换了被替换的,结果是替换的在被替换的位置上存在,别替换的已经不在了,不在了~~~
比如:
<div class="container">
<div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
</div>
$('.third').replaceWith($('.first'));
结果:
<div class="container">
<div class="inner second">And</div>
<div class="inner first">Hello</div>
</div>
12、replaceAll[selector]
用匹配的元素替换掉所有 selector匹配到的元素。
参数分析:
selector:用于查找所要被替换的元素
<div><p>哈哈</p></div>
$("<span>嘿嘿</span>").replaceAll("p");
结果:<div><span>嘿嘿</span></div>
删除
13、empty()
删除匹配的元素集合中所有的子节点
把所有div的子节点删掉
<div><p>哈哈</p></div>
$("div").empty();
结果:<div></div>
14、remove[expr]
从DOM中删除所有匹配的元素
这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。
参数分析:
expr:用于筛选元素的jQuery表达式
<p class="hello">Hello</p> how are <p>you?</p>
从DOM中把所有段落删掉
$("p").remove();
结果:how are
从DOM中删除带有hello类的段落
$("p").remove(".hello");
结果:how are <p>you?</p>
15、detach[expr]
从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。
参数分析:
expr:用于筛选元素的jQuery表达式
例子同上。
复制
16、clone()
克隆匹配的DOM元素并且选中这些克隆的副本,进行操作
克隆所有的span标签,并且选中这些克隆副本,然后将他们插入到所有段落后方
<span>哈哈</span><p>嘿嘿</p>
$("span").clone().appendTo("p");
结果:<span>哈哈</span><p>嘿嘿<span>哈哈</span></p>
好了,以上就是jQuery中大部分对文档的处理方法,敬请笑纳,有疑问的萍子随时恭候,呼呼~加油!