gQuery 是一个现代的、注重细节的 JavaScript 函数库。开发初衷是以小体积、多复用来简化并加速原生下开发效率优化体验。
gQuery 使用链式语法操作 DOM,并封装了常用操作函数。极小的体积非常适合单页面开发,通过几行代码快速实现 MVC,甚至可直接封装于脚本内部。相比 jQuery,并没有用大量代码去实现 IE 兼容,而是在 API 上尽力兼容 jQuery,如果你曾使用过 jQuery,可以很快上手使用甚至直接替换。
当前 gQuery 处于初期版本并快速迭代中,但目前 API 不会发生重大改动,可放心将该版本用于生产环境。
若要使用 gQuery 函数库,请先熟悉下列技术:
直接下载并用 <script>
标签引入,gQuery
与 $
会被注册为一个全局变量。请勿在开发环境下使用压缩版本,否则将失去错误相关警告!
<script type="text/javascript" src="/lib/js/gquery.min.js"></script>
作为 JavaScript 开发函数库,gQuery 除了 “write less, do more” 还具备 “think more, do more”。除了 gQuery 原型链中的方法,gQuery 还有许多对象内的拓展方法可供使用。
gQuery 使用全局变量 gQuery
与 $
,惯用法为通过 $(selector).action()
选择 HTML 元素并使其执行 action 函数。
gQuery.fn
中通过 gQuery.fn.extend
封装了许多函数以继承 $(selector)
选中的元素来进行后续操作。例如通过 .text(String)
修改其文本内容,通过 .text()
获得其文本内容:
加上链式语法:
同时,gQuery 在处理多个元素时,就像情场老手一般,人在花丛过,片叶不沾身。而这在原生 JavaScript 中,需要在获取 NodeList 后对其遍历以处理每个 Node:
document.querySelectorAll('.gex-multEls-js').forEach((elem)=>{ elem.innerText = '我是内容'; });
在以 val、text、html 或 ohtml 方法获取多个元素内容时,gQuery 默认返回其总和,或携带空数组使其返回有序数组:
gQuery 提供了部分函数来简化功能开发,此类函数通过 gQuery.extend
拓展封装。
此外,更多的函数还等着后面与你相见,我们可不希望在这里就忙着压榨你的大脑海马区。
不过,相信我,gQuery 是一个非常容易上手的函数库。就像和活好帅哥上床一样,没有人扭扭捏捏拿不出手。