什么是DOM？
DOM(Document Object Model) 文档对象模型，方便开发者对HTML结构元素进行修改和展示，DOM 不但内容庞大繁杂，而且我们开发的过程中需要考虑更多的兼容性、扩展性。在jQuery 中，已经将最常用的DOM 操作方法进行了有效封装，并且不需要考虑浏览器的兼容性。
- D 表示的是页面文档Document、O 表示对象Object，即一组含有独立特性的数据集合、M表示模型Model，即页面上的元素节点和文本节点。
- DOM 有三种形式，标准DOM、HTML DOM、CSS DOM，大部分都进行了一系列的封装，在jQuery 中并不需要深刻理解它。
-
树形结构用来表示DOM，就非常的贴切，大部分操作都是元素节点操作，还有少部分是文本节点操作。
DOM树结构
设置元素及内容
通过我们前面所学习的选择器选中DOM之后就可以使用jQuery提供给我们的方法对DOM进行操作。
DOM操作方法：
-
html()
获取和设置DOM结构中的HTML内容。
语法：
$(selector).html() // 获取DOM结构中的html内容
$(selector).html(htmlText) //设置DOM结构中的html内容
$(selector).html(function(index, value) {}) // 设置DOM结构中的HTML内容
在传入HTML文本的时候，jQuery会自动将html文本解析成标签的形式。
在使用该方法设置HTML文本的时候，会将原本的内容全部清空，如果需要对某个DOM进行内容的追加，应使用如下方法：
// 先将DOM中原本的内容获取到来，然后再追加要设置的内容
$('h2').html($('h2').html() + '要追加的内容')
-
text()
获取和设置DOM结构中的文本内容。
语法：
$(selector).text() // 获取DOM中的文本内容
$(selector).text(text) // 设置DOM中的文本
$(selector).text(function(index, value) {}) // 设置DOM中的文本
html()和text()的区别在于text()方法不会解析DOM中的html标签，只会获得DOM中的纯文本，而html()方法不仅能够获取DOM中的文本，同时会解析出DOM中的标签，并且在设置的时候也可以解析传入的HTML标签。
-
val()
获取和设置DOM结构中的值，一般用于表单部分。
语法
$(selector).val() // 获取表单的值
$(selector).val(value) // 设置表单的值
$(selector).val([value1, value2, ...]) // 设置多个值
在使用val()设置表单的值的时候，要注意的是，如果你要设置的是多个值，传入参数应为一个数组。
操作元素的属性
jquery除了可以对元素的内容进行操作之外，还可以对元素的属性进行操作，包括设置属性值，获取属性值以及删除属性值。
-
attr()
获取和设置元素的属性值
$('a').attr('href') // 获取a元素的href属性
$('a').attr('href', 'https://www.jianshu.com') // 修改a元素的href属性值为简书
$('a').attr({'href': 'https://www.jianshu.com', 'target': '_blank'}) // 修改a元素的href属性为简书，同时修改超链接打开方式为_blank
注意：可以使用attr()来创建ID属性和class属性，但是强烈建议不要这么去做。
-
removeAttr()
删除元素的属性值
$('a').removeAttr('title') // 移除a元素的title属性
该方法参数不可以为匿名函数，当该方法传入匿名函数时无效
操作元素的css样式
-
css()
该方法是获取和设置元素的css样式
语法：
$('div').css('background-color') // 获取div元素的背景颜色
$('div').css(['width', 'height']) // 同时获取div元素的宽度和高度，返回一个由css属性名和属性值组成的对象
$('div').css('width', '100px') // 设置div的宽度为100px
// 如果需要设置多个css样式可用如下语法
$('div').css({
'color': 'red',
'background-color': 'black'
}) // 设置div的文字颜色为红色，背景颜色为黑色
// 如果需要设置多个css样式还可以使用如下语法
$('div').css('width', '100px').css('height', '100px') // 设置元素宽度和高度为100px
/**
* 当需要设置多个css样式时，建议使用第一种方法设置
* 当然也可以使用第一种方法，第一种方法是对css方法传入一个css属性名和属性值的键值对对象
* 第二种方法是当第一个css样式操作完成后返回了一个jquery对象，然后再设置第二个css样式
* 第二种方法叫做jquery的链式操作
*/
-
addClass()
该方法是为元素添加class
语法：
$('div').addClass('ad') // 为div元素添加一个名为ad的class类名
$('div').addClass('wh bgcolor-red') // 为元素添加名为wh和bgcolor-red两个class
-
removeClass()
该方法是为元素移除class
语法：
$('div').removeClass('wh') // 为元素div移除一个名为wh的class
$('div').removeClass('wh color-white') // 为元素div移除名为wh和color-white两个class
-
toggleClass()
该方法是为元素切换样式
语法：
$('div').toggleClass('color-red') // 如果元素div存在color-red样式则移除，否则添加
$('div').toggleClass('bgcolor-black color-red') // 如果元素存在bgcolor-black和color-red样式则移除，否则添加
