Query 选择器

• document.querySelector 返回第一个匹配的 Element

• document.querySelectorAll 返回所有匹配的 Element 组成的 NodeList。它可以通过 [].slice.call() 把它转成 Array

• 如果匹配不到任何 Element，jQuery 返回空数组 []，但 document.querySelector 返回 null，注意空指针异常。当找不到时，也可以使用 || 设置默认的值，如 document.querySelectorAll(selector) || []

• 1.0 选择器查询

• 1.1 class 查询

• 1.2 id 查询

• 1.3 属性查询

• 1.4 后代查询

• 1.5 兄弟及上下元素
• 兄弟元素
• 上一个元素
• 下一个元素

• 1.6 Closest
Closest 获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

• 1.7 Parents Until
获取当前每一个匹配元素集的祖先，不包括匹配元素的本身。

• 1.8 Form
• Input/Textarea
• 获取 e.currentTarget 在 .radio 中的数组索引

• 1.9 Iframe Contents
jQuery 对象的 iframe contents() 返回的是 iframe 内的 document
• Iframe contents
• Iframe Query

• 1.10 获取 body

• 1.11 获取或设置属性
• 获取属性
• 设置属性
• 获取 data- 属性

CSS & Style

• 2.1 CSS
• Get style
• Set style
• Get/Set Styles
注意，如果想一次设置多个 style，可以参考 oui-dom-utils 中 setStyles 方法
• Add class
• Remove class
• has class
• Toggle class

• 2.2 Width & Height
Width 与 Height 获取方法相同，下面以 Height 为例：
• Window height
• Document height
• Element height

• 2.3 Position & Offset
• Position
获得匹配元素相对父元素的偏移
• Offset
获得匹配元素相对文档的偏移

• 2.4 Scroll Top
获取元素滚动条垂直位置。

DOM 操作

• 3.1 Remove
从 DOM 中移除元素。

• 3.2 Text
• Get text
返回指定元素及其后代的文本内容。
• Set text
设置元素的文本内容。

• 3.3 HTML
• Get HTML
• Set HTML

• 3.4 Append
Append 插入到子节点的末尾

• 3.5 Prepend

• 3.6 insertBefore
在选中元素前插入新节点

• 3.7 insertAfter
在选中元素后插入新节点

• 3.8 is
如果匹配给定的选择器，返回 true

• 3.9 clone
深拷贝被选元素。（生成被选元素的副本，包含子节点、文本和属性。）

• 3.10 empty
移除所有子节点

• 3.11 wrap
把每个被选元素放置在指定的 HTML 结构中。

• 3.12 unwrap
移除被选元素的父元素的 DOM 结构

• 3.13 replaceWith
用指定的元素替换被选的元素

• 3.14 simple parse
解析 HTML/SVG/XML 字符串

Ajax

• 4.1 从服务器读取数据并替换匹配元素的内容。

事件

• 5.0 Document ready by DOMContentLoaded

• 5.1 使用 on 绑定事件

• 5.2 使用 off 解绑事件

• 5.3 Trigger

实用工具

• 6.1 基本工具
• isArray
检测参数是不是数组。
• isWindow
检测参数是不是 window。
• inArray
在数组中搜索指定值并返回索引 (找不到则返回 -1)。
• isNumeric
检测传入的参数是不是数字。 Use typeof to decide the type or the type example for better accuracy.
• isFunction
检测传入的参数是不是 JavaScript 函数对象。
• isEmptyObject
检测对象是否为空 (包括不可枚举属性).
• isPlainObject
检测是不是扁平对象 (使用 “{}” 或 “new Object” 创建).
• extend
合并多个对象的内容到第一个对象。 object.assign 是 ES6 API，也可以使用 polyfill。
• trim
移除字符串头尾空白。
• map
将数组或对象转化为包含新内容的数组。
• each
轮询函数，可用于平滑的轮询对象和数组。
• grep
找到数组中符合过滤函数的元素。
• type
检测对象的 JavaScript [Class] 内部类型。
• merge
合并第二个数组内容到第一个数组。
• now
返回当前时间的数字呈现。
• proxy
传入函数并返回一个新函数，该函数绑定指定上下文。
• makeArray
类数组对象转化为真正的 JavaScript 数组。

• 6.2 包含
检测 DOM 元素是不是其他 DOM 元素的后代.

• 6.3 Globaleval
全局执行 JavaScript 代码。

• 6.4 解析
• parseHTML
解析字符串为 DOM 节点数组.
• parseJSON
传入格式正确的 JSON 字符串并返回 JavaScript 值.

Promises

• 7.1 done, fail, always
done 会在 promise 解决时调用，fail 会在 promise 拒绝时调用，always 总会调用。

• 7.2 when
when 用于处理多个 promises。当全部 promises 被解决时返回，当任一 promise 被拒绝时拒绝。

• 7.3 Deferred
Deferred 是创建 promises 的一种方式。

动画

• 8.1 Show & Hide

• 8.2 Toggle
显示或隐藏元素。

• 8.3 FadeIn & FadeOut

• 8.4 FadeTo
调整元素透明度。

• 8.5 FadeToggle
动画调整透明度用来显示或隐藏。

• 8.6 SlideUp & SlideDown

• 8.7 SlideToggle
滑动切换显示或隐藏。

• 8.8 Animate
执行一系列 CSS 属性动画。

替代品

• 你可能不需要 jQuery (You Might Not Need jQuery) - 如何使用原生 JavaScript 实现通用事件，元素，ajax 等用法。

• npm-dom 以及 webmodules - 在 NPM 上提供独立 DOM 模块的组织