之所以选择jquery进行dom操作确实是因为它的选择器非常强大，相比于传统的客户端js里的document对象选取方式更加灵活。而且在DOM的各种操作上面功能也十分健全，所有的操作都从一个小小的$()函数开始！

选择器语法

如果熟悉CSS的话那这部分应该比较轻松，jQuery的选择器语法与css中的选择器非常相似，使用$()函数进行选择，最后返回的是一个jQuery对象的列表。

基本的整个页面的选择器

1
2
3
$("p")          // 选取页面中所有的<p>元素
$(".content")   // 选取页面中所有class为content的元素
$("#content")   // 选取页面中id为content，一般只有一个

进一步，用空格隔开可以得到子元素

1
2
$("ul li")          // 选取ul元素下的所有的li子元素
$("#content span")  // 选取id为content元素下所有的span的元素，个人认为这个很有用，在页面中指定一个需要控制的区域用div包裹起来指定一个id，接下来的操作就十分简单了。

上面介绍的是一些比较基础和实用的技术，起码我觉得一些比较简单的页面进行一些简单的组合就差不多了，实在不行的话就指定id吧，这个最简单了。

如果还希望了解更多，可以访问w3school的jQuery选择器参考手册，或者jQuery的官方文档Selectors。

属性值操作

使用上面的选择器得到jQuery对象后，我们就能对dom元素的属性进行操作了。
最常用的是attr方法，css方法，text方法，html方法等等。

这些方法有一个特点，如果你给出一个参数，则它可以得到对应的属性值，如果再多给一个参数，则可以设置对应的属性值。也就是说它们既是getter又是setter。

1
2
3
4
5
6
7
$('#icon').attr('src')                      // 取得id为icon的标签的src属性值
$('#icon').attr('src', '/image/img.ico')    // 设置它的src属性值
$('#story').attr({src: "story.gif", width:800, height:600})     // 一次设置多个属性
$('a').removeAttr('href')                   // 移除所有a标签的href属性

$('h1').html()                              // 得到h1标签的html内容
$('h1').text('Hello')                       // 设置h1标签的文字内容

css()的用法与attr类似，这里就不再赘述了。值得一提的是html函数与text函数的区别，html函数是设置html文本，也就是说文本是html格式，如果是text函数，设置的就是纯文本。如果你把用户的输入用html的方式输入元素中，很容易就造成XSS攻击了呦;)

DOM操作

生成一个DOM节点

非常简单，直接写HTML就行了。

1
$('<a href="http://xxx.xx">Click</a>')      // 生成一个a标签的节点

这样直接能得到一个jQuery对象。

将其插入文档中

可以使用append或者appendTo，append是参数追加到调用者的后面，appendTo是调用者追加到参数后面。

1
2
3
div = $('div')
$('<a href="http://xxx.xx">Click</a>').appendTo(div)    // 链接被插入div中
div.append($('<img src="/fancy.gif"/>'))                // 插入一张图片到div中

删除元素

删除可以使用remove删除一个元素或者empty清空整个节点，大家可以自己试一试，非常容易掌握。

详细内容可以参考jQuery官方手册Manipulation

小结

使用jQuery操控DOM方便快捷，只需要对HTML和CSS有一些简单的了解，不需要精通Javascript也可以很好地写出动态代码。不愧是最优秀的前端类库之一。有了它，可以把什么document.getElementById扔到博物馆去了。