笔记6，使用jQuery操作DOM

DOM操作分为三类：
DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
HTML-DOM：用于处理HTML文档，如document.forms
CSS-DOM：用于操作CSS，如element.style.color="green"

JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持

1， jQuery中的DOM操作可分为：
样式操作
内容及Value属性值操作
节点操作
节点属性操作
节点遍历 CSS-DOM操作

Query对JavaScript中的DOM操作进行了封装，使用起来也更简便

直接设置样式值
使用css()为指定的元素设置样式值
css(name,value) 或 css({name:value, name:value,name:value…})
追加和移除样式
追加样式： addClass(class)或addClass(class1 class2 … classN)
移除样式： removeClass(“style2 ”)或removeClass("style1 style2 ")
切换样式
toggleClass()模拟了addClass()与removeClass()实现样式切换的过程
toggleClass(class) 如果存在（不存在）就删除（添加）一个类。

html代码操作
html()可以对HTML代码进行操作，类似于JS中的innerHTML
文本操作
text()可以获取或设置元素的文本内容
html()和text()区别



Value值操作
val()可以获取或设置元素的value属性值 例如：$(this).val();

2，节点操作

jQuery中节点操作主要分为：
查找节点
创建节点
插入节点
删除节点
替换节点
复制节点

插入节点
插入内部节点






替换节点
replaceWith()和replaceAll()用于替换某个节点
$("ul li:eq(1)").replaceWith($newNode1); 或
$newNode1.replaceAll("ul li:eq(1)");

复制节点
clone()用于复制某个节点
$("ul li:eq(1)").clone(true).appendTo("ul");
可以使用clone()实现输出DOM元素本身的HTML
$("<div></div>").append($(DOM元素).clone()).html();

删除节点
jQuery提供了三种删除节点的方法
remove()：删除整个节点
detach()：删除整个节点，保留元素的绑定事件、附加的数据
empty()：清空节点内容
获取与设置节点属性
attr()用来获取与设置元素属性
removeAttr()用来删除元素的属性
$newNode4.attr("alt"); 或 $("img").attr({width:"50",height:"100"});
$newNode2.removeAttr("title");

3，遍历子元素

children()方法可以用来获取元素的所有子元素
$("body").children();

遍历同辈元素
jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素



遍历前辈元素
jQuery中可以遍历前辈元素，方法如下：
parent()：获取元素的父级元素
parents()：元素元素的祖先元素
jQuery中提供了each()、find()、filter()等节点操作方法

CSS-DOM操作
除css()外，还有获取和设置元素高度、宽度、相对位置等的样式操作方法