DOM对象

DOM对象

Document object model 文档对象模型
一句话总结：DOM操作，可以简单理解成“元素操作”。

1.创建节点

jQuery创建节点

var $li = "<li><a href='http://www.lvyestudy.com'>绿叶学习网</a></li>";
var $li = "<li>jQuery</li>";

js创建节点

var oli=document.createElement("li");
var oa=document.createElement("a");
var otxt=document.createTextNode("绿叶学习网');
oa.href="http://www.lvyestudy.com";
oa.appendChild("otxt");
oli.appendChild("oa");
document.body.appendChild("oli");

2.插入元素

2.1jQuery插入元素
2.1.1插入开始处
prepend()和prependTo()功能相似，操作却相反

var $strong = "<strong>jQuery入门教程</strong>";
$("p").prepend($strong);//strong插入到p开始处
$($strong).prependTo("p");//strong插入到p开始处

2.1.2插入末尾处
append()和appendTo(),与prepend 同理
2.1.3外部的前面插入
before()和insertBefore(),与prepend ()同理
2.1.4外部的后面插入
after() 和insertAfter(),与上同理
2.2js插入元素
appendChild()插入末尾和insertBefore()插入到已有子节点之前两种方法

3.jquery删除元素

$().remove()

var $li= $("li:nth-child(4)").remove();
$($li).appendTo("ul");

remove()方法可以返回一个值，其中返回值为被删除的元素。也就是说，虽然这个元素被删除了，但是我们可以把返回值赋值给一个变量，然后再次使用被删除的元素。
借此可以实现元素位置的互换。
⚠️ jQuery中，除了:nth-child()和:nth-of-type()这两个的下标是从1开始的，其他所有选择器或jQuery方法的下标都是从0开始的。

$().detach()

与remove相似。区别在于detach()方法只会删除元素，不会把元素绑定的事件删除。而remove还会删除绑定的事件。

$().empty()

清空后代元素
remove()和detach()这两个方法在删除元素时，会将自身元素以及所有后代元素一并删除。不过empty()方法仅仅是删除后代元素，并不会删除自身元素`。
简单来说前两者直接把整个标签删除了，后者只删除后代和内容，但保留标签。

4.复制元素

$().clone(bool)

true：表示不仅复制元素，并且还会复制元素所绑定的事件。
false：表示仅仅复制元素，但不会复制元素所绑定的事件。
例如：

var $li = $("ul li:nth-child(4)").clone(true);

5.替换函数

$(A).replaceWith(B)表示使用B来替换A。

 $("strong").replaceWith('<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>');

$(A).replaceAll(B)表示用A来替换B。与前者颠倒。

6.包裹元素

$(A).wrap(B)表示将A元素使用B元素包裹起来。

$("p").wrap('<div style="background-color:orange;"></div>');

得到结果

   <div><p>绿叶学习网</p></div>
    <div><p>绿叶学习网</p></div>
    <div><p>绿叶学习网</p></div>

$(A).wrapAll(B)

⚠️ 替换中replaceWith()和replaceAll()两个方法功能相同对象颠倒，但是替换中wrap()与wrapAll()不同，wrapAll()方法是将所匹配的元素“一起”包裹。
使用$("p").wrapAll("<div></div>")，会得到以下结果：

<div>
    <p>绿叶学习网</p>
    <p>绿叶学习网</p>
    <p>绿叶学习网</p>
</div>

///
内部包装

$(A).wrapInner(B)

将A元素“内部所有元素以及文本”使用B元素包裹起来。注意，wrapInner()方法不会包裹A元素本身。
wrap()是包装在元素外部，而wraplnner()包装在内部

$("p").wrapInner("<strong></strong>");

结果：

<p><strong>绿叶学习网</strong></p>

$("p").wrap("<strong></strong>");

结果：

<strong><p>绿叶学习网</p></strong>

7.遍历元素

$().each(function(index, element){
    ……
})

形参index是下标，是从0开始的
(element)等价于$(this)。

 $("li").each(function (index, element) {
                    var txt = "第" + (index + 1) + "个li元素";
                    $(element).text(txt);
 });//遍历输出

学习网站 ： 绿叶学习网