（3）jQuery篇 —— 用jQuery来操作DOM

1. 获取元素的属性

获取和设置属性使用jQuery的attr方法，移除属性使用removeAttr方法。

语法： $(selector).attr(attribute)

来个例子： $( 'img' ).attr( 'src' )  // 获取img元素下的src属性

2. 设置元素的属性

既然我们都可以获取到元素的属性，那么一般来说，我们都会对获取的元素进行操作。

语法： $(selector).attr(attribute,value)

比如我们可以用设置一个div的title、id等。

 // 设置div的id
 $('#div1').attr('id','div2');

当然，jQuery这么有意思的东西，当然是支持设置多个属性的啦。

 // 设置多个属性
 $('#div1').attr({
     'href': 'http://www.baidu.com',
     'title': '百度'
 });

3. 修改元素内容

有3个方法可以获取元素内容：

（1） text() ： 设置或返回所选元素的文本内容

（2） html() ： 设置或返回所选元素的内容（包括HTML标记）

（3） val() ： 设置或返回表单字段的值

text和html最大的区别就在于text只返回元素的文本内容，而html返回的是将HTML解析后的内容。

而val返回的是表单的内容。

4. 动态创建内容

语法： $(html)

还记得最开始的第一个jQuery吗？那就是动态创建的div。

（1） append() ： 在被选元素的结尾插入内容

（2） prepend() ： 在被选元素的开头插入内容

（3） after()： 在被选元素之后插入内容

（4） before() ： 在被选元素之前插入内容

其中前两个是在文档的外部插入，后两个是在文档的内部插入。

其实呢，还有两个：insertAfter()和insertBefore()，这个和after()、before()有什么区别呢？

区别呀，很简单，就在于主宾的颠倒。A.after(B) 等价于 B.insertAfter(A)。很奇怪为什么会有两个？只需要一个不就好了吗？以后看下源码再说这个。

奇葩的是。。。append()和prepend()也有对应的两个： appendTo()和prependTo()，其中append是拿，将后面的东西拿给append前面；而appendTo是给，将前面的东西给后面。。真的是绕的慌！

其实仔细的想了想。。。貌似是方便了书写。不管你哪个写在前面，你都可以更改后面来达到同样的目的，而不用为了使用append或appendTo而重新写一遍谁在前，谁在后了。

5. 动态删除节点

（1） remove() ： 从DOM中删除所有匹配的元素。

（2） empty() ： 删除匹配的元素集合中所有的子节点。

（3） detach() ： 从DOM中删除所有匹配的元素。

咋一看，很奇怪，第一个和第三个不是一样的吗！！！区别啊就在于，remove()是删除DOM节点包括所有的比如绑定的事件，附加的数据等都会被移除；而detach()则是将所有绑定的事件、附加的数据等都保留下来。而empty()就是说清空该节点内部的所有元素，而该节点保留下来。

比如说：<p><span>哈哈</span></p>，对于这行代码我们empty('p')，那么结果是什么呢？结果就是只保留了<p></p>，而中间的子节点都会被删除啦，现在应该是懂了吧？