细说 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/