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 节点列表，然后进行选择。
