gQuery 开发文档

简介

gQuery 是一个现代的、注重细节的 JavaScript 函数库。开发初衷是以小体积、多复用来简化并加速原生下开发效率优化体验。

gQuery 使用链式语法操作 DOM,并封装了常用操作函数。极小的体积非常适合单页面开发,通过几行代码快速实现 MVC,甚至可直接封装于脚本内部。相比 jQuery,并没有用大量代码去实现 IE 兼容,而是在 API 上尽力兼容 jQuery,如果你曾使用过 jQuery,可以很快上手使用甚至直接替换。

当前 gQuery 处于初期版本并快速迭代中,但目前 API 不会发生重大改动,可放心将该版本用于生产环境。

前提条件

若要使用 gQuery 函数库,请先熟悉下列技术:

安装

直接下载并用 <script> 标签引入,gQuery$ 会被注册为一个全局变量。请勿在开发环境下使用压缩版本,否则将失去错误相关警告!

gQuery: include
  1. <script type="text/javascript" src="/lib/js/gquery.min.js"></script>

起步 - DOM

作为 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: fn.text()
  1. $('#gex-text').text( new Date().toLocaleString() );
  2. console.log( $('#gex-text').text() );
#gex-text

加上链式语法:

gQuery: 链式
  1. $('#gex-chain').text("鼠标在此悬停几秒查看 title").attr('title','我是 title').css('cursor','help');
#gex-chain

同时,gQuery 在处理多个元素时,就像情场老手一般,人在花丛过,片叶不沾身。而这在原生 JavaScript 中,需要在获取 NodeList 后对其遍历以处理每个 Node:

gQuery: 多元素
  1. $('.gex-multEls').text('我是内容');
.gex-multEls
JavaScript: 多元素
document.querySelectorAll('.gex-multEls-js').forEach((elem)=>{
    elem.innerText = '我是内容';
});
#gex-multEls-js

在以 val、text、html 或 ohtml 方法获取多个元素内容时,gQuery 默认返回其总和,或携带空数组使其返回有序数组:

gQuery: 多元素
  1. $('#gex-multReturn').text( $('.gex-multEls').text([]).toString() );
#gex-multReturn

起步 - 函数

gQuery 提供了部分函数来简化功能开发,此类函数通过 gQuery.extend 拓展封装。

gQuery: .copy()
  1. $('#gex-copy').off('click').on('click',function(){
  2. $.copy('gQuery is easy to use.');
  3. alert('成功复制');
  4. });
#gex-copy
戳我复制文本
gQuery: .array.unique()
  1. let arr = [
  2. {a:'Love',b:'is',c:'Love'},
  3. ['Love','is','Love'],
  4. {a:'Love',b:'is',c:'Love'},
  5. {a:'Love',b:'is',c:'Love'}
  6. ];
  7. arr = $.array.unique(arr);
  8. $('#gex-arrUnique').text( JSON.stringify(arr) );
#gex-arrUnique

此外,更多的函数还等着后面与你相见,我们可不希望在这里就忙着压榨你的大脑海马区。

不过,相信我,gQuery 是一个非常容易上手的函数库。就像和活好帅哥上床一样,没有人扭扭捏捏拿不出手。

页面加载缓慢

请检查网络或尝试刷新重试