codecamp

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();


规范
颜色与主题
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }