用jQuery来操作DOM

一、修改元素属性

要使用jQuery操纵DOM，必须先使用选择器选中一个或多个元素，由于jQuery是对结果集进行隐式迭代的操作，因此一个jQuery对象可以同时对多个元素进行属性更改。

1、获取元素的属性

获取和设置属性使用jQuery的attr方法，而移除属性使用removeAttr方法，其中获取元素属性的attr语法为：

$(selector).attr(attribute)

相关例子为：

$("img").attr("src");

2、设置元素的属性

要设置元素的属性，同样使用attr函数，语法如下：

$(selector).attr(attribute,value)

其中attribute用来指定属性的名称，value用来指定属性的值。
在使用attr设置属性时使用“属性名称：属性值”匹配的语句，attr还可以同时设置两个以上的属性值。

二、修改元素内容

有3个方法可以用来获取HTML元素的内容，分别是：

• text()：设置或返回所选中元素的文本内容。
• html()：设置或返回所选元素的内容（包括HTML标记）。
• val()：设置或返回表单字段的值。

text和html的明显区别是，tezt只返回元素的文本内容，而html返回的是将HTML解析后的内容。val返回的是表单的内容。

三、动态创建内容

jQuery还允许开发人员动态地为页面添加内容，类似于JavaScript语言中地CreateElement，jQuery动态创建HTML元素使用工厂函数$()实现，
语法如下：

$(html)

其中参数html是要动态创建地HTML标记，它会动态创建一个DOM对象，但是这个DOM对象并没有添加到DOM对象树中，可以使用如下几个jQuery函数来将其添加到DOM对象树：

• append()：在被选元素的结尾插入内容。
• prepend()：在被选元素的开头插入内容。
• after()：在被选元素之后插入内容。
• before()：在被选元素之前插入内容。

四、动态插入节点

动态插入节点如果不插入到DOM对象树中，那么是不会在页面上呈现的。

动态插入方法列表

方法名称	方法描述
append()	方法在被选元素的结尾（仍然在内部）插入指定内容
appendTo()	方法在被选元素的结尾（仍然在内部）插入指定内容
prepend()	方法在被选元素的开头（仍然在内部）插入指定内容
prependTo()	方法在被选元素的开头（仍然在内部）插入指定内容
after()	在被选元素后插入指定的内容
before()	在被选元素前插入指定的内容
insertAfter()	把匹配的元素插入到一个指定的元素集合的后面
insertBefore()	把匹配的元素插入到一个指定的元素集合的前面

append和appendTo、prepend和prependTo的不同之处在于内容和选择器的位置。

五、动态删除节点

jQuery提供了两个可以用来从DOM元素树中移除节点的方法：

• remove()方法：用来删除指定的DOM元素，它会将节点从DOM元素树中移除，但是会返回一个指向DOM元素的引用，因此它并不是真正地将jQuery引用到地元素对象删除，而是可以通过这个引用来继续操作元素。
• empty()方法：该方法也不会删除节点，只是清空节点中的内容，DOM元素依然保持在DOM元素树中。

remove()方法会把元素从DOM对象树中移除，但是不会把引用了这些对象的jQuery对象删除，因此还是可以使用jQuery对象来进行一些操作。而empty只是将元素中的内容进行清空。

六、常见问题

1、tagName和attribute的区别

jQuery中使用attr方法来获取或设置元素的属性，而这里的属性指的是attribute，不是tagName，tagName是标签的名称，不是标签的属性。

2、attr方法和prop方法都用于来获取元素的属性吗

使用attr方法来获取或修改元素的属性，但是针对Boolean值的元素，在获取属性时，有一些区别，建议使用prop，尤其是没有为单元按钮或复选框设置初始值的情况下。