前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法，暂时只支持 IE10 以上浏览器。
常用的 class、id、属性 选择器都可以使用 或 替代。区别是
- 返回第一个匹配的 Element
- 返回所有匹配的 Element 组成的 NodeList。它可以通过 把它转成 Array
- 如果匹配不到任何 Element，jQuery 返回空数组 ，但 返回 ，注意空指针异常。当找不到时，也可以使用 设置默认的值，如
注意： 和 性能很差。如果想提高性能，尽量使用 、 或 。
兄弟元素
上一个元素
下一个元素
Closest 获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。
获取当前每一个匹配元素集的祖先，不包括匹配元素的本身。
- Input/Textarea
- 获取 e.currentTarget 在 中的数组索引
jQuery 对象的 iframe 返回的是 iframe 内的
- Iframe contents
- Iframe Query
- 获取属性
- 设置属性
- 获取 属性
- Get style
- Set style
- Get/Set Styles
注意，如果想一次设置多个 style，可以参考 oui-dom-utils 中 setStyles 方法
- Add class
- Remove class
- has class
- Toggle class
Width 与 Height 获取方法相同，下面以 Height 为例：
Window height
Document height
Element height
Position
获得匹配元素相对父元素的偏移
Offset
获得匹配元素相对文档的偏移
获取元素滚动条垂直位置。
从 DOM 中移除元素。
Get text
返回指定元素及其后代的文本内容。
Set text
设置元素的文本内容。
Get HTML
Set HTML
Append 插入到子节点的末尾
在选中元素前插入新节点
在选中元素后插入新节点
如果匹配给定的选择器，返回true
深拷贝被选元素。（生成被选元素的副本，包含子节点、文本和属性。）
注：深拷贝添加参数‘true’
移除所有子节点
把每个被选元素放置在指定的HTML结构中。
移除被选元素的父元素的DOM结构
用指定的元素替换被选的元素
解析 HTML/SVG/XML 字符串
Fetch API 是用于替换 XMLHttpRequest 处理 ajax 的新标准，Chrome 和 Firefox 均支持，旧浏览器可以使用 polyfills 提供支持。
IE9+ 请使用 github/fetch，IE8+ 请使用 fetch-ie8，JSONP 请使用 fetch-jsonp。
4.1 从服务器读取数据并替换匹配元素的内容
完整地替代命名空间和事件代理，链接到 https://github.com/oneuijs/oui-dom-events
大部分实用工具都能在 native API 中找到. 其他高级功能可以选用专注于该领域的稳定性和性能都更好的库来代替，推荐 lodash。
isArray
检测参数是不是数组。
isWindow
检测参数是不是 window。
inArray
在数组中搜索指定值并返回索引 (找不到则返回 -1)。
isNumeric
检测传入的参数是不是数字。 Use to decide the type or the 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 数组。
检测 DOM 元素是不是其他 DOM 元素的后代.
全局执行 JavaScript 代码。
parseHTML
解析字符串为 DOM 节点数组.
parseJSON
传入格式正确的 JSON 字符串并返回 JavaScript 值.
Promise 代表异步操作的最终结果。jQuery 用它自己的方式处理 promises，原生 JavaScript 遵循 Promises/A+ 标准实现了最小 API 来处理 promises。
会在 promise 解决时调用， 会在 promise 拒绝时调用， 总会调用。
用于处理多个 promises。当全部 promises 被解决时返回，当任一 promise 被拒绝时拒绝。
Deferred 是创建 promises 的一种方式。
显示或隐藏元素。
调整元素透明度。
动画调整透明度用来显示或隐藏。
滑动切换显示或隐藏。
执行一系列 CSS 属性动画。
- 你可能不需要 jQuery (You Might Not Need jQuery) - 如何使用原生 JavaScript 实现通用事件，元素，ajax 等用法。
- npm-dom 以及 webmodules - 在 NPM 上提供独立 DOM 模块的组织
转载地址：You Don't Need jQuery
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/7895.html