1. 浏览器对 CSS selectors 的支持情况
   1. CSS 中可以使用 CSS selectors
      1. 大多数浏览器对 CSS 支持都不错
      2. 少数老式浏览器对 CSS 支持不好
         1. IE6 支持几乎所有的普通 Selectors
         2. IE6 对个别的普通 Selectors 支持不好
            1. :hover 仅 a 元素可以使用
            2. :active 仅 a 元素可以使用
            3. :focus IE6 不支持
         3. IE6 不支持高级 Selectors
   2. jQuery 中可以使用 CSS selectors
      1. 几乎所有浏览器都支持普通 Selectors
      2. 几乎所有浏览器都支持高级 Selectors
2. HTML 元素的状态
   1. a 元素特有的状态
      1. link
         1. 链接未访问
      2. visited
         1. 链接已访问
   2. 所有的元素都有的状态
      1. hover
         1. 鼠标悬浮于元素之上
      2. active
         1. 元素被点击
         2. 鼠标按键不松开
      3. focus
         1. 元素成为焦点
3. jQuery Object
   1. 简介
      1. jQuery Object 是一个 DOM 元素的集合
   2. 使用
      1. jQuery Object 的构造
         1. $ 或 jQuery 函数
            1. 主要用途
            2. 将 DOM 元素转换为 jQuery Object
            3. $(document)
            4. 选择（匹配）元素
            5. $("a")
            6. 返回值
            7. 总是返回 jQuery Object
            8. 说明
            9. jQuery 工厂函数用来创建 jQuery Object
      2. jQuery 对象与 DOM 元素
         1. jQuery Object 中获取 DOM 元素（对象） 或者 jQuery Object 转换为 DOM 对象数组
            1. get
            2. 用途
            3. 获得匹配的 DOM 元素
            4. 参数
            5. 可选参数 index
            6. 返回值
            7. 调用时未使用参数
            8. 返回 DOM 元素的集合（一个数组 Array）
            9. 调用时使用 index 参数
            10. 返回一个 DOM 元素
            11. 范例
            12. var arr = $("p").get();
            13. 说明
            14. jQuery 提供了一种简洁的方式，即使用“[]”来访问 jQuery object $("p")[0] 等价于 $("p").get(0)
         2. DOM 元素（对象）转换 jQuery Object
            1. 做法
            2. 通过 $(DOMObject) 来构建包含 DOMObject 的 jQuery Object
            3. 范例
            4. $(document) // 把 document 对象转换为 jQuery Object
            5. 用途
            6. DOM 元素转换为 jQuery Object 才可以使用 jQuery 的跨平台方法
   3. 实现
      1. jQuery Object 使用了 Array-like 的实现方式 参考《JavaScript: The Definitive Guide, 5th Edition》 7.8
4. jQuery Selectors
   1. selectors 的类型
      1. CSS Selectors（CSS1 ~ CSS3）
         1. 普通 Selectors
            1. type selectors
            2. 组成
            3. 元素的名称
            4. 用途
            5. 选择所有的某种类型的元素
            6. 范例
            7. p { color: red; }
            8. descendant selectors
            9. 组成
            10. 多个元素的名称
            11. 元素名称间使用空格分离
            12. 用途
            13. 选择所有的某种类型的元素的所有后代元素（区别于子元素）
            14. 范例
            15. form legend { color: red; }
            16. id / class selectors
            17. 组成
            18. 特殊符号“#”/“.”表示定义一个 id / class selectors
            19. id / class 属性的值
            20. 用途
            21. 选择特定的 id / class 属性值的元素
            22. 范例
            23. #id { color: red;} .class { color: red; }
            24. universal selectors
            25. 组成
            26. 特殊符号“*” 表示定义一个 universal selectors
            27. 用途
            28. 选择所有的元素
            29. 范例
            30. * { color: red; }
            31. pseudo-class selectors（:selector）
            32. 组成
            33. 特殊符号“:” 表示一个 pseudo-class selectors 的开始
            34. 用途
            35. link pseudo-class selectors（仅用于 a 元素）
            36. :link 链接未访问状态时
            37. :visited 链接已访问状态时
            38. dynamic pseudo-class selectors（用于所有元素）
            39. :hover 悬浮状态时
            40. :active 激活状态时
            41. :focus 焦点状态时
            42. 范例
            43. a:link, a:visited { color: black; } a:hover, a:active { color: blue; background-color: yellow; }
         2. 高级 Selectors（CSS2 ～ CSS3）
            1. child selectors
            2. 组成
            3. 多个元素的名称
            4. 元素名称间使用 > 分离
            5. 用途
            6. 选择所有的某种类型的元素的所有子元素（区别于后代元素）
            7. 范例
            8. div > p { color: red; }
            9. adjacent sibling selectors
            10. 组成
            11. 多个元素的名称
            12. 元素名称间使用 + 分离
            13. 用途
            14. 用于在两个元素中选择一个元素
            15. 这两个元素有相同的父元素
            16. 这两个元素相邻
            17. 这两个元素的后者被选择
            18. 范例
            19. div + p { color: red; }
            20. attribute selector
            21. 组成
            22. [property]
            23. 用途
            24. 根据元素是否存在某属性来选择元素
            25. 根据元素是否存在某属性和值来选择元素
            26. 范例
            27. [title] {cursor: help;} // 所有带有 title 属性的元素都被选择
            28. [title='Second'] {cursor: help;} // 所有带有 title 属性且值为 Second 的元素被选择
            29. h1[title='Second']:hover {cursor: help;} // 选择 h1 元素，当 h1 元素的 title 属性值为 Second 且处于悬浮状态时被选择
      2. jQuery 自定义 Selectors（语法同于 CSS pseudo-class selectors）
         1. 用于 table 的 selectors
            1. :odd / :even
            2. 组成
            3. 在 selectors 后接 :odd / :even
            4. 用途
            5. 匹配索引为奇数（odd）/ 偶数（even）的元素
            6. 范例
            7. $("tr:odd").css("color", "blue"); // 被选择的元素为 tr 元素集合中的索引为奇数的元素，索引从 0 开始
         2. 用于 form 的 selectors
            1. :input
            2. 用途
            3. 选择所有的 input、textarea、button 元素
            4. :text :checkbox :radio :image :submit :reset :password :file :button
            5. 组成
            6. 字符“:”加上 input 元素 type 的属性值
            7. 用途
            8. 根据 input 元素 type 属性值选择元素
            9. 范例
            10. :text 选择器选择 <input type="text">
            11. :checked
            12. 用途
            13. 选择被选中的 Check box 或者 Radio button
            14. :selected
            15. 用途
            16. 选择被选中的 Option 元素
            17. :enabled
            18. 用途
            19. 选择 form 中 enabled 的元素
            20. :disabled
            21. 用途
            22. 选择 form 中 disabled 的元素
         3. 用于所有元素的 selectors
            1. :eq
            2. 用途
            3. 通过索引来选择元素
            4. 范例
            5. $("td:eq(2)").css("color", "blue"); // 被选择的元素为 td 元素集合中的第 3 个 td 元素，这里索引从 0 开始
   2. 语法
      1. $("selectors")
      2. jQuery("selectors")
5. 相关术语
   1. 父、子、后代、祖先
      1. 子元素对应父元素
      2. 后代元素对应祖先元素
   2. 元素（元素一词未特殊指明则表示 HTML 元素）
      1. HTML 元素
         1. 开始标签（tags）
         2. 内容（contents）
         3. 结束标签（tags）
      2. DOM 元素
         1. 简介
            1. DOM 元素是一个对象
         2. 建议
            1. 因为 DOM 元素在各个浏览器实现可能有差别 因此不建议直接操作 DOM 元素（所有浏览器都支持的属性除外）
            2. 在 jQuery 的遍历方法中，this 被设置为 DOM 元素 这个时候，this 一般这样用： this.value 最好改为 $(this).val(); 也就是使用 jQuery 的方法而非直接操作 DOM 元素 （包装 DOM 元素以便使用 jQuery 方法的手段为 $(element)）
6. 通过 jQuery 特定的方法遍历 DOM
   1. Filtering 方法
      1. filter method
         1. 参数
            1. 可以带一个参数，为一个函数 fn
            2. fn 带有一个参数为 DOM 元素的索引值
            3. $("a").filter(function(index) { ... }
            4. fn 中的 this 为 DOM 元素
            5. 可以带一个参数，为一个字符串表达式 expr
         2. 用途
            1. 只有 fn 函数返回为非 false 值时，DOM 元素才被加入到查找（匹配）集合中
         3. 范例
            1. 范例 1
            2. 范例 2
   2. Finding 方法
      1. 查找 siblings
         1. next method
            1. 用途
            2. 获得 DOM 元素集合中每个元素的后一个兄弟元素组成的集合（此集合不含重复元素）
            3. 范例
            4. $("a").next().css("color", "red");
         2. nextAll method
            1. 用途
            2. 获得 DOM 元素集合中每个元素后的所有兄弟元素组成的集合（此集合不含重复元素）
            3. 范例
            4. $("a").nextAll().css("color", "red");
         3. prev method
         4. prevAll method
         5. siblings method
            1. 用途
            2. 获得 DOM 元素集合中每个元素的所有唯一兄弟元素组成的集合（等同于 nextAll + prevAll）
      2. 查找父元素
         1. parent method
            1. 用途
            2. 获得 DOM 元素集合中每个元素的父亲元素组成的集合（此集合不含重复元素）
      3. 查找子元素
         1. children method
            1. 用途
            2. 获得 DOM 元素集合中每一个元素的子元素组成的集合（此集合不含重复元素）
   3. Chaining 方法
      1. andSelf method
         1. 用途
            1. 添加先前的选择的 DOM 元素（集）到当前元素集合中
         2. 范例
      2. end method
         1. 用途
            1. 改变当前选择的 DOM 元素集合到先前的状态，如果当前选择的元素集合没有先前状态，那么 end() 得到一个空集合
         2. 范例
7. 有关的观念
   1. 查找（选择、匹配）得到的是一个 DOM 元素集合而不是一个元素（当然这个集合可以只有一个元素） 这个集合通常是一个 jQuery 对象
      1. 每一个 jQuery selectors 表达式匹配到的 DOM 元素集合是一个 jQuery 对象
      2. 几乎所有的 jQuery DOM 元素匹配方法返回一个 jQuery 对象
   2. 选择得到的 DOM 元素的集合中元素有对应的索引，从 0 开始
   3. 通常来说，jQuery 方法保证选择得到的 DOM 元素的集合中元素不重复出现
   4. 尽量在查找元素时使用 jQuery 的 Chaining 能力
      1. 什么是 Chaining？
         1. 一种编写代码的方式：连续调用各个元素的查找方法
      2. 好处
         1. 代码更加简洁
         2. 代码执行效率更加高
      3. 范例
   5. $ 是 jQuery 的别名