使用jQuery操作DOM

DOM操作

在jQuery中，DOM操作是一个非常重要的组成部分。jQuery总提供了一系列操作DOM强有力的方法，它们不仅简化了传统JavaScript操作DOM是繁冗的代码，更加解决了令开发者苦不堪言的跨平台浏览器兼容性。

DOM操作分类

JavaScript操作DOM时分为三类——DOM Core(核心),HTML-DOM和CSS-DOM。

jQuery中的DOM操作

jQuery中的DOM操作主要可分为样式操作，文本和value属性值操作，节点操作，节点操作中又包含属性操作，节点遍历和CSS-DOM操作，其中，最核心的部分是节点操作和节点遍历
样式操作
1.设置和获取样式值
语法

$(selector).css(name,value)//设置单个属性
//或者
$(selector).css({name:value,name:value,name:value...})//同时设置多个属性

css()方法的参数说明如表所示

参数	描述
name	必需。规定CSS属性的名称。该参数可以是任何CSS属性。
value	必需。规定CSS属性的值。该参数可以是任何CSS属性值

获取CSS属性值的方法
语法

$(selector).css(name)//获取属性

2.追加样式和移除样式
（1）追加样式语法

$(selector).addClass(class)
//或
$(selector).addClass(class1 calss2...classN)

(2)移除样式

$(selector).removeClass(class)//移除单个样式
或
$(selector).removeClass(class1 class2...calssN)//移除多个样式

3.切换样式

$(selector).toggleClass(class)

toggleClass()方法模拟了addClass()方法与removeClass方法实现样式切换的过程，它与toggle()方法切换元素可见状态有着异曲同工之妙，减少了代码量，提高了代码运行效率。

4.判断是否含指定的样式

$(selector).hasClass(class)

class是类名，该名称是必选的，规定指定元素中查找的类名，返回值为布尔类型，如果包含查找的类则返回true，否则返回false。
html()方法和text()方法的区别

节点与属性操作

节点操作
1.节点查找
2.创建节点元素
语法

$(selector)
或
$(element)
或者
$(html)

3.插入节点
想要实现节点动态的新增节点，必需对创建节点执行插入或追加操作，而jQuery提供了多种方法实现节点的插入。从插入方式上主要分为两大类：内部插入节点和外部插入节点

4.删除节点
语法

$(selector).remove({expr})

5.替换节点
可以使用replaceWith()方法与replaceAll()方法
6.复制节点
语法

$(selector).clone([includeEvents])

属性操作
1.获取与设置元素属性

$(selector).attr([name])//获取属性值
或者
$(selector).attr({[name1:value1],[name2:value2],[nameN:valueN]})//设置多个属性值

节点遍历
在jQuery中主要提供了遍历子元素，遍历同辈元素，遍历前辈元素和一些特别的遍历方法
遍历子元素

$(selector).children([expr])

插入节点