Skip to content

zdhxiong/mdui.jq

Repository files navigation

mdui.jq

GitHub version Bower version npm version dependencies Status devDependencies Status CodeFactor

拥有和 jQuery 相似 API 的轻量级 JavaScript 工具库。已作为 MDUI 内置工具库使用。

mdui.jq 全部使用 typescript 开发,可获得完美的类型提示。

兼容至 IE11。

文档:https://www.mdui.org/docs/jq

通过 <script> 标签引入 JS 文件

<script src="./jq.min.js"></script>

然后你可以通过 JQ 来访问该对象。如果你想使用 $ 来访问该对象,需要自行进行赋值:

var $ = JQ;

jq.js 和 jq.min.js 文件已经内置了 polyfill 文件,可直接兼容 IE 浏览器。

在 ES6 模块化环境中使用

通过 npm 安装 mdui.jq

npm install mdui.jq --save

js 文件中导入 mdui.jq

import $ from 'mdui.jq';

注意:在 ES6 模块化环境中,mdui.jq 默认没有包含 polyfill 文件。如果你的构建环境不会自动转换 ES6 API,则需要在导入 mdui.jq 前先导入 polyfill 文件:

import 'mdn-polyfills/MouseEvent';
import 'mdn-polyfills/CustomEvent';
import 'promise-polyfill/src/polyfill';

在 ES6 环境中按需导入所需模块

因为 mdui.jq 的大部分方法都是 $ 的原型链方法,导致构建工具的 Tree shaking 无法自动移除没有用到的方法。

mdui.jq 中每一个方法都是一个模块,你可以仅导入需要用到的方法:

// 导入 $ 函数
import $ from 'mdui.jq/es/$';

// 按需导入下面的原型链方法。导入对应的方法后,就能以这样的形式调用:$(document).method()
// 注意:这些方法都依赖 $,因此导入这些方法前需要先导入 mdui.jq/es/$
import 'mdui.jq/es/methods/add';
import 'mdui.jq/es/methods/addClass';
import 'mdui.jq/es/methods/after';
import 'mdui.jq/es/methods/ajaxComplete';
import 'mdui.jq/es/methods/ajaxError';
import 'mdui.jq/es/methods/ajaxStart';
import 'mdui.jq/es/methods/ajaxSuccess';
import 'mdui.jq/es/methods/append';
import 'mdui.jq/es/methods/appendTo';
import 'mdui.jq/es/methods/attr';
import 'mdui.jq/es/methods/before';
import 'mdui.jq/es/methods/children';
import 'mdui.jq/es/methods/clone';
import 'mdui.jq/es/methods/closest';
import 'mdui.jq/es/methods/css';
import 'mdui.jq/es/methods/data';
import 'mdui.jq/es/methods/each';
import 'mdui.jq/es/methods/empty';
import 'mdui.jq/es/methods/eq';
import 'mdui.jq/es/methods/extend';
import 'mdui.jq/es/methods/filter';
import 'mdui.jq/es/methods/find';
import 'mdui.jq/es/methods/first';
import 'mdui.jq/es/methods/get';
import 'mdui.jq/es/methods/has';
import 'mdui.jq/es/methods/hasClass';
import 'mdui.jq/es/methods/height';
import 'mdui.jq/es/methods/hide';
import 'mdui.jq/es/methods/html';
import 'mdui.jq/es/methods/index';
import 'mdui.jq/es/methods/innerHeight';
import 'mdui.jq/es/methods/innerWidth';
import 'mdui.jq/es/methods/insertAfter';
import 'mdui.jq/es/methods/insertBefore';
import 'mdui.jq/es/methods/is';
import 'mdui.jq/es/methods/last';
import 'mdui.jq/es/methods/map';
import 'mdui.jq/es/methods/next';
import 'mdui.jq/es/methods/nextAll';
import 'mdui.jq/es/methods/nextUntil';
import 'mdui.jq/es/methods/not';
import 'mdui.jq/es/methods/off';
import 'mdui.jq/es/methods/offset';
import 'mdui.jq/es/methods/offsetParent';
import 'mdui.jq/es/methods/on';
import 'mdui.jq/es/methods/one';
import 'mdui.jq/es/methods/outerHeight';
import 'mdui.jq/es/methods/outerWidth';
import 'mdui.jq/es/methods/parent';
import 'mdui.jq/es/methods/parents';
import 'mdui.jq/es/methods/parentsUntil';
import 'mdui.jq/es/methods/position';
import 'mdui.jq/es/methods/prepend';
import 'mdui.jq/es/methods/prependTo';
import 'mdui.jq/es/methods/prev';
import 'mdui.jq/es/methods/prevAll';
import 'mdui.jq/es/methods/prevUntil';
import 'mdui.jq/es/methods/prop';
import 'mdui.jq/es/methods/remove';
import 'mdui.jq/es/methods/removeAttr';
import 'mdui.jq/es/methods/removeClass';
import 'mdui.jq/es/methods/removeData';
import 'mdui.jq/es/methods/removeProp';
import 'mdui.jq/es/methods/replaceAll';
import 'mdui.jq/es/methods/replaceWith';
import 'mdui.jq/es/methods/serialize';
import 'mdui.jq/es/methods/serializeArray';
import 'mdui.jq/es/methods/show';
import 'mdui.jq/es/methods/siblings';
import 'mdui.jq/es/methods/slice';
import 'mdui.jq/es/methods/text';
import 'mdui.jq/es/methods/toggle';
import 'mdui.jq/es/methods/toggleClass';
import 'mdui.jq/es/methods/trigger';
import 'mdui.jq/es/methods/val';
import 'mdui.jq/es/methods/width';

// 按需导入下面的静态方法。导入对应的方法后,就能以这样的形式调用:$.method()
// 注意:这些方法都依赖 $,因此导入这些方法前需要先导入 mdui.jq/es/$
import 'mdui.jq/es/static/ajax';
import 'mdui.jq/es/static/ajaxSetup';
import 'mdui.jq/es/static/contains';
import 'mdui.jq/es/static/data';
import 'mdui.jq/es/static/each';
import 'mdui.jq/es/static/map';
import 'mdui.jq/es/static/merge';
import 'mdui.jq/es/static/param';
import 'mdui.jq/es/static/removeData';
import 'mdui.jq/es/static/unique';

// 上面提到的静态方法,也可以作为独立的函数使用。作为独立函数使用时,不需要依赖 $。
import ajax from 'mdui.jq/es/functions/ajax';
import ajaxSetup from 'mdui.jq/es/functions/ajaxSetup';
import contains from 'mdui.jq/es/functions/contains';
import data from 'mdui.jq/es/functions/data';
import each from 'mdui.jq/es/functions/each';
import map from 'mdui.jq/es/functions/map';
import merge from 'mdui.jq/es/functions/merge';
import param from 'mdui.jq/es/functions/param';
import removeData from 'mdui.jq/es/functions/removeData';
import unique from 'mdui.jq/es/functions/unique';

About

拥有和 jQuery 相似 API 的轻量级 JavaScript 工具库。

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages