本章简介：
DOM为文档提供了一种结构化的表现形式，通过操作DOM可以改变文档的内容和展现形式。
在实际的运用运用中，DOM更像是一座桥梁，通过它可以实现扩平台、跨语言的标准访问
本章将认识如何使用JQuery操作DOM中的各种元素和对象。
本章单词：
Text： 文本
Append 附加
Prepend 预先
After 后来
Before 在..之前
Remover 移除
Replace 取代，代替
Siblings 兄弟姐妹
8、1 DOM操作
在JQuery中，DOM操作是一个非常重要的组成部分。
JQuery中提供的操作DOM的方法，不仅简化了传统的繁冗代码，更加解决了跨平台的浏览器兼容性。
JQuery中的操作和JavaScript中的一样，分为三类
DOM-Core 核心、HTM-DOM、CSS-DOM
JQuery中的DOM操作主要分为样式操作、文本和value属性值操作、节点操作、
节点操作中又包含了属性操作、节点遍历、CSS-DOM操作
8、2 样式操作
在JQuery中，对元素的样式操作主要有直接设置样式值、获取样式值、追加样式、移除样式和切换样式。
1、 设置和获取样式
在JQuery中，使用 CSS() 方法为指定的元素设置样式值或 获取样式值。
//设置单个属性
$("h1").css("background","red");
//设置多个属性
$("h1").css({"background":"red","height":"250px","width":"250px"});
//获取属性
$("h1").css("background");
2、 追加和移除样式
使用addClass（）方法仅是追加样式，即它原有的样式不会消失。
使用 removeClass() 方法能移除样式，它的语法和 addClass（）很相似。
//追加单个样式 $("h1").addClass("类名"); //追加多个样式，中间用空格隔开 $("h1").addClass("类名1 类名2 类名3");
//移除单个样式 $("h1").removeClass("类名"); //移除多个样式，中间用空格隔开 $("h1").removeClass("类名1 类名2 类名3");
3、 切换样式
之前学习的 toggle() 方法可以切换元素的可见状态，
使用 toggleClass() 方法 可以切换不同元素的类样式。
ToggleClass() 方法模拟了addClass() 方法和 removeClass() 方法实现样式切换的过程。
$("h1").toggleClass("类名");
4、 判断是否包含指定的样式
在实际的应用中，会经常用到追加和移除样式，如果不知道是否已经应用了样式，可以使用
HasClass() 方法进行判断，返回值为 布尔值。
$("h1").hasClass("类名");
8、3 内容操作
除了样式操作外，JQuery还提供了对元素内容操作的方法，即对HTML代码、标签内容和属性值内容三者的操作。
1、 HTML代码操作
在JQuery中，可以使用html()方法对HTML代码进行操作，此方法类似于传统Javscript中的 innerHTML，通常用于动态的新增页面内容。
$("div").html("添加的内容。");
无参数时，表示获取被选元素的文本内容包括HTML标签。
支持（X）HTML文档，不能用于XML文档。
2、 标签内容操作
在JQuery中，可以使用 text()方法获取和设置元素的文本内容，不会保括HTML标签。
$("div").text("添加的文本内容。");
支持HTML文档，也支持XML文档。
3、 属性值操作
获取元素 value 属性值的方法 val（），该方法非常常用，多用于操作表单的 input 元素。
此方法也分带参数和不带参数。
$("input").val(); 获取 $("input").val("设置的 value 值"); 设置
8、4 节点与属性操作
JQuery中对节点的操作主要分为两种类型，一种是对节点本身的操作，另一种是对节点中属性节点的操作。
DOM模型中的节点类型分为元素节点，文本节点，属性节点。
文本节点与属性节点都包含在元素节点之中，它都是DOM中的节点类型。
节点操作
1、 查找节点
想要对象节点进行操作之前，需要先要找到此节点。
//找到 h2节点 $("h2").css();
2、 创建节点
$() 函数，该函数是用于将匹配的DOM元素转换为JQuery对象的，它被比喻成工厂函数。
//创建一个 li 节点 var $node1 = $("<li></li>"); //创建一个 div 节点 var $node2 = $("<div></div>");
3、 插入节点
在JQuery中想要动态的新增节点，必须对创建的节点执行插入或追加操作。
JQuery提供的方法从插入方式主要分为两大类：
内部插入
//向所选择的元素内部插入节点 $("div").append("节点名称"); //把所选元素追加到另一个指定的元素中 $("div").appendTo("节点名称"); //向每个选择的元素内部前置内容 $("div").prepend("节点名称"); //将所匹配的元素前置到指定的元素中，此方法颠倒了 prepend()插入元素的操作。 $("div").prependTo("节点名称");
外部插入节点。
// 在匹配的元素之后插入元素， $("div").after("节点名称"); //将所匹配的元素插入到指定元素后面 $("div").insertAfter("节点名称"); //向所选择的元素外部前面插入内容 $("div").before("节点名称"); //将匹配的元素插入指定元素前面 $("div").insertBefore("节点名称");
4、 删除节点
删除节点也是DOM操作中必不可少的操作之一。
JQuery提供了 remove（）、detach（）、empty（）、三种删除节点的方法。
//移除所有的 div $("div").remove(); $("div").detach();
Remove（） 方法和 detach（）方法，都能将匹配的元素从DOM文档中删除。
两者的相同之处是删除后该元素在JQuery对象中依然存在。
不同的之处在于，detach（）方法删除元素后，对象中仍素的绑定事件、附加的数据
而 remove（）有这种作用。
//清除所有 div 里的文本内容 $("div").empty();
Empty() 方法并不是删除节点，而是清空节点，它能清空元素中的内容。
5、 替换节点
在JQuery中，如果需要替换某个节点，可以使用 replaceWIth() 和 replaceAll（）方法。
//replaceWith()方法的作用是将所匹配的元素替换成指定HTML或者DOM元素。 $("div").replaceWith("节点"); //replaceAll() 方法与 replaceWith() 方法相同，只是颠倒了。 $("div").replaceAll("节点");
6、 复制节点
在JQuery中，想要对节点进行复制，可以使用 clone() 方法。
该方法能够生成被选元素的副本，包含子节点，文本、属性。
//值为 true 时，复制事件处理 $("body").clone(true); //值为 false 时，不复制事件处理 $("body").clone(false);
属性操作
在JQuery中，属性操作的方法有两种，即获取与设置属性的 attr() 方法，和删除元素属性的 removeAttr() 方法。
1、 获取与设置元素属性
// 获取 div 的name 属性值
$("div").attr("name");
//给 div 设置 属性
$("div").attr({width:"200",height:"80px"});
2、 删除元素属性
//删除 div 的 name 属性
$("div").removeAttr("name");
8、5 节点遍历
1、遍历子元素
在JQuery中遍历子元素的方法只有一个，即 children（）方法。
var $child = $("div").children();
2、遍历同辈元素
在JQuery中提供了三种遍历同辈元素的方法：
//获取紧邻的前一个元素
var prev = $("div").prev();
//获取紧邻的后一个元素
var next = $("div").next()
//获取同辈的所有元素
var siblings = $("div").siblings();
3、 遍历前辈元素
在JQuery中，用于遍历前辈元素的有：
//遍历 父辈
$("div").parent()
//遍历 父级，直到 html
$("div").parents()
4、其他的遍历方法
在JQuery中还有很多遍历方法：
// each() 方法为每个匹配元素规定运行的函数
$("div").each();
//end() 方法结束当前链条最近的筛选操作，并将匹配元素还原成之前的状态。
// 还有 find()、filter()、eq()、first()、last()等方法
8、6 CSS-DOM操作
JQuery支持 CSS-DOM 操作，除了之前的css()方法外，还有很多方法
// css() 设置或获取元素的样式属性
$("div").css();
//height() 设置或获取元素的高度
$("div").height();
//width() 设置或获取元素的宽度
$("div").width();
//offset() 返回以像素为单位的 top 和 left 坐标，此方法仅对可见元素有效
$("div").offset();
//offsetParent() 返回最近的已定位祖先元素，定位元素指的是 设置了 position 属性
$("div").offsetParent();
//position() 返回第一个匹配元素相对于父元素的位置
$("div").position();
//scrollLeft(); 设置或返回匹配元素相对滚动条左侧的偏移
$("div").scrollLeft();
//scrollTop(); 设置或返回匹配元素相对滚动条顶部的偏移
$("div").scrollTop();
本章总结：
1、DOM操作分为DOM-Core、HTML-DOM、CSS-DOM，三种操作类型。
2、使用 css（）方法可以为元素添加样式，使用addClass（）为元素追加样式，使用removeClass（）方法移除样式，使用toggleClass（）方法切换样式。
4、 使用html（）方法可以获取或设置元素的HTML代码，使用text（）方法可以获取获取或设置元素的文本内容，使用val（）方法可以获取元素value 属性值
5、 对DOM元素节点的操作包括查找、创建、替换、复制、遍历等
6、 在JQuery中，提供了append（）等一系列方法插入节点，使用remove（）等方法删除节点
7、 在JQuery中，使用attr（）方法可获取或设置元素属性，使用 removeAttr（）方法可删除元素属性
8、 在JQuery中，历操作包括遍历子元素，遍历同辈元素、遍历前辈元素等
9、在JQuery中，提供了获取和设置元素高度、宽度、相对位置等CSS-DOM方法。