JavaScript 工具库
MDUI 内置了一个轻量的 JavaScript 工具库,它拥有和 jQuery 类似的 api 和 jQuery 风格的链式调用,但体积仅为 jQuery 的八分之一。
你可以通过 mdui.JQ 来调用该库,但最好把 mdui.JQ 存储到一个简短的变量中以方便调用,为了避免和其他库冲突,推荐使用 $$。
var $$ = mdui.JQ;
在后面的文档中,都使用 $$ 来表示 mdui.JQ。
$$()
该方法有多种用法:
可以传入一个 CSS 选择器作为参数,返回包含匹配元素的 JQ 对象。该方法是通过 querySelectorAll 实现的。
$$('.mdui-table')
可以传入 DOM 元素、DOM 元素数组、NodeList、JQ 对象,返回包含指定元素的 JQ 对象。
$$(document)
可以传入 HTML 字符串,返回包含根据 HTML 创建的 DOM 的 JQ 对象。
$$('<div id="wrapper"><span id="inner"></span></div>')
可以传入一个函数,在 DOM 加载完毕后会调用该函数。
$$(function () { console.log('DOM Loaded') })
$$.extend()
如果只传入一个对象,该对象中的属性将合并到 JQ 对象中,相当于在 JQ 的命名空间下添加新的功能。
$$.extend({
customFunc: function () {} }) // 然后就可以这样调用自定义方法了 $$.customFunc()
如果传入了两个或更多个对象,所有对象的属性都添加到第一个对象,并返回合并后的对象。
var object = $$.extend(
{ key1: val1 }, { key2: val2 }, { key3: val3 } ); // 此时第一个对象和返回值都是 { key1: val1, key2: val2, key3: val3 }
$$.fn.extend()
在 JQ 的原型链上扩展方法。
$$.fn.extend({
customFunc: function () {} }) // 然后就可以这样使用扩展的方法了 $$(document).customFunc()
$$.param()
将数组或对象序列化。
$$.param({width:1680, height:1050})
// width=1680&height=1050 $$.param({foo: {one: 1,two: 2 } })
// foo[one]=1&foo[two]=2 $$.param({ids:[1,2,3] })
// ids[]=1&ids[]=2&ids[]=3
$$.each()
遍历数组或对象
$$.each(['a', 'b', 'c'], function (i, value) {
console.log(i + ':' + value); }) // 结果: // 0:a // 1:b // 2:c
$$.each({'name': 'mdui', 'lang': 'zh'}, function (i, value) {
console.log(i + ':' + value); }) // 结果 // name:mdui // lang:zh
$$.merge()
合并两个数组,合并的结果会替换第一个数组的内容,并返回合并的结果。
var first = ['a', 'b', 'c']; var second = ['c', 'd', 'e']; var result = $$.merge(first, second);
console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e'] console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e']
$$.unique()
删除数组中的重复元素。可以是 DOM 元素数组、字符串数组、数字数组。返回去重后的数组。
var result = $$.unique([1,2,12,3,2,1,2,1,1,1,1]);
console.log(result); // [1, 2, 12, 3]
$$.map()
遍历数组或对象,通过函数返回一个新的数组或对象,null 和 undefined 将被过滤掉。
var result = $$.map(['a', 'b', 'c'], function (value, key) {
return i + value; }); console.log(result); // ['0a', '1b', '2c']
$$.contains()
判断父节点是否包含子节点,返回布尔值。
$$.contains(document, document.body); // true
$$.contains(document.body, document); // false
.is()
根据 CSS 选择器、DOM 元素、或 JQ 对象来检测匹配的元素集合,至少有一个元素匹配则返回 true,否则返回 false。
$$('.box').is('.box'); // true
$$('.box').is('.boxss'); // false
$$('.box').is($$('.box')[0]); // true
.length
返回 JQ 对象中元素的数量。
$$('body').length; // 1
.each()
遍历一个 JQ 对象,为每一个匹配元素执行一个函数。如果函数返回 false,则结束遍历。
函数的第一个参数为元素的索引号,第二个参数为当前元素。函数的 this 关键字指向当前元素。
$$('img').each(function(i, element) {
this.src = 'test' + i + '.jpg'; });
.map()
遍历一个 JQ 对象,为对象的每个元素都调用一个函数,生成一个包含函数返回值的新的 JQ 对象。null 和 undefined 会被过滤掉。
函数的第一个参数为元素的索引号,第二个参数为当前元素。函数的 this 关键字指向当前元素。
var result = $$('input.checked').map(function (i, element) {
return $$(this).val();
}); // result 为匹配元素的值组成的 JQ 对象
.eq()
返回 JQ 对象中指定索引号的元素的 JQ 对象。
$$('div').eq(0); // 返回第一个元素的 JQ 对象
$$('div').eq(-1); // 返回最后一个元素的 JQ 对象
$$('div').eq(-2); // 返回倒数第二个元素的 JQ 对象
.first()
返回 JQ 对象中第一个元素的 JQ 对象。
$$('div').first(); // 返回第一个 div 的 JQ 对象
.last()
返回 JQ 对象中最后一个元素的 JQ 对象。
$$('div').last(); // 返回最后一个 div 的 JQ 对象
.get()
返回 JQ 对象中指定索引号的 DOM 元素。若没有指定索引号,则返回 JQ 对象中所有 DOM 元素组成的数组。
$$('div').get(); // 返回所有 div 元素组成的数组
$$('div').get(0); // 返回第一个 div 元素
$$('div').get(-1); // 返回最后一个 div 元素
.index()
如果没有传入参数,则返回 JQ 对象中第一个元素相对于同辈元素的索引值。
如果传入了一个 CSS 选择器作为参数,则返回 JQ 对象中第一个元素相对与 CSS 选择器匹配元素的索引值。
如果传入了一个 DOM 元素,则返回该 DOM 元素在 JQ 对象中的索引值。
<div id="child">
<div id="child1"></div>
<div id="child2"></div>
<div id="child3"></div>
<div id="child4"></div>
</div>
$$('#child3').index(); // 2
$$('#child3').index('#child div'); // 2
$$('#child div').index($$('#child3').get(0); // 2
.slice()
返回一个 JQ 对象的子集。
子集为从 start 开始的元素。如果传入了 end 参数,则提取从 start 到不包含 end 位置的元素。
$$('div').slice(3); // 返回对象中第三个(包含第三个)之后的所有元素
$$('div').slice(3, 5); // 返回对象中第三个到第五个(包含第三个,不包含第五个)之间的元素
.filter()
从 JQ 对象中筛选出与指定表达式匹配的元素的 JQ 对象。参数可以是 CSS 选择器、JQ 对象、DOM 元素、函数。
参数为函数时,函数的第一个参数为当前元素在 JQ 对象中的索引号,第二个参数为当前元素,this 关键字指向当前元素。函数返回 true 时,该元素会被保留,返回 false 时,该元素会被去除。
// 筛选出所有含 .box 类的 div 元素的 JQ 对象 $$('div').filter('.box');
// 筛选出所有已选中选项的 JQ 对象 $$('#select option').filter(function (idx, element) {
return element.selected; });
.not()
从 JQ 对象中筛选出与指定表达式不匹配的元素的 JQ 对象。参数可以是 CSS 选择器、JQ 对象、DOM 元素、函数。
参数为函数时,函数的第一个参数为当前元素在 JQ 对象中的索引号,第二个参数为当前元素,this 关键字指向当前元素。函数返回 true 时,该元素会被去除,返回 false 时,该元素会被保留。
// 筛选出所有不含 .box 类的 div 元素的 JQ 对象 $$('div').filter('.box');
// 筛选出所有未选中选项的 JQ 对象 $$('#select option').filter(function (idx, element) {
return element.selected; });
.hasClass()
判断 JQ 对象中的第一个元素是否含有指定 CSS 类。
$$('div').hasClass('item')
.addClass()
为元素添加 CSS 类,多个类名之间可以用空格分隔。
$$('div').addClass('item')
$$('div').addClass('item1 item2')
.removeClass()
移除元素上的 CSS 类,多个类名之间可以用空格分隔。
$$('div').removeClass('item')
$$('div').removeClass('item1 item2')
.toggleClass()
元素上的 CSS 类,有则删除,无则添加。多个类名之间可以用空格分隔。
$$('div').toggleClass('item')
$$('div').toggleClass('item1 item2')
.prop()
获取或设置选中元素的属性值。
// 获取第一个元素的属性值 $$('input[type="checkbox"]').prop('checked');
// 设置所有选中元素的属性值 $$('input[type="checkbox"]').prop('checked', true);
// 同时设置元素的多个属性值 $$('input').prop({
checked: false, disabled: true })
.removeProp()
删除选中元素指定的属性值。
$$('input').removeProp('disabled')
.attr()
获取或设置选中元素的属性值。
// 获取第一个元素的属性值 $$('div').attr('username');
// 设置所有选中元素的属性值 $$('div').attr('username', 'mdui');
// 同时设置元素的多个属性值 $$('div').prop({
username: 'mdui', lastname: 'test' })
.removeAttr()
删除选中元素的指定属性值。
$$('div').removeAttr('username')
.val()
获取或设置选中元素的值。
// 获取选中的第一个元素的值 $$('#input').val()
// 设置选中元素的值 $$('#input').val('input value')
.text()
获取或设置选中元素的文本内容。
// 获取选中的第一个元素的文本内容 $$('#box').text()
// 设置选中元素的文本内容 $$('#box').text('text content')
.html()
获取或设置选中元素的 HTML 内容。
// 获取选中的第一个元素的 HTML 内容 $$('#box').html()
// 设置选中元素的 HTML $$('#box').html('html content')
$$.data()
在 DOM 元素上读取或存储数据。
var dom = document.getElementById('box'); // 在 DOM 元素上存储一个字符串 $$.data(dom, 'key', 'value');
// 在 DOM 上存储一个对象 $$.data(dom, 'obj', {test: 'test'});
// 在 DOM 上同时存储多个数据 $$.data(dom, {
key1: 'value1', key2: { test: 'test' } }); // 获取 DOM 上存储的所有数据 $$.data(dom);
$$.removeData()
删除 DOM 上存储的数据。
// 删除 DOM 上存储的键名为 key 的数据
$$.removeData(dom, 'key');
.data()
在当前 JQ 对象的元素上存储数据。
// 在 .box 元素上存储一个字符串 $$('.box').data('key', 'value');
// 在 .box 元素上存储一个对象 $$('.box').data('obj', {
test: 'test' }); // 在 .box 元素上同时存储多个数据 $$('.box').data({
key1: 'value1', key2: { test: 'test' } }); // 获取 .box 上存储的所有数据 $$('.box').data();
.removeData()
删除 JQ 对象的元素上存储的数据。
// 删除 .box 元素上存储的键名为 key 的数据
$$('.box').removeData('key');
.css()
获取 JQ 对象中的第一个元素的样式值,或者设置每一个元素的样式。
// 获取元素样式值 $$('#box').css('color')
// 设置元素的样式值 $$('#box').css('color', 'red')
// 同时设置多个样式值 $$('#box').css({
'color': 'red', 'background-color': 'white' })
.width()
如果没有传入参数,则获取 JQ 对象中第一个元素的宽度。
如果传入了参数,则设置 JQ 对象中所有元素的宽度,如果参数是个数字或数字字符串,会自动添加 px 作为单位。
该方法获取的值默认不包含内边距和外边距,当 box-sizing:border-box 时,会包含内边距。
$$('.box').width();
$$('.box').width(10);
$$('.box').width('20%')
.height()
如果没有传入参数,则获取 JQ 对象中第一个元素的高度。
如果传入了参数,则设置 JQ 对象中所有元素的高度,如果参数是个数字或数字字符串,会自动添加 px 作为单位。
该方法获取的值默认不包含内边距和外边距,当 box-sizing:border-box 时,会包含内边距。
$$('.box').height();
$$('.box').height(10);
$$('.box').height('20%');
.innerWidth()
获取元素的宽度,包含内边距。
$$('.box').innerWidth();
.innerHeight()
获取元素的高度,包含内边距。
$$('.box').innerHeight();
.hide()
隐藏 JQ 对象中的所有元素。
$$('.box').hide();
.show()
恢复 JQ 对象中的所有元素的显示状态。
$$('.box').show();
.toggle()
切换 JQ 对象中所有元素的显示状态。
$$('.box').toggle();
.offset()
获取元素相对于 document 的偏移,以及元素的宽度和高度。
$$('.box').offset();
// { // top: 20, // left: 30, // width: 200, // height: 100 // }
.offsetParent()
返回 JQ 对象中第一个元素的用于定位的父元素的 JQ 对象。即父元素中第一个 position 为 relative 或 absolute 的元素。
$$('.box').offsetParent()
.position()
获取元素相对于父元素的偏移,以及宽度和高度。
$$('.box').position();
// { // top: 20, // left: 30, // width: 100, // height: 200 // }
.find()
根据 CSS 选择器找到指定的后代节点的集合。
// 找到 #box 的后代节点中,包含 .box 的节点集合
$$('#box').find('.box')
.children()
获取匹配元素的直接子元素,可以使用 CSS 选择器作为参数进行过滤。
参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。
// 找到 #box 的所有直接子元素 $$('#box').children()
// 找到 #box 的所有直接子元素中,包含 .box 的元素集合 $$('#box').children('.box')
.has()
对匹配元素的子元素,按传入的参数进行过滤,返回过滤后的元素的 JQ 对象。
传入的参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。
// 给含有 ul 的 li 加上背景色
$$('li').has('ul').css('background-color', 'red');
.parent()
返回匹配的直接父元素的 JQ 对象。
如果没有传入参数,则直接返回直接父元素的 JQ 对象。如果传入了参数,仅返回和参数匹配的直接父元素的 JQ 对象。
参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。
// 返回 .box 元素的直接父元素 $$('.box').parent();
// 返回 .box 元素的直接父元素中含有 .parent 类的元素 $$('.box').parent('.parent');
.parents()
返回匹配的所有祖先元素的 JQ 对象。
传入的参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。
// 返回 span 元素的所有祖先元素 $$('span').parents();
// 返回 span 元素的所有是 p 元素的祖先元素 $$('span').parents('p');
.parentsUntil()
查找当前元素的所有父辈元素,直到遇到匹配的那个元素为止。
返回的 JQ 对象里包含了下面所有找到的父辈元素,但不包含参数匹配到的元素。
// 查找 .item 元素的所有父辈元素,直到遇到 .parent 元素
$$('.item').parentsUntil('.parent');
.prev()
获取当前元素的前一个同辈元素的 JQ 对象。可以使用参数进行过滤。
参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。
// 返回 .box 元素的前一个元素 $$('.box').prev();
// 获取 .box 元素的前一个 div 元素 $$('.box').prev('div');
.prevAll()
获取当前元素前面的所有同辈元素的 JQ 对象。可以使用参数进行过滤。
参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。
// 返回 .box 元素前面的所有同辈元素
$$('.box').prevAll();
// 返回 .box 元素前面的所有含 .selected 的同辈元素
$$('.box').prevAll('.selected');
.prevUntil()
获取当前元素前面所有的同辈元素,直到遇到匹配元素,不包含匹配元素。
参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。
// 返回 .box 元素前所有的同辈元素,直到遇到 .until 元素
$$('.box').prevUntil('.until');
.next()
获取当前元素的后一个同辈元素的 JQ 对象。可以使用参数进行过滤。
参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。
// 返回 .box 元素的后一个元素 $$('.box').next();
// 获取 .box 元素的后一个 div 元素 $$('.box').next('div');
.nextAll()
获取当前元素后面的所有同辈元素的 JQ 对象。可以使用参数进行过滤。
参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。
// 返回 .box 元素后面的所有同辈元素 $$('.box').nextAll();
// 返回 .box 元素后面的所有含 .selected 的同辈元素 $$('.box').nextAll('.selected');
.nextUntil()
获取当前元素后面所有的同辈元素,直到遇到匹配元素,不包含匹配元素。
参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。
// 返回 .box 元素后所有的同辈元素,直到遇到 .until 元素
$$('.box').nextUntil('.until');
.closest()
从当前元素向上逐级匹配,返回最先匹配到的元素。
参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。
// 获取 .box 元素的父元素中最近的 .parent 元素
$$('.box').closest('.parent');
.siblings()
获取当前元素的所有同辈元素。可以使用参数进行过滤。
参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。
// 获取 .box 元素的所有同辈元素
$$('.box').siblings();
// 获取 .box 元素的所有同辈元素中含 .selected 的元素
$$('.box').siblings('.selected');
.add()
添加元素到当前 JQ 对象中。
参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。
// 把含 .selected 的元素添加到当前 JQ 对象中
$$('.box').add('.selected');
.empty()
从 DOM 中移除选中元素的所有子节点。
$$('.box').empty();
.remove()
从 DOM 中移除所有选中的元素。
$$('.box').remove();
.prepend()
在选中元素内部的前面插入指定内容。
传入的参数可以是 字符串、HTML、JQ 对象、DOM 元素、DOM 元素数组、NodeList。
// HTML 代码 <p>I would like to say: </p> // js 代码 $$('p').prepend('<b>Hello</b>');
// 结果 [ <p><b>Hello</b>I would like to say: </p> ]
.prependTo()
把选中元素添加到另一个指定元素的内部的前面。
传入的参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。
// HTML 代码
<p>I would like to say: </p>
// js 代码
$$('<p>Hello</p>').prependTo('p');
// 结果
[ <p><p>Hello</p>I would like to say: </p> ]
.append()
在选中元素内部的后面插入指定内容。
传入的参数可以是 字符串、HTML、JQ 对象、DOM 元素、DOM 元素数组、NodeList。
// HTML 代码 <p>I would like to say: </p> // js 代码 $$('p').append('<b>Hello</b>');
// 结果 [ <p>I would like to say: <b>Hello</b></p> ]
.appendTo()
把选中元素插入到另一个指定元素的内部的后面。
传入的参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。
// HTML 代码 <p>I would like to say: </p> // js 代码 $$('<p>Hello</p>').appendTo('p')
// 结果 [ <p>I would like to say: <p>Hello</p></p> ]
.after()
在选中元素的后面插入内容。
传入的参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList、HTML 字符串
// HTML 代码 <p>I would like to say: </p> // js 代码 $$('p').after('<b>Hello</b>')
// 结果 [ <p>I would like to say: </p><b>Hello</b> ]
.insertAfter()
把选中元素插入到指定元素的后面。
传入的参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList、HTML 字符串
// HTML 代码
<p>I would like to say: </p>
// js 代码
$$('<b>Hello</b>').insertAfter('p');
// 结果
[ <p>I would like to say: </p><b>Hello</b> ]
.before()
在选中元素前面插入内容。
传入的参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList、HTML 字符串
// HTML <p>I would like to say: </p> // js 代码 $$('p').before('<b>Hello</b>');
// 结果 [ <b>Hello</b><p>I would like to say: </p> ]
.insertBefore()
把选中元素插入到指定元素前面。
传入的参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList、HTML 字符串
// HTML <p>I would like to say: </p> // js 代码 $$('p').insertBefore('<b>Hello</b>');
// 结果 [ <p>I would like to say: </p><b>Hello</b> ]
.replaceWith()
用新元素替换选中元素。
传入的参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList、HTML 字符串
$$('.box').replaceWith('<p>Hello</p>');
// 用 <p>Hello</p> 替换所有的 .box 元素
.replaceAll()
用选中元素替换指定元素。
传入的参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList
$$('.new').replaceAll('.box');
// 用 .new 元素替换所有 .box 元素
.clone()
通过深度克隆来复制集合中的所有元素。
通过原生 cloneNode 方法深度克隆来复制集合中的所有元素。此方法不会有数据和事件处理程序复制到新的元素。这点和jquery中利用一个参数来确定是否复制数据和事件处理不相同。
$$('body').append($$("#box").clone())
.serializeArray()
把表单元素的值组合成由 name 和 value 的键值对组成的数组。
$$('form').serializeArray();
// [{"name":"golang","value":"456"},{"name":"name","value":"mdui"},{"name":"password","value":""}]
.serialize()
将表单元素数组或者对象序列化。
$$('form').serialize();
// golang=456&name=mdui&password=
.on()
为每个匹配元素的特定事件绑定事件处理函数。
// 绑定点击事件 $$('.box').on('click', function (e) {
console.log('点击了 .box 元素'); }); // 绑定多个事件 $$('.box').on('click focus', function (e) {
console.log('click 和 focus 事件都会触发该函数'); }); // 事件委托 $$(document).on('click', '.box', function (e) {
console.log('点击 .box 时会触发该函数'); }); // 同时绑定多个事件和事件处理函数 $$('.box').on({
'click': function (e) { console.log('触发了 click 事件'); }, 'focus': function (e) { console.log('触发了 focus 事件'); } }); // 传入事件参数 $$('.box').on('click', {key1: 'value1', key2: 'value2'}, function (e) {
console.log('点击了 .box 元素,并为事件处理函数传入了参数'); });
.one()
为每个匹配元素的特定事件绑定事件处理函数。但事件只会触发一次。
该方法的用法和 .on() 相同,所以不再举例了。
.off()
从每个匹配的元素中解除绑定的事件。
// 解除绑定的指定事件 $$('.box').off('click');
// 同时解除多个绑定的事件 $$('.box').off('click focus');
// 解除绑定的指定事件处理函数 $$('.box').off('click', callback); // 解除通过事件委托绑定的事件 $$(document).off('click', '.box');
// 解除通过事件委托绑定的指定事件处理函数 $$(document).off('click', '.box', callback);
.trigger()
触发指定的事件
// 触发指定的事件
$$('.box').trigger('click');
// 触发事件时传入参数
$$('.box').trigger('click', {key1: 'value1', key2: 'value2'});
.ready()
DOM 加载完毕,DOMContentLoaded 事件触发时触发。
$$(document).ready(function () {
console.log('当前页面 DOM 已加载完毕'); }); // 它还有另一种写法,和 .ready() 方法效果一样 $$(function () {
console.log('当前页面 DOM 已加载完毕'); });
.reflow()
重绘当前元素。
$$('.box').reflow();
.transition()
设置当前元素的 transition-duration 属性。
$$('.box').transition();
.transitionEnd()
在当前元素上添加 transitionend 事件回调。
$$('.box').transitionEnd(function () {
console.log('.box 元素的 transitionend 事件已触发');
})
.transform()
设置当前元素的 transform 属性。
$$('.box').transform('rotate(90deg)')
.transformOrigin()
设置当前元素的 transform-origin 属性。
$$('.box').transformOrigin('top center')
$$.showOverlay()
显示遮罩层。可以传入一个整数参数,表示遮罩层的 z-index 样式,默认为 2000.
$$.showOverlay();
$$.hideOverlay()
隐藏遮罩层。
如果调用了多次 $$.showOverlay() 来显示遮罩层,则也需要调用相同次数的 $$.hideOverlay() 才能隐藏遮罩层。可以通过传入参数 true 来强制隐藏遮罩层。
$$.hideOverlay();
$$.lockScreen()
锁定屏幕。
$$.lockScreen();
$$.unlockScreen()
解锁屏幕。
如果调用了多次 $$.lockScreen() 来显示遮罩层,则也需要调用相同次数的 $$.unlockScreen() 才能隐藏遮罩层。可以通过传入参数 true 来强制隐藏遮罩层。
$$.unlockScreen();
$$.throttle()
函数节流。
第一个参数是执行的函数,第二个参数是延迟时间。
$$.throttle(function () {
console.log('这个函数最多 100ms 执行一次');
}, 100)
$$.guid()
生成一个全局唯一的 ID。
$$.guid();
更多建议: