兼容 jQuery API 的 DOM / AJAX 基础库,基于原创的 ECMA / W3C polyfill 构建,并内置很多常用的 jQuery 扩展 API。
在 API 形态上尽力兼容 jQuery 的同时,iQuery 在内部实现上采取 “面向未来,向前兼容”的 Polyfill 策略 —— jQuery 标准 API(2500 行)、iQuery 扩展 API(1800 行)尽力基于 W3C、ECMA 最新标准中的优秀 API,老旧浏览器兼容代码(部分基于 jQuery API,1200+ 行)尽力包装成与新 API 相同的形式(原型拓展),并独立为外部模块。这样做不但能复用 jQuery API 来高效实现,还方便开发人员自行裁剪。
【注】对 IE 的兼容仅限其“标准模式”,而非“兼容性视图”。
iQuery | jQuery | Zepto | JSLite | |
---|---|---|---|---|
浏览器兼容 | IE 8+ | IE 6+ (v1.x)、IE 9+ (v2.0+) | IE 10+ | IE 10+ |
ECMA / W3C polyfill | 多 | ×(各模块自行实现 Fix) | 少 | 少 |
扩展 API | 多 | 少 | 少 | |
触控事件 | 单指 | × | 多指 | × |
源代码模块化 | AMD | AMD | IIFE | IIFE |
API 注解(JSDoc) | √ | × | × | × |
测试框架 | Mocha | QUnit | Evidence | Mocha |
-
基础知识 ——《jQuery API 文档》
-
HTML 源码基本结构
<!DocType HTML>
<html><head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge, Chrome=1" />
<!-- 1. 独立使用 -->
<script src="path/to/iQuery.min.js"></script>
<!-- 2. AMD 规范加载 -->
<script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<script>
require.config({
paths: {
iQuery: 'path/to/iQuery.min.js'
}
});
</script>
</head><body>
...
</body></html>
以下扩展已收录在本项目的 jQueryKit.js 中,方便配合其它 jQuery API 实现 ——
【API 文档】及更多变更:
- 内置一个改进且向下兼容的 $.browser 对象,能通过 直接比较版本号来区分浏览器
- 新增 计时相关方法(秒基准)——
$.every()
、$.wait()
、$.start()
、$.end()
$.unique()
方法不局限于 DOM 元素数组- 新增 对象链回溯方法 ——
$.trace()
- 新增 对象补丁方法 ——
$.patch()
- 新增 字符串字节长度方法 ——
$.byteLength()
- 新增 函数柯里化方法 ——
$.curry()
- 新增 URL 信息提取方法 ——
$.fileName()
、$.filePath()
、$.urlDomain()
- 新增 URL 参数签名方法 ——
$.paramSign()
$.parseJSON()
支持 递归解析,会将 JSON 字符串中的内层字符串 eval 为 JS 实值/例- 新增 JSON 格式化显示方法 ——
$.formatJSON()
- 基于官方
$.ajaxTransport()
重载 JSONP 实现,支持基本的异常处理 $.ajax()
支持 form 元素、FormData 对象的请求数据形式,整合 XHR、XDR、JSONP、iframe 自适应 跨域请求$.ajax()
自动转换响应内容为 HTML、XML 或 JSON 对象实例- 新增
$.delete()
、$.put()
,方便实现基于 RESTful API 的单页应用 - 新增
$.fn.htmlExec()
W3C HTML 解析器方法,并基于此重构$.fn.load()
内部实现,方便 DOM 片段清理、脚本调试 - 新增 多媒体元素加载完成方法 ——
$.fn.mediaReady()
- 封装了 表单元素无刷新提交,并可直接绑定响应回调 ——
$.fn.ajaxSubmit()
(基于前述的几个 AJAX 增强方法 构建) - 新增 选择符合法性判断方法 ——
$.isSelector()
- 更多 jQuery 伪类选择符:
- :image 还支持
img, link[type="image/x-icon"], svg, canvas
及设置了background-image
的普通元素 - :button 还支持
input[type="submit"], input[type="reset"], input[type="image"]
- :input 还支持 contentEditable、designMode 属性
- 自带
:indeterminate
,属 CSS 3 标准 - 自带
:focusable
,属 jQuery UI 标准 - 自带
:data()
,属 jQuery UI 标准 - 自带
:field
,匹配所有含 可提交字段的元素 - 新增
:list
,等价于ul, ol, dl, tbody, datalist
- 新增
:media
,等价于:image, iframe, object, embed, audio, video
- 新增
:loaded
,等价于img, audio, video
、document
加载结束 - 新增
:scrollable
,匹配所有 内容可滚动的元素
- :image 还支持
- 新增 祖先元素交集方法 ——
$.fn.sameParents()
- 新增 有滚动条的祖先元素方法 ——
$.fn.scrollParents()
- 新增 元素平滑滚动方法 ——
$.fn.scrollTo()
- 所有类型的 DOM 信息读写器(
.attr()
、.prop()
、.css()
、.data()
)均支持“不传键名时返回 信息全集”特性 - 新增 DOM 数据归并方法 ——
$.fn.reduce()
- .css() 取值时,会把 纯数字值、像素值 直接返回为 Number 类型
- .css() 赋值一律默认 important 优先级,确保赋值的有效性
$.fn.show()
兼容 元素非固有 display 属性值,避免破坏 复杂布局- 新增 DOM 元素 z-index 集成方法 ——
$.fn.zIndex()
,集 取实际值、赋值、同辈置顶/沉底 功能于一身 - 新增 CSS 选择符优先级计算方法 ——
$.selectorPriority()
- 新增 CSS 厂商命名获取方法 ——
$.cssName()
- 新增 CSS 集合对象搜索方法 ——
$.searchCSS()
- 自带 DOM 唯一 ID 设置方法 ——
$.fn.uniqueId()
(jQuery UI 标准) - 新增 DOM 选中内容读写方法 ——
$.fn.selection()
$.fn.focus()
会让所有可见元素获得焦点- 新增 被动观察者对象 ——
$.Observer()
- 新增
$.customEvent()
事件扩展接口,并基于此实现input
标准事件的补丁 - 封装了 触屏单指手势事件(tap、press、swipe),并为桌面端、移动端提供一致的操作体验
- 新增 用户操作空闲事件方法 ——
$.fn.onIdleFor()
- 新增 跨页面消息事件方法 ——
$.fn.onReply()
(基于window.postMessage()
) $.fn.animate()
支持类似 jQuery UI$.fn.effect()
动画效果名参数(基于 CSS Animation 实现)- 新增 CSS 动画类切换方法 ——
$.fn.toggleAnimate()
- 新增 Base64 文本转 二进制对象方法 ——
$.toBlob()
- 新增 数据哈希方法 ——
$.dataHash()
- 默认算法:CRC-32
- 还支持 现代浏览器 Crypto API
- 没有 $.noConflict(),但不会强占 jQuery 变量
- 不支持 浏览器 内置类型(构造函数)相应的 $.isXXX() 系列方法
- 不支持 浏览器特性检测
- 不支持 $.ajax() 不常用的自定义选项
- 不支持 $.Deferred()
- jQuery 扩展伪类选择符:只支持 常用且“难以用 CSS 标准选择符 或 jQuery API 实现其功能”的
- 不支持 XPath 选择器、操作 XML 文档
- 不支持一些不常用的 jQuery 静态/实例方法
- 不支持 动画队列外部操作 API
- 自带
Number.isInteger()
整数判断方法 - 自带
Number.isSafeInteger()
安全整数判断方法 - 自带 支持“非空白符”的
String.prototype.trim()
(借鉴 PHP) - 自带
String.prototype.repeat
标准方法 - 自带
String.prototype.padStart
标准方法 - 自带
String.prototype.padEnd
标准方法 - 自带
Array.from()
标准方法 - 自带
Array.prototype.indexOf()
标准方法 - 自带
Array.prototype.reduce()
标准方法 - 自带
Function.prototype.name
属性补丁 - 自带
Object.keys()
标准方法 - 自带
Object.getPrototypeOf()
标准方法 - 自带
Object.create()
标准方法 - 自带
Date.now()
标准方法 - 自带
Promise()
标准对象构造函数 - 重写
Error.prototype.valueOf()
,使 IE 10- 返回可查询的错误码(附带 官方文档 URL) - 新增 HTMLHttpRequest 对象,封装了 JSONP Get、 iframe Post
- 自带
HTMLDocument.prototype.currentScript
属性 - 自带
HTMLDocument.prototype.scrollingElement
属性 - 自带 ChildNode 接口的
remove()
、replaceWith()
实例方法 - 自带
Element.prototype.textContent
属性 - 自带
Element.prototype.innerHTML
的 IE 8 补丁 - 自带 HTMLCollection 对象,修复 IE 10-
Element.prototype.children
属性在其元素有 name 属性时的“数字键值缺失”Bug - 自带 Element 对象的
firstElementChild
、lastElementChild
、previousElementSibling
、nextElementSibling
属性 - 自带
Element.prototype.matches
标准草案方法 - 自带 DOMTokenList 对象,为各种浏览器的
<a />
、<area />
、<link />
、<svg />
等元素提供 classList、relList 属性支持 - 自带 DOMStringMap 对象,为 IE 11- 提供 dataset 支持
- 自带
HTMLSelectElement.prototype.selectedOptions
属性的 IE 补丁 - 自带
location.origin
、HTMLAnchorElement.prototype.origin
只读属性 IE 11- 补丁 - 修正 IE 8 DOM Attribute 系列方法对 JavaScript 关键字的特殊处理
- 自带 CSSStyleDeclaration 对象,为 IE 8 提供 getComputedStyle 支持,并封装了 M$ DirectX 滤镜属性转换
- 自带 Mozilla Firefox 元素 CSS 默认规则对象 获取方法
Window.getMatchedCSSRules()
- 自带 Google Chrome 元素 CSS 匹配规则对象 获取方法
Window.getMatchedCSSRules()
- 自带
FormData()
标准对象构造函数,为 IE 10- 提供 表单数据封装 - 自带
DOMImplementation()
标准对象createDocument
、createHTMLDocment
实例方法,为 IE 8 提供 XML / HTML 文档对象创建支持 - 自带
DOMParser()
标准对象构造函数,为 IE 8+ 提供 XML / SVG / HTML 文档代码解析支持 - 自带
URL()
标准对象构造函数 - 自带
URLSearchParams()
标准对象构造函数