第五节：jQuery动画

操作DOM a.什么是DOM：Document Object Model缩写，文档对象模型 b.理解页面的树形结构 c.什么是节点：是DOM结构中最小单元，包括元素、属性、文本、文档等

一、创建节点

1.创建元素

语法：document.createElement(name);

var div = document.createElement("div"); document.body.appendChild(div);

$(html)：根据传递的标记字符串，创建DOM对象

2.创建文本

var div = document.createElement("div"); var txt = document.createTextNode("DOM"); div.appendChild(txt); document.body.appendChild(div); var $div = = $("<div>DOM</div>"); $(body).append($div);

3.设置属性

语法：e.setAttrbute(name,value)

var div = document.createElement("div"); var txt = document.createTextNode("DOM"); div.appendChild(txt); document.body.appendChild(div); div.setAttribute("title","盒子"); var $div = = $("<div title='盒子'>DOM</div>"); $(body).append($div);

二、插入内容

内部插入

向元素最后面插入节点： append():向每个匹配的元素内部追加内容 appendTo():把所有匹配的元素追加到指定元素集合中，$("A").append("B")等效 $("B").appendTo("A") 向元素最前面插入节点： prepend（）：把每个匹配的元素内部前置内容 prependTo（）：把所有匹配的元素前置到另一个指定的元素集合中,$("A").prepend("B") 等效 $("B").prependTo("A")

外部插入

after():在每个匹配的元素之后插入内容 before()：在每个匹配想元素之前插入内容 insertAfter()：将所有匹配的元素插入到另一个指定的元素集合后面，$A.insert($B) 等效 $B.insertAfter($A); insertBefore()：将所有匹配的元素插入到另一个指定的元素集合前面 A.before( B) 等效 $B.insertBefore($A);

三、删除内容

移除 remove():从DOM中删除所有匹配元素 清空 empty():删除匹配的元素集合中所有子节点内容

四、克隆内容：创建指定节点副本

clone() 注意：若clone（true）则是包括克隆元素的属性，事件等

五、替换内容

replaceWith():将所有匹配的元素替换成指定的元素 replaceAll():用匹配的元素替换掉指定元素 注意：两者效果一致，只是语法不同 A.replaceAll( B) 等效于 B.replaceWhith( A)