jQuery 操作DOM
一、访问元素
在访问页面时，需要与页面中的元素进行交互式的操作。在操作中，元素的访问是最频繁、最常用的，主要包括对元素属性、内容、值、CSS的操作。
1、 元素属性操作
在jQuery中，可以对元素的属性执行获取、设置、删除的操作，通过attr()方法可以对元素属性执行获取和设置操作，而removeAttr()方法则可以轻松删除某一指定的属性。
1.1、 获取元素的属性
获取元素属性的语法格式如下：
其中，参数name表示属性的名称。
示例 通过attr(name)方法获取元素的属性
1.2、设置元素的属性
在页面中，attr()方法不仅可以获取元素的属性值，还可以设置元素的属性，其设置属性语法格式如下所示：
其中，参数key表示属性的名称，value表示属性的值。如果要设置多个属性，也可以通过attr()方法实现，其语法格式如下所示： 另外，attr()方法还可以绑定一个function()函数，通过该函数返回的值作为元素的属性值，其语法格式如下所示： 其中，参数index为当前元素的索引号，整个函数返回一个字符串作为元素的属性值。
1.3、删除元素的属性
jQuery中通过attr()方法设置元素的属性后，使用removeAttr()方法可以将元素的属性删除，其使用的语法格式为：
其中，参数name为元素属性的名称。例如，可以通过如下的代码删除标记<img>中的src属性：
2、 元素内容操作
在jQuery中，操作元素内容的方法包括html()和text()。前者与JavaScript中的innerHTML属性类似，即获取或设置元素的HTML内容；后者类似于JavaScript中的innerHTML属性，即获取或设置元素的文本内容。二者的格式与区别如下表所示。
html()和text()方法的区别
语法格式 参数说明 功能描述 html() 无参数 用于获取元素的HTML内容 html(val) val参数为元素的HTML内容 用于设置元素的HTML内容 text() 无参数 用于获取元素的文本内容 text(val) val参数为元素的文本内容 用户设置元素的文本内容
说明：html()方法仅支持XHTML的文档，不能用于XML文档，而text()则既支持HTML文档，也支持XML文档。
示例 设置或获取元素的内容
3、 获取或设置元素值
在jQuery中，如果要获取元素的值，是通过val()方法实现的，其语法格式如下所示：
其中，如果不带参数val，则是获取某元素的值；反之，则是将参数val的值赋给某元素，即设置元素的值。该方法常用于获取或设置对象的值。另外，通过val()方法还可以获取select标记中的多个选项值，其语法格式如下所示：
示例 设置或获取元素的值
页面效果如下：
注意：在val(val)方法中，如果有参数，其参数还可以是数组的形式，即val(array)，其作用是设置元素被选中。因此$(":radio").val(["radio2", "radio3"])此句代码的意思为：ID号为radio2和radio3的单选框被选中。
4、 元素样式操作
在页面中，元素样式的操作包括：直接设置样式、增加CSS类别、类别切换、删除类别几部分。
4.1、直接设置元素样式值
在jQuery中，可以通过css()方法为某个指定的元素设置样式值，其语法格式如下所示：
其中，name为样式名称，value为样式的值。
4.2、增加CSS类别
通过addClass()方法增加元素类别的名称，其语法格式如下：
其中，参数class为类别的名称，也可以增加多个类别的名称，只需要用空格将其隔开即可，其语法格式为：
注意：使用addClass()方法仅是追加样式类别，即它还保存原有的类别。
4.3、类别切换
通过toggleClass()方法切换不同的元素类别，其语法格式如下：
其中，参数class为类别名称，其功能是当元素中含有名称为class的CSS类别时，删除该类别，否则增加一个该名称的CSS类别。
4.4、删除类别
与增加CSS类别的addClass()方法相对应，removeClass()方法则用于删除类别，其语法格式如下：
其中，参数class为类别名称，该名称是可选项，当选该名称时，则删除名称是class的类别，有多个类别时用空格隔开。如果不选名称，则删除元素中的所有类别。如果要删除p标记是cls0的类别，可以使用如下的代码：
注意：toggleClass()方法可以实现类别间的切换，而css()或addClass()方法仅是增加新的元素样式，并不能实现类别的切换功能。
二、创建节点元素
我们知道，整个页面是一个DOM模型，页面中的各元素通过模型的节点相互关联形成树状，因此，如果要在页面中增加某个元素，只需要找到元素的上级节点，通过函数$(html)完成元素的创建后，增加到该节点中。
函数$()用于动态创建页面元素，其语法格式如下：
其中，参数html表示用于动态创建DOM元素的HTML标记字符串，即如果要在页面中动态创建一个div标记，并设置其内容和属性，可以加入如下代码： 执行上述代码后，将在页面文档body中创建一个div标记，其内容为“Write Less Do More”，属性title的值为“jQuery 理念”。
三、插入节点
在页面中动态创建元素需要执行节点的插入或追加操作。而在jQuery中，有多种方法可以实现该功能，append()方法仅是其中之一，按照插入元素的顺序来分，可以分为内部和外部两种插入方法。下面将分别对这些方法进行详细介绍。
3.1、 内部插入节点方法
内部插入节点的方法如下表所示：
| 语法格式 | 参数说明 | 功能描述 |
| append(content) | content表示追加到目标中的内容 | 向所选择的元素内部插入内容 |
| append(function(index, html)) | 通过function函数返回追加到目标中的内容 | 想所选择的元素内部插入function函数所返回的内容 |
| appendTo(content) | content表示被追加的内容 | 把所选择的元素追加到另一个指定的元素集合中 |
| prepend(content) | content表示插入目标元素内部前面的内容 | 向每个所选择的元素内部前置内容 |
| prepend(function(index, html)) | 通过function函数返回插入目标元素内部前面的内容 | 向所选择的元素内部前置function函数所返回的内容 |
| prependTo(content) | content表示用于选择元素的jQuery表达式 | 将所选择的元素前置到另一个指定的元素集合中 |
3.2、 外部插入节点方法
| 语法格式 | 参数说明 | 功能描述 |
| after(content) | content表示插入目标元素外部后面的内容 | 向所选择的元素外部后面插入内容 |
| after(function) | 通过function函数返回插入目标外部后面的内容 | 向所选择的元素外部后面插入function函数所返回的内容 |
| before(content) | content表示插入目标元素外部前面的内容 | 向所选择的元素外部前面插入内容 |
| before(function) | 通过function函数返回插入目标外部前面的内容 | 向所选择的元素外部前面插入function函数所返回的内容 |
| insertAfter(content) | content表示插入目标元素外部后面的内容 | 将所选择的元素插入另一个指定的元素外部后面 |
| insertBefore(content) | content表示插入目标元素外部前面的内容 | 将所选择的元素插入另一个指定的元素外部前面 |
四、复制节点
在页面中，有时需要将某个元素节点复制到另外一个节点后，如购物网站中购物车的设计。在传统的javaScript中，需要编写较为复杂的代码，而在jQuery中，可以通过方法clone()轻松实现，该方法的语法格式为：
其功能为复制匹配的DOM元素并且选中复制成功的元素，该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。如果需要在复制时将该元素的全部行为也进行复制，可以通过方法clone(true)实现，其格式为： 其中的参数设置为true就可以复制元素的所有事件处理。示例 复制元素节点
页面效果如下所示：
注意：由于本示例中使用的是clone(true)方法，因此，当单击被复制的新图片时，由于它具有原图片的事务处理，因此，将在该图片的右侧出现一副通过其复制的新图片；如果使用clone()方法，那么只有单击原图片才可以复制新的图片元素，新复制的图片元素不具有任何功能。
五、替换节点
在jQuery中，如果要替换元素中的节点，可以使用replaceWith()和replaceAll()这两种方法，其语法格式分别如下：
该方法的功能是将所有选择的元素替换成指定的HTML或DOM元素，其中参数content为被所选择元素替换的内容。 该方法的功能是将所有选择的元素替换成指定selector的元素，其中参数selector为需要被替换的元素。示例 替换元素节点
页面效果如下所示：
注意：replaceWith()与replaceAll()方法都可以实现元素节点的替换，二者最大的区别在于替换字符的顺序，前者是用括号中的字符替换所选择的元素，后者是用字符串替换括号中所选择的元素。同时，一旦完成替换，被替换元素中的全部事件都将消失。
六、包裹节点
在jQuery中，不仅可以通过方法替换元素节点，还可以根据需求包裹某个指定的节点，对节点的包裹也是DOM对象操作中很重要的一项，其与包裹节点相关的全部方法如下表所示：
| 语法格式 | 参数说明 | 功能描述 |
| wrap(html) | html参数为字符串代码，用于生成元素并包裹所选元素 | 把所有选择的元素用其他字符串代码包裹起来 |
| wrap(elem) | elem参数用于包装所选元素的DOM元素 | 把所有选择的元素用其他DOM元素包装起来 |
| warp(fn) | fn参数为包裹结构的一个函数 | 把所有选择的元素用function函数返回的代码包裹起来 |
| unwrap() | 无参数 | 移除所选元素的父元素或包裹标记 |
| warpAll(html) | html参数为字符串代码，用于生成元素并包裹所选元素 | 把所有选择的元素用单个元素包裹起来 |
| warpAll(elem) | elem参数用于宝藏所选元素的DOM元素 | 把所有选择的元素用单个DOM元素包裹起来 |
| warpInner(html) | html参数为字符串代码，用于生成元素并包裹所选元素 | 把所有选择的元素的自内容（包括文本节点）用字符串代码包裹起来 |
| warpInner(elem) | elem参数用于包装所选元素的DOM元素 | 把所有选择的元素的子内容（包括文本节点）用DOM元素包裹起来 |
| warpInner(fn) | fn参数为包裹结构的一个函数 | 把所有选择的元素的自内容（包括文本节点）用function函数返回的代码包裹起来 |
在上述表格中，warp(html)与wrapInner(html)方法较为常用，前者包裹外部元素，后者包裹元素内部的文本字符。
七、遍历元素
在DOM元素操作中，有时需要对同一标记的全部元素进行统一操作。在传统的JavaScript中，先获取元素的总长度，然后，以for循环语句，递减总长度，访问其中的某个元素，代码相对复杂；而在jQuery中，可以直接使用each()方法实现元素的遍历。其语法格式如下：
其中，参数callback是一个function函数，该函数还可以接受一个形参index，此形参为遍历元素的序号（从0开始）；如果需要访问元素中的属性，可以借助形参index，配合this关键字来实现元素属性的设置或获取。
八、删除元素
在DOM操作页面时，删除多余或指定的页面元素是非常必要的，jQuery提供了两种可以删除元素的方法，即remove()和empty()。严格来说，empty()方法并非真正意义上的删除，使用该方法，仅仅可以清空全部的节点或节点所包括的所有后代元素，并非删除节点和元素。
remove()方法的语法格式如下：
其中，参数expr为可选项，如果接受参数，则该参数为筛选元素的jQuery表达式，通过该表述式获取指定的元素，并进行删除。empty()方法的语法格式如下：
其功能为清空所选择的页面元素或所有的后代元素。
九、综合案例分析——数据删除和图片预览在项目中的应用
该案例的需求如下：
- 在页面中创建一个表格，用于展示多项数据信息，各行间采用隔行变色的方法展示每一行的数据。
- 如果选中表格中某行的复选框，并单击表格下面的“删除”按钮，那么将删除其选中的行；选中“全选”复选框后，再次单击“删除”按钮时，将删除表格的全部行数据。
- 如果将鼠标一道表格中某行的小图片上，将在该图片的右下角出现一幅与之对应的大图片，用以实现图片预览的效果。
界面效果如下所示：
功能实现代码如下：
