DOM操作分类
DOM操作分为三类：
DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
HTML-DOM：用于处理HTML文档，如document.forms
CSS-DOM：用于操作CSS，如element.style.color="green"
提示：
JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持
jQuery中的DOM操作
jQuery对JavaScript中的DOM操作进行了封装
jQuery中的DOM操作：
样式操作
内容及Value值操作
节点操作
节点属性操作
节点遍历
CSS-DOM操作
提示: “元素”和“节点”含义大同小异，本章并不严格区分
设置和获取样式值
使用css()为指定的元素设置样式值或获取样式值
语法:
示例:
追加和移除样式
追加样式
语法:
$(selector).addClass(class);
或 $(selector).addClass(class1 class2 … classN);
示例：
.text{ padding:10px;}
.content {background-color:#FFFF00; }
.border {border:1px dashed #333; }
$("h2").mouseover(function() {
$("p").addClass("content border");
});
移除样式
语法：
$(selector).removeClass("class") ;
或 $(selector).removeClass("class1 class2 … classN ") ;
示例：
$("h2").mouseout(function() {
$("p").removeClass("text content");
});
切换样式
toggleClass()
模拟了addClass()与removeClass()实现样式切换的过程 //添加和删除
语法：
$(selector).toggleClass(class) ;
示例：
$("h2").click(function() {
$("p").toggleClass("content border");
});
判断是否含指定的样式
语法：$(selector). hasClass(class);
示例：
$("h2").mouseover(function() {
if(!$("p").hasClass("content ")){
$("p").addClass("content ");
}
});
$("h2").mouseout(function() {
if($("p").hasClass("content ")) {
$("p").removeClass("content ");
}
});
内容操作
HTML代码操作：
标签内容操作：
属性值操作：
HTML代码操作
html()可以对HTML代码进行操作，类似于JS中的innerHTML
示例：
//清空 .html(“”)
//注，清空需要添加引号，如果html方法括号不添加任何内容,是获取html代码
标签内容操作
text()可以获取或设置元素的文本内容
示例：
html( ) 和text( )方法的区别
属性值操作
val()可以获取或设置元素的value属性值
语法：
示例：
小结:
JQuery样式操作：
css()设置和获取样式值
追加，移除，切换样式
JQuery内容操作：
HTML代码操作
标签内容操作
属性值操作
节点操作
jQuery中节点操作；
查找节点（前面章节已讲）；
创建节点；
插入节点；
删除节点；
替换节点；
复制节点；
创建节点元素
工厂函数$()用于获取或创建节点
$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点
插入节点
元素内部插入子节点
元素外部插入同辈节点
删除节点
jQuery提供了三种删除节点的方法
remove()：删除整个节点 $(selector).remove([expr]);
empty()：清空节点内容 $(selector).empty();
detach()：删除整个节点，保留元素的绑定事件、附加的数据
替换节点
replaceWith()和replaceAll()用于替换某个节点
示例：
复制节点
clone()用于复制某个节点
语法：
示例：
属性操作
获取与设置元素属性
删除元素属性
获取与设置元素属性
attr()用来获取与设置元素属性
语法：
示例：$(".contain img").attr({width:"200",height:"80"});
删除元素属性
removeAttr()用来删除元素的属性
语法：
$(selector).removeAttr(name) ;
示例：
节点遍历
遍历子元素
遍历同辈元素
遍历前辈元素
其他遍历方法
遍历子元素
children()方法可以用来获取元素的所有子元素
语法：$(selector).children([expr]);
示例：
遍历同辈元素
jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素
遍历前辈元素
jQuery中可以遍历前辈元素
parent()：获取元素的父级元素
parents()：获取元素的祖先元素
示例：$("li:eq(1)").parent().addClass("orange");
$("li:eq(1)").parents().addClass("orange");
提示：
jQuery中提供了find()、filter()等节点操作方法，请登录青鸟教育云平台进行学习
其他遍历方法
each( ) ：规定为每个匹配元素规定运行的函数
//each()相当于循环
语法：
示例：
end( )：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态 //他前面的对象
示例：
$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
$(".gameList li").first().css("background","#b8e7f9").end().last().css ("background","#d3f4b5");
$(".gameList li:last").css("border","none");
CSS-DOM操作
除css()外，还有获取和设置元素高度、宽度等的样式操作方法
总结