2019-05-28jQuery的DOM操作
2019-05-28 本文已影响0人
啊_6424
对html标签的增删改
1.创建一个标签
var div = document.createElement("div");//原始的
var div = $("<div/>");//通过jQuery方式
var div = $("<div></div>");//通过jQuery方式
2.添加到父标签里
var father = $("body");
father.append(div)
所有方法：
-
内部插入
内部，即是针对子标签。注意父标签里的文本也是一个节点。
可以添加jQuery对象（即标签），也可以添加文本内容
* append(content|fn)
向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
* appendTo(content)
把所有匹配的元素追加到另一个指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法，参见例子2。
例子1
<div class="first"></div>
<div class="first"></div>
var div = $("<div><div/>");
div.appendTo($(".first"));
image.png
例子2
<div class="first"></div>
<div class="first"></div>
......
$("<p/>")
.appendTo(".first")
.addClass("test")
.end()
.addClass("test2");
使用了end
不使用end
* prepend(content|fn)
用于向所有匹配元素内部的开始处插入内容
<div class="first">您好！
<p></p>
</div>
$(".first").append("<div/>");
添加到了最后面
<div class="first">您好！
<p></p>
</div>
$(".first").prepend("<div/>");
添加到了最前面
* prependTo(content)
<p>I would like to say: </p>
<div id="foo">这是foo</div>
.......
$("p").prependTo("#foo");
把所有匹配的元素前置到另一个、指定的元素元素集合中。
将获取的p标签添加到div的最前面
-
外部插入
外部，主要针对兄弟节点
* after(content|fn)
写法：$(A).after(B)
作用：把B插入到A后面
在匹配内容之后插入一些HTML标记代码。
<p>I would like to say: </p>
<div id="foo">这是foo</div>
......
$("p").after("<b>Hello</b>");
image.png
在匹配内容之后插入
纯文本内容
<p>I would like to say: </p>
<div id="foo">这是foo</div>
<b>Hello</b>
......
$("p").after("您好！");
image.png
在匹配内容之后插入一个DOM元素。
$("p").after( $("#foo")[0] );
image.png
在匹配内容之后插入一个
jQuery对象(类似于一个DOM元素数组)。
<p>I would like to say: </p>
<div id="foo">这是foo</div>
<b>Hello</b>
......
$("p").after( $("b") );
image.png
* before(content|fn)
跟after类似
* insertAfter(content)
写法：$(A).insertAfter(B)
作用：把A插入到B后面
* insertBefore(content)
-
包裹
参数不能是jQuery对象
* wrap(html|ele|fn)
语法：$(A).wrap(B)
作用：给A添加一个父级标签B
把所有匹配的元素用其他元素的结构化标记包裹起来（添加一个父级标签）
参数是function时可用于原先标签的内容作为新父级标签的某个属性的属性值
//$("p").wrap("<div/>")
$("p").wrap("<div>HHHHH</div>")
给p标签添加了一个父级div
<b>Hello</b>
$('b').wrap(function() {
return '<div class="' + $(this).text() + '" />';
});
b标签被class为Hello的div包围
参数不能是jQuery对象
$("b").wrap($("#foo"));//错误的
$("b").wrap($("#foo")[0]);//正确的
image.png
* unwrap()
语法：$(A).unwrap(B)
作用：移除A标签的父级标签B
能快速取消 .wrap()方法的效果。
匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素
* wrapAll(html|ele)
* wrapInner(html|ele|fn)
