细说 jQuery 元素篇（一） - 理解 DOM

DOM - Document Object Model，即文档对象模型，它通过对象树来展示 HTML 代码。jQuery 最强大的特性之一就是简化了对 DOM 元素的操作。

DOM 树

w3shcool 的 DOM 树模型图就能很好地表现 DOM 树的结构。

从图中，我们可以看出 DOM 元素中父元素、子元素之间的关系。
在开发时，我们可以通过调试工具更清晰地看到 DOM 树的结构。

$()函数

通过 $() 函数，我们可以创建 jQuery 对象，这个函数可以接受标签名，ID 和类名作为参数，可以单独使用，也可以同时使用多个。
被封装到 jQuery 对象中的 DOM 元素会被自动地，隐式地循环遍历。

• 标签名 $('a') //取得文档中所有 a 标签
• ID $('#myId') //取得文档中 id 为 myId 的 DOM 元素
• 类名 $('.myClass') //取得文档中 class 为 myClass 的 DOM 元素

遍历 DOM

我们已经知道通过 $() 函数可以取得一组元素，在此基础上，jQuery 还提供了很多方法来操作取得的元素，例如取得父元素、子元素等等。有了这些操作，我们就可以灵活地穿梭在 DOM 树中。

1.filter

首先我们必须要提到过滤函数 - filter。
我们知道 $() 函数可以接受多个内容作为参数，例如我们希望取得类名为 before 的 a 标签，可以这样写：

$('a.before')

使用 filter 函数后，我们也可以这样写：

$('a').filter('.before')

这样看上去，好像 filter 只是做了件重复的事情，但是 filter 的功能肯定不仅限于此。让我们来看看它更强大的地方。
假设现在我们有两个 class 都为 before 的 a 标签，而我们希望能取到父元素是 span 的那个 a 标签，那么直接用第一种方式写肯定难以实现，不过有了 filter 函数就方便多了：

$('a').filter(function(){
  return this.className == 'before' && this.parentElement.nodeName == 'SPAN';
});

2.连缀

jQuery 中可以使用一行代码取得多个指定的 DOM 元素集合，并可以对这个集合的元素进行操作，这一能力我们称之为连缀能力。jQuery的这种连缀能力不仅有助于保持代码简洁，而且在替代组合重新指定选择符时，还有助于提升脚本性能。
为了可读性，我们习惯于把一行代码拆开来写：

连缀相当于是一句话做了很多事情，虽然效率方面表现不错，但无疑比较难理解，所以我们尽量将其分行写，同时添加上合适的注释。

访问 DOM

从上可知，jQuery 返回的是 jQuery 对象，但是我们有时也希望直接对 DOM 元素进行操作。这时，我们需要用到 jQuery 提供的 get 方法。例如，.get(0) 可以访问到 jQuery 对象封装的第一个 DOM 元素。

$('a').get(0)

对此，jQuery 还提供了一种更简的写法：

$('a')[0]

这种语法结构有点类似于 Javascript 中的数组操作，但实际上两者是不同，这就相当于剥开 jQuery 的封装，直接露出 DOM 节点列表，然后进行选择。

参考

http://book.douban.com/subject/24669823/