JavaScript 工具库

该方法有多种用法：

可以传入一个 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') })

如果只传入一个对象，该对象中的属性将合并到 JQ 对象中，相当于在 JQ 的命名空间下添加新的功能。

$$.extend({
  customFunc: function () {}
})

// 然后就可以这样调用自定义方法了
$$.customFunc()

如果传入了两个或更多个对象，所有对象的属性都添加到第一个对象，并返回合并后的对象。

var object = $$.extend(
  { key1: val1 },
  { key2: val2 },
  { key3: val3 }
);

// 此时第一个对象和返回值都是 { key1: val1, key2: val2, key3: val3 }

在 JQ 的原型链上扩展方法。

$$.fn.extend({
  customFunc: function () {}
})

// 然后就可以这样使用扩展的方法了
$$(document).customFunc()

将数组或对象序列化。

$$.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(['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

合并两个数组，合并的结果会替换第一个数组的内容，并返回合并的结果。

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']

删除数组中的重复元素。可以是 DOM 元素数组、字符串数组、数字数组。返回去重后的数组。

var result = $$.unique([1,2,12,3,2,1,2,1,1,1,1]);
console.log(result); // [1, 2, 12, 3]

遍历数组或对象，通过函数返回一个新的数组或对象，null 和 undefined 将被过滤掉。

var result = $$.map(['a', 'b', 'c'], function (value, key) {
    return i + value;
});
console.log(result); // ['0a', '1b', '2c']

var result = $$.map([1, 2, 3], function (value, key) {
    return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

判断父节点是否包含子节点，返回布尔值。

$$.contains(document, document.body); // true
$$.contains(document.body, document); // false

根据 CSS 选择器、DOM 元素、或 JQ 对象来检测匹配的元素集合，至少有一个元素匹配则返回 true，否则返回 false。

$$('.box').is('.box'); // true
$$('.box').is('.boxss'); // false
$$('.box').is($$('.box')[0]); // true

返回 JQ 对象中元素的数量。

$$('body').length; // 1

遍历一个 JQ 对象，为每一个匹配元素执行一个函数。如果函数返回 false，则结束遍历。

函数的第一个参数为元素的索引号，第二个参数为当前元素。函数的 this 关键字指向当前元素。

$$('img').each(function(i, element) {
    this.src = 'test' + i + '.jpg';
});

遍历一个 JQ 对象，为对象的每个元素都调用一个函数，生成一个包含函数返回值的新的 JQ 对象。null 和 undefined 会被过滤掉。

函数的第一个参数为元素的索引号，第二个参数为当前元素。函数的 this 关键字指向当前元素。

var result = $$('input.checked').map(function (i, element) {
    return $$(this).val();
});

// result 为匹配元素的值组成的 JQ 对象

返回 JQ 对象中指定索引号的元素的 JQ 对象。

$$('div').eq(0); // 返回第一个元素的 JQ 对象
$$('div').eq(-1); // 返回最后一个元素的 JQ 对象
$$('div').eq(-2); // 返回倒数第二个元素的 JQ 对象

返回 JQ 对象中第一个元素的 JQ 对象。

$$('div').first(); // 返回第一个 div 的 JQ 对象

返回 JQ 对象中最后一个元素的 JQ 对象。

$$('div').last(); // 返回最后一个 div 的 JQ 对象

返回 JQ 对象中指定索引号的 DOM 元素。若没有指定索引号，则返回 JQ 对象中所有 DOM 元素组成的数组。

$$('div').get(); // 返回所有 div 元素组成的数组
$$('div').get(0); // 返回第一个 div 元素
$$('div').get(-1); // 返回最后一个 div 元素

如果没有传入参数，则返回 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

返回一个 JQ 对象的子集。

子集为从 start 开始的元素。如果传入了 end 参数，则提取从 start 到不包含 end 位置的元素。

$$('div').slice(3); // 返回对象中第三个（包含第三个）之后的所有元素
$$('div').slice(3, 5); // 返回对象中第三个到第五个（包含第三个，不包含第五个）之间的元素

从 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;
});

从 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;
});

判断 JQ 对象中的第一个元素是否含有指定 CSS 类。

$$('div').hasClass('item')

为元素添加 CSS 类，多个类名之间可以用空格分隔。

$$('div').addClass('item')

$$('div').addClass('item1 item2')

移除元素上的 CSS 类，多个类名之间可以用空格分隔。

$$('div').removeClass('item')

$$('div').removeClass('item1 item2')

元素上的 CSS 类，有则删除，无则添加。多个类名之间可以用空格分隔。

$$('div').toggleClass('item')

$$('div').toggleClass('item1 item2')

获取或设置选中元素的属性值。

// 获取第一个元素的属性值
$$('input[type="checkbox"]').prop('checked');

// 设置所有选中元素的属性值
$$('input[type="checkbox"]').prop('checked', true);

// 同时设置元素的多个属性值
$$('input').prop({
  checked: false,
  disabled: true
})

删除选中元素指定的属性值。

$$('input').removeProp('disabled')

获取或设置选中元素的属性值。

// 获取第一个元素的属性值
$$('div').attr('username');

// 设置所有选中元素的属性值
$$('div').attr('username', 'mdui');

// 同时设置元素的多个属性值
$$('div').prop({
  username: 'mdui',
  lastname: 'test'
})

删除选中元素的指定属性值。

$$('div').removeAttr('username')

获取或设置选中元素的值。

// 获取选中的第一个元素的值
$$('#input').val()

// 设置选中元素的值
$$('#input').val('input value')

获取或设置选中元素的文本内容。

// 获取选中的第一个元素的文本内容
$$('#box').text()

// 设置选中元素的文本内容
$$('#box').text('text content')

获取或设置选中元素的 HTML 内容。

// 获取选中的第一个元素的 HTML 内容
$$('#box').html()

// 设置选中元素的 HTML
$$('#box').html('html content')

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

删除 DOM 上存储的数据。

// 删除 DOM 上存储的键名为 key 的数据
$$.removeData(dom, 'key');

在当前 JQ 对象的元素上存储数据。

// 在 .box 元素上存储一个字符串
$$('.box').data('key', 'value');

// 在 .box 元素上存储一个对象
$$('.box').data('obj', {
    test: 'test'
});

// 在 .box 元素上同时存储多个数据
$$('.box').data({
    key1: 'value1',
    key2: {
        test: 'test'
    }
});

// 获取 .box 上存储的所有数据
$$('.box').data();

删除 JQ 对象的元素上存储的数据。

// 删除 .box 元素上存储的键名为 key 的数据
$$('.box').removeData('key');

获取 JQ 对象中的第一个元素的样式值，或者设置每一个元素的样式。

// 获取元素样式值
$$('#box').css('color')

// 设置元素的样式值
$$('#box').css('color', 'red')

// 同时设置多个样式值
$$('#box').css({
  'color': 'red',
  'background-color': 'white'
})

如果没有传入参数，则获取 JQ 对象中第一个元素的宽度。

如果传入了参数，则设置 JQ 对象中所有元素的宽度，如果参数是个数字或数字字符串，会自动添加 px 作为单位。

该方法获取的值默认不包含内边距和外边距，当 box-sizing:border-box 时，会包含内边距。

$$('.box').width();
$$('.box').width(10);
$$('.box').width('20%')

如果没有传入参数，则获取 JQ 对象中第一个元素的高度。

如果传入了参数，则设置 JQ 对象中所有元素的高度，如果参数是个数字或数字字符串，会自动添加 px 作为单位。

该方法获取的值默认不包含内边距和外边距，当 box-sizing:border-box 时，会包含内边距。

$$('.box').height();
$$('.box').height(10);
$$('.box').height('20%');

获取元素的宽度，包含内边距。

$$('.box').innerWidth();

获取元素的高度，包含内边距。

$$('.box').innerHeight();

隐藏 JQ 对象中的所有元素。

$$('.box').hide();

恢复 JQ 对象中的所有元素的显示状态。

$$('.box').show();

切换 JQ 对象中所有元素的显示状态。

$$('.box').toggle();

获取元素相对于 document 的偏移，以及元素的宽度和高度。

$$('.box').offset();
// {
//     top: 20,
//     left: 30,
//     width: 200,
//     height: 100
// }

返回 JQ 对象中第一个元素的用于定位的父元素的 JQ 对象。即父元素中第一个 position 为 relative 或 absolute 的元素。

$$('.box').offsetParent()

获取元素相对于父元素的偏移，以及宽度和高度。

$$('.box').position();
// {
//     top: 20,
//     left: 30,
//     width: 100,
//     height: 200
// }

根据 CSS 选择器找到指定的后代节点的集合。

// 找到 #box 的后代节点中，包含 .box 的节点集合
$$('#box').find('.box')

获取匹配元素的直接子元素，可以使用 CSS 选择器作为参数进行过滤。

参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。

// 找到 #box 的所有直接子元素
$$('#box').children()

// 找到 #box 的所有直接子元素中，包含 .box 的元素集合
$$('#box').children('.box')

对匹配元素的子元素，按传入的参数进行过滤，返回过滤后的元素的 JQ 对象。

传入的参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。

// 给含有 ul 的 li 加上背景色
$$('li').has('ul').css('background-color', 'red');

返回匹配的直接父元素的 JQ 对象。

如果没有传入参数，则直接返回直接父元素的 JQ 对象。如果传入了参数，仅返回和参数匹配的直接父元素的 JQ 对象。

参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。

// 返回 .box 元素的直接父元素
$$('.box').parent();

// 返回 .box 元素的直接父元素中含有 .parent 类的元素
$$('.box').parent('.parent');

返回匹配的所有祖先元素的 JQ 对象。

传入的参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。

// 返回 span 元素的所有祖先元素
$$('span').parents();

// 返回 span 元素的所有是 p 元素的祖先元素
$$('span').parents('p');

查找当前元素的所有父辈元素，直到遇到匹配的那个元素为止。

返回的 JQ 对象里包含了下面所有找到的父辈元素，但不包含参数匹配到的元素。

// 查找 .item 元素的所有父辈元素，直到遇到 .parent 元素
$$('.item').parentsUntil('.parent');

获取当前元素的前一个同辈元素的 JQ 对象。可以使用参数进行过滤。

参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。

// 返回 .box 元素的前一个元素
$$('.box').prev();

// 获取 .box 元素的前一个 div 元素
$$('.box').prev('div');

获取当前元素前面的所有同辈元素的 JQ 对象。可以使用参数进行过滤。

参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。

// 返回 .box 元素前面的所有同辈元素
$$('.box').prevAll();

// 返回 .box 元素前面的所有含 .selected 的同辈元素
$$('.box').prevAll('.selected');

获取当前元素前面所有的同辈元素，直到遇到匹配元素，不包含匹配元素。

参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。

// 返回 .box 元素前所有的同辈元素，直到遇到 .until 元素
$$('.box').prevUntil('.until');

获取当前元素的后一个同辈元素的 JQ 对象。可以使用参数进行过滤。

参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。

// 返回 .box 元素的后一个元素
$$('.box').next();

// 获取 .box 元素的后一个 div 元素
$$('.box').next('div');

获取当前元素后面的所有同辈元素的 JQ 对象。可以使用参数进行过滤。

参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。

// 返回 .box 元素后面的所有同辈元素
$$('.box').nextAll();

// 返回 .box 元素后面的所有含 .selected 的同辈元素
$$('.box').nextAll('.selected');

获取当前元素后面所有的同辈元素，直到遇到匹配元素，不包含匹配元素。

参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。

// 返回 .box 元素后所有的同辈元素，直到遇到 .until 元素
$$('.box').nextUntil('.until');

从当前元素向上逐级匹配，返回最先匹配到的元素。

参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。

// 获取 .box 元素的父元素中最近的 .parent 元素
$$('.box').closest('.parent');

获取当前元素的所有同辈元素。可以使用参数进行过滤。

参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。

// 获取 .box 元素的所有同辈元素
$$('.box').siblings();

// 获取 .box 元素的所有同辈元素中含 .selected 的元素
$$('.box').siblings('.selected');

添加元素到当前 JQ 对象中。

参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。

// 把含 .selected 的元素添加到当前 JQ 对象中
$$('.box').add('.selected');

从 DOM 中移除选中元素的所有子节点。

$$('.box').empty();

从 DOM 中移除所有选中的元素。

$$('.box').remove();

在选中元素内部的前面插入指定内容。

传入的参数可以是 字符串、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> ]

把选中元素添加到另一个指定元素的内部的前面。

传入的参数可以是 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> ]

在选中元素内部的后面插入指定内容。

传入的参数可以是 字符串、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> ]

把选中元素插入到另一个指定元素的内部的后面。

传入的参数可以是 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> ]

在选中元素的后面插入内容。

传入的参数可以是 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> ]

把选中元素插入到指定元素的后面。

传入的参数可以是 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> ]

在选中元素前面插入内容。

传入的参数可以是 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> ]

把选中元素插入到指定元素前面。

传入的参数可以是 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> ]

用新元素替换选中元素。

传入的参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList、HTML 字符串

$$('.box').replaceWith('<p>Hello</p>');
// 用 <p>Hello</p> 替换所有的 .box 元素 

用选中元素替换指定元素。

传入的参数可以是 CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList

$$('.new').replaceAll('.box');
// 用 .new 元素替换所有 .box 元素

通过深度克隆来复制集合中的所有元素。

通过原生 cloneNode 方法深度克隆来复制集合中的所有元素。此方法不会有数据和事件处理程序复制到新的元素。这点和jquery中利用一个参数来确定是否复制数据和事件处理不相同。

$$('body').append($("#box").clone())

把表单元素的值组合成由 name 和 value 的键值对组成的数组。

$$('form').serializeArray();
// [{"name":"golang","value":"456"},{"name":"name","value":"mdui"},{"name":"password","value":""}]

将表单元素数组或者对象序列化。

$$('form').serialize();
// golang=456&name=mdui&password=

为每个匹配元素的特定事件绑定事件处理函数。

// 绑定点击事件
$$('.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 元素，并为事件处理函数传入了参数');
});

为每个匹配元素的特定事件绑定事件处理函数。但事件只会触发一次。

该方法的用法和 .on() 相同，所以不再举例了。

从每个匹配的元素中解除绑定的事件。

// 解除绑定的指定事件
$$('.box').off('click');

// 同时解除多个绑定的事件
$$('.box').off('click focus');

// 解除绑定的指定事件处理函数
$$('.box').off('click', callback);

// 解除通过事件委托绑定的事件
$$(document).off('click', '.box');

// 解除通过事件委托绑定的指定事件处理函数
$$(document).off('click', '.box', callback);

触发指定的事件

// 触发指定的事件
$$('.box').trigger('click');

// 触发事件时传入参数
$$('.box').trigger('click', {key1: 'value1', key2: 'value2'});

DOM 加载完毕，DOMContentLoaded 事件触发时触发。

$$(document).ready(function () {
    console.log('当前页面 DOM 已加载完毕');
});

// 它还有另一种写法，和 .ready() 方法效果一样
$$(function () {
    console.log('当前页面 DOM 已加载完毕');
});

重绘当前元素。

$$('.box').reflow();

设置当前元素的 transition-duration 属性。

$$('.box').transition();

在当前元素上添加 transitionend 事件回调。

$$('.box').transitionEnd(function () {
    console.log('.box 元素的 transitionend 事件已触发');
})

设置当前元素的 transform 属性。

$$('.box').transform('rotate(90deg)')

设置当前元素的 transform-origin 属性。

$$('.box').transformOrigin('top center')

显示遮罩层。可以传入一个整数参数，表示遮罩层的 z-index 样式，默认为 2000.

$$.showOverlay();

隐藏遮罩层。

如果调用了多次 $$.showOverlay() 来显示遮罩层，则也需要调用相同次数的 $$.hideOverlay() 才能隐藏遮罩层。可以通过传入参数 true 来强制隐藏遮罩层。

$$.hideOverlay();

锁定屏幕。

$$.lockScreen();

解锁屏幕。

如果调用了多次 $$.lockScreen() 来显示遮罩层，则也需要调用相同次数的 $$.unlockScreen() 才能隐藏遮罩层。可以通过传入参数 true 来强制隐藏遮罩层。

$$.unlockScreen();

函数节流。

第一个参数是执行的函数，第二个参数是延迟时间。

$$.throttle(function () {
    console.log('这个函数最多 100ms 执行一次');
}, 100)

生成一个全局唯一的 ID。

$$.guid();