JavaScript 工具库

MDUI 内置了一个轻量的 JavaScript 工具库，它拥有和 jQuery 类似的 api 和 jQuery 风格的链式调用，但体积仅为 jQuery 的六分之一。

你可以通过 mdui.$ 来调用该库，但最好把 mdui.$ 存储到一个简短的变量中以方便调用，例如：

1
1
var $ = mdui.$;

在后面的文档中，都使用 $ 来表示 mdui.$。

核心

$()

该方法有多种用法：可以传入一个 CSS 选择器作为参数，返回包含匹配元素的 JQ 对象。该方法是通过 querySelectorAll 实现的。

1
1
$('.box')

可以传入 DOM 元素、任意数组、NodeList、JQ 对象，返回包含指定元素的 JQ 对象。

1
1
$(document)

可以传入 HTML 字符串，返回包含根据 HTML 创建的 DOM 的 JQ 对象。

3
1
$('<div id="wrapper">
2
  <span id="inner"></span>
3
</div>')

可以传入一个函数，在 DOM 加载完毕后会调用该函数。

1
1
$(function () { console.log('DOM Loaded') })

插件编写

$.extend()

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

6
1
$.extend({
2
  customFunc: function () {}
3
})
4

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

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

7
1
var object = $.extend(
2
  { key1: val1 },
3
  { key2: val2 },
4
  { key3: val3 }
5
);
6

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

$.fn.extend()

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

6
1
$.fn.extend({
2
  customFunc: function () {}
3
})
4

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

URL

$.param()

将对象或数组序列化，返回一个可用于 URL 参数的字符串。

8
1
$.param({ width: 1680, height: 1050 })
2
// width=1680&height=1050
3

4
$.param({ foo: { one: 1, two: 2 } })
5
// foo[one]=1&foo[two]=2
6

7
$.param({ ids: [1, 2, 3] })
8
// ids[]=1&ids[]=2&ids[]=3

若传入参数是一个数组，则该数组格式必须与 .serializeArray() 的返回格式一致：

5
1
param([
2
  { "name": "name", "value": "mdui" },
3
  { "name": "password", "value": "123456" }
4
])
5
// name=mdui&password=123456

数组对象操作

$.each()

遍历数组或对象。返回值为第一个参数，即被遍历的数组或对象。

函数的第一个参数为数组的索引位置、或对象的键；第二个参数为数组或对象对应位置的值。

回调函数中的 this 指向数组或对象对应位置的值。若回调函数返回 false，则停止遍历。

9
1
// 遍历一个数组
2
$.each(['a', 'b', 'c'], function (index, value) {
3
  console.log(index + ':' + value);
4
})
5

6
// 结果：
7
// 0:a
8
// 1:b
9
// 2:c

8
1
// 遍历一个对象
2
$.each({'name': 'mdui', 'lang': 'zh'}, function (key, value) {
3
  console.log(key + ':' + value);
4
})
5

6
// 结果
7
// name:mdui
8
// lang:zh

$.merge()

把第二个数组的元素追加到第一个数组中，并返回合并后的数组。

6
1
var first = ['a', 'b', 'c'];
2
var second = ['c', 'd', 'e'];
3
var result = $.merge(first, second);
4

5
console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e']
6
console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e']

$.unique()

过滤掉数组中的重复元素。

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

$.map()

遍历数组或对象，返回由函数的返回值组成的新数组。

函数的第一个参数为数组或对象对应位置的值，第二个参数为数组的索引位置、或对象的键。

函数可以返回任何值，若函数返回的是数组，则会被展开；若返回的是 null 或 undefined，则会被忽略。函数内部的 this 指向 window 对象。

5
1
// 遍历数组
2
var result = $.map(['a', 'b', 'c'], function (value, index) {
3
  return index + value;
4
});
5
console.log(result); // ['0a', '1b', '2c']

5
1
// 回调函数返回数组时，会被展开
2
var result = $.map([1, 2, 3], function (value, index) {
3
  return [value, value + 1];
4
});
5
console.log(result); // [1, 2, 2, 3, 3, 4]

5
1
// 遍历对象
2
var result = $.map({ name: 'mdui', password: '123456' }, function (value, key) {
3
  return key + ':' + value;
4
});
5
console.log(result); // ['name:mdui', 'password:123456']

$.contains()

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

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

数据类型判断

.is()

如果集合中至少有一个元素和参数匹配，则返回 true，否则返回 false。

参数可以是 CSS 选择器、DOM 元素、DOM 元素数组、JQ 对象、或回调函数。

参数为回调函数时，函数的第一个参数为索引位置，第二个参数为当前元素，this 指向当前元素。若函数返回 true，表示匹配；若返回 false，表示不匹配。

8
1
$('.box').is('.box'); // true
2
$('.box').is('.boxss'); // false
3
$('.box').is($('.box')[0]); // true
4
// 通过回调函数的返回值做判断
5
$(document).is(function (index, element) {
6
  return element === document;
7
});
8
// true

对象访问

.length

返回当前集合中元素的数量。

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

.each()

遍历当前集合，为集合中每一个元素执行一个函数。如果函数返回 false，则结束遍历。

函数的第一个参数为元素的索引位置，第二个参数为当前元素。函数中的 this 指向当前元素。

3
1
$('img').each(function(index, element) {
2
  this.src = 'test' + index + '.jpg';
3
});

.map()

遍历当前集合，为集合中的每个元素执行一个函数，返回由函数返回值组成的新集合。若函数返回 null 或 undefined 则会被过滤。

函数的第一个参数为元素的索引位置，第二个参数为当前元素。函数的 this 指向当前元素。

5
1
var result = $('input.checked').map(function (index, element) {
2
  return $(this).val();
3
});
4

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

.eq()

返回仅包含指定索引位置的元素的集合。

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

.first()

返回仅包含第一个元素的集合。

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

.last()

返回仅包含最后一个元素的集合。

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

.get()

返回指定索引位置的元素。若未传入参数，则返回集合中所有元素组成的数组。

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

.index()

如果没有传入参数，则返回集合中第一个元素相对于同辈元素的索引位置。

如果传入了一个 CSS 选择器作为参数，则返回集合中第一个元素相对与 CSS 选择器匹配元素的索引位置。

如果传入了一个 DOM 元素，则返回该 DOM 元素在集合中的索引值。

如果传入一个 JQ 对象，则返回对象中第一个元素在当前集合中的索引位置。

6
1
<div id="child">
2
  <div id="child1"></div>
3
  <div id="child2"></div>
4
  <div id="child3"></div>
5
  <div id="child4"></div>
6
</div>

3
1
$('#child3').index(); // 2
2
$('#child3').index('#child div'); // 2
3
$('#child div').index($('#child3').get(0); // 2

.slice()

返回当前集合的子集。

第一个参数为子集的起始位置，第二个参数为子集的结束位置；若未传入第二个参数，表示包含从起始位置到结尾的所有元素。

5
1
// 返回集合中第三个（包含第三个）之后的所有元素
2
$('div').slice(3);
3

4
// 返回集合中第三个到第五个（包含第三个，不包含第五个）之间的元素
5
$('div').slice(3, 5);

.filter()

从当前集合中筛选出与指定表达式匹配的元素。参数可以是 CSS 选择器、DOM 元素、DOM 元素数组、回调函数。

参数为函数时，函数的第一个参数为索引位置，第二个参数为当前元素，函数中的 this 指向当前元素。函数返回 true 时，当前元素会被保留，返回 false 时，当前元素会被移除。

7
1
// 筛选出所有含 .box 的 div 元素
2
$('div').filter('.box');
3

4
// 筛选出所有已选中选项
5
$('#select option').filter(function (index, element) {
6
  return element.selected;
7
});

.not()

从当前集合中筛选出与指定表达式不匹配的元素。参数可以是 CSS 选择器、DOM 元素、DOM 元素数组、回调函数。

参数为函数时，函数的第一个参数为索引位置，第二个参数为当前元素，函数中的 this 指向当前元素。函数返回 true 时，当前元素会被移除，返回 false 时，当前元素会被保留。

7
1
// 筛选出所有不含 .box 类的 div 元素
2
$('div').not('.box');
3

4
// 筛选出所有未选中选项
5
$('#select option').not(function (index, element) {
6
  return element.selected;
7
});

CSS 类

.hasClass()

判断集合中的第一个元素是否含有指定 CSS 类。

2
1
// 判断第一个 div 元素是否含有 .item
2
$('div').hasClass('item')

.addClass()

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

也可以传入一个返回 CSS 类名的回调函数。函数的第一个参数为索引位置，第二个参数为该元素上原有的 CSS 类名，函数中的 this 指向当前元素。

2
1
// 为所有 div 元素添加 .item
2
$('div').addClass('item')

2
1
// 为所有 div 元素添加 .item1 和 .item2
2
$('div').addClass('item1 item2')

4
1
// 为所有 div 元素添加由回调函数返回的 CSS 类
2
$('div').addClass(function (index, currentClassName) {
3
  return currentClassName + '-' + index;
4
})

.removeClass()

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

也可以传入一个返回 CSS 类名的回调函数。函数的第一个参数为索引位置，第二个参数为该元素上原有的 CSS 类名，函数中的 this 指向当前元素。

若没有传入参数，则将直接移除元素上的 class 属性。

2
1
// 移除所有 div 元素上的 .item
2
$('div').removeClass('item')

2
1
// 移除所有 div 元素上的 .item1 和 .item2
2
$('div').removeClass('item1 item2')

4
1
// 移除所有 div 元素上的由回调函数返回的 CSS 类
2
$('div').removeClass(function (index, currentClassName) {
3
  return 'item';
4
})

2
1
// 直接移除 class 属性
2
$('div').removeClass()

.toggleClass()

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

也可以传入一个返回 CSS 类名的回调函数。函数的第一个参数为索引位置，第二个参数为该元素上原有的 CSS 类名，函数中的 this 指向当前元素。

2
1
// 切换所有 div 元素上的 .item
2
$('div').toggleClass('item')

2
1
// 切换所有 div 元素上的 .item1 和 .item2
2
$('div').toggleClass('item1 item2')

4
1
// 切换所有 div 元素上的由回调函数返回的 CSS 类
2
$('div').toggleClass(function (index, currentClassName) {
3
  return 'item';
4
})

节点属性

.prop()

获取集合中第一个元素的属性值。

2
1
// 获取第一个元素的属性值
2
$('input').prop('checked');

也可以是设置集合中所有元素的属性值。

设置的属性值可以是回调函数的返回值。回调函数的第一个参数为元素的索引位置，第二个参数为该元素上原有的属性值，函数内的 this 指向当前元素。

若属性值或回调函数的返回值为 void 或 undefined，则不会修改原有属性。

也可以通过传入对象来同时设置多个属性。

15
1
// 设置所有选中元素的属性值
2
$('input').prop('checked', true);
3

4
// 通过回调函数的返回值设置属性值
5
$('input').prop('checked', function (index, oldPropValue) {
6
  return true;
7
});
8

9
// 同时设置元素的多个属性值
10
$('input').prop({
11
  checked: false,
12
  disabled: function (index, oldPropValue) {
13
    return true;
14
  }
15
});

.removeProp()

删除集合中所有元素上指定的属性值。

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

.attr()

获取集合中第一个元素的属性值。

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

也可以是设置集合中所有元素的属性值。

设置的属性值可以是回调函数的返回值。回调函数的第一个参数为元素的索引位置，第二个参数为该元素上原有的属性值，函数内的 this 指向当前元素。

若属性值或回调函数的返回值为 void 或 undefined，则不会修改原有属性。若属性值或回调函数的返回值为 null，则删除指定属性。

也可以通过传入对象来同时设置多个属性。

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

4
// 通过回调函数的返回值设置属性值
5
$('div').attr('username', function (index, oldAttrValue) {
6
  return 'mdui';
7
});
8

9
// 同时设置元素的多个属性值
10
$('div').attr({
11
  username: 'mdui',
12
  lastname: function (index, oldAttrValue) {
13
    return 'test';
14
  }
15
});

.removeAttr()

删除集合中所有元素上指定的属性值，多个属性名之间可以用空格分隔。

5
1
// 删除集合中所有元素上的一个属性
2
$('div').removeAttr('username');
3

4
// 删除集合中所有元素上的多个属性
5
$('div').removeAttr('username lastname');

.val()

获取集合中第一个元素的值。

若元素是 <select multiple="multiple">，则将返回一个包含每个选择项的数组。

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

也可以是设置集合中所有元素的值。

设置的值可以是字符串、数值、字符串数组、回调函数。

若值为回调函数，第一个参数为元素的索引位置，第二个参数为元素的原有的值，函数中的 this 指向当前元素。

若元素为 <input type="checkbox">、<input type="radio">、<option>，则元素值、或函数返回值可以为数组，此时将选中值在数组中的元素，并取消值不在数组中的元素。

若值、或函数返回值为 undefined，则会将元素值设为空。

7
1
// 设置选中元素的值
2
$('#input').val('input value');
3

4
// 通过回调函数的返回值设置元素值
5
$('#input').val(function (index, oldValue) {
6
  return 'new value';
7
});

.text()

获取集合中所有元素的文本内容（包含它们的后代元素）

2
1
// 获取所有 .box 元素的文本
2
$('.box').text();

也可以是设置集合中所有元素的文本。

设置的值可以是字符串、数值、布尔值、回调函数。

若为回调函数，第一个参数为元素的索引位置，第二个参数为元素原有的文本内容，函数内的 this 指向当前元素。

若设置的值、或回调函数返回值为 undefined，则不修改对应元素的文本。

7
1
// 设置选中元素的文本内容
2
$('.box').text('text content');
3

4
// 通过回调函数的返回值设置元素的文本内容
5
$('.box').text(function (index, oldTextContent) {
6
  return 'new text content';
7
});

.html()

获取集合中第一个元素的 HTML 内容。

2
1
// 获取第一个 .box 元素的 HTML 内容
2
$('.box').html();

也可以是设置集合中所有元素的 HTML 内容。

设置的值可以是 HTML 字符串、DOM 元素、回调函数。

若为回调函数，第一个参数为元素的索引位置，第二个参数为元素原有的 HTML 内容，函数内的 this 指向当前元素。

如设置的值、或函数返回值为 undefined，则不修改对应元素的 HTML。

7
1
// 设置选中元素的 HTML
2
$('.box').html('<div>new html content</div>');
3

4
// 通过回调函数的返回值设置元素的 HTML 内容
5
$('.box').html(function (index, oldHTMLContent) {
6
  return '<div>new html content</div>';
7
});

数据存储

$.data()

在指定元素上读取或存储数据。

存储数据时，若值为 undefined，则相当于读取元素上对应的数据。即 $.data(element, 'key', undefined) 和 $.data(element, 'key') 等效。

注意：该方法不会检索元素上的 data-* 属性。

14
1
// 在指定元素上存储数据，返回存储的值
2
$.data(document.body, 'layout', 'dark'); // 返回 dark
3

4
// 在指定元素上同时存储多个数据
5
$.data(document.body, {
6
  primary: 'indigo',
7
  accent: 'pink',
8
});
9

10
// 获取在指定元素上存储的数据
11
$.data(document.body, 'layout'); // 返回 dark
12

13
// 获取在指定元素上存储的所有数据
14
$.data(document.body); // 返回 { layout: 'dark', primary: 'indigo', accent: 'pink' }

$.removeData()

移除指定元素上存储的数据。

多个键名可以用空格分隔，也可以用数组表示多个键名。未指定键名时，将移除元素上的所有数据。

9
1
// 移除元素上键名为 name 的数据
2
$.removeData(document.body, 'name');
3

4
// 移除元素上键名为 name1 和 name2 的数据。下面两种方法等效：
5
$.removeData(document.body, 'name1 name2');
6
$.removeData(document.body, ['name1', 'name2']);
7

8
// 移除元素上存储的所有数据
9
$.removeData(document.body);

.data()

在当前集合的元素上读取或存储数据。

存储数据时，若值为 undefined，则不进行存储。

注意：该方法检索的数据会包含元素上的 data-* 属性。

14
1
// 在当前集合中的元素上存储数据
2
$('.box').data('layout', 'dark');
3

4
// 在当前集合中的元素上同时存储多个数据
5
$('.box').data({
6
  primary: 'indigo',
7
  accent: 'pink',
8
});
9

10
// 获取当前集合中第一个元素上存储的指定数据
11
$('.box').data('layout'); // 返回 dark
12

13
// 获取在当前集合中第一个元素上存储的所有数据
14
$('.box').data(); // 返回 { layout: 'dark', primary: 'indigo', accent: 'pink' }

.removeData()

移除当前集合的元素上存储的数据。

多个键名可以用空格分隔，也可以用数组表示多个键名。未指定键名时，将移除元素上的所有数据。

注意：该方法只会移除通过 .data() 方法设置的数据，不会移除 data-* 属性上的数据。

9
1
// 移除键名为 name 的数据
2
$('.box').removeData('name');
3

4
// 移除键名为 name1 和 name2 的数据。下面两种方法等效：
5
$('.box').removeData('name1 name2');
6
$('.box').removeData(['name1', 'name2']);
7

8
// 移除元素上存储的所有数据
9
$('.box').removeData();

样式

.css()

获取集合中第一个元素的 CSS 属性值。

1
1
$('.box').css('color')

也可以设置集合中所有元素的 CSS 属性值。

属性值可以是字符串、数值、或一个返回字符串或数值的回调函数。

若属性值是回调函数，第一个参数为元素的索引位置，第二个参数为元素原有的 CSS 属性值，函数中的 this 指向当前元素。

若属性值或回调函数返回 void、undefined、null，则不对当前元素的 CSS 属性值进行修改。

若属性值或回调函数返回数值，则会添加 px 作为单位。若该属性无法使用 px 作为单位，则会直接把该值转为字符串。

也可以通过传入一个键值对对象，来同时设置多个 CSS 属性。

15
1
// 设置集合中所有元素的样式值
2
$('.box').css('color', 'red')
3

4
// 通过回调函数的返回值设置所有元素的样式值
5
$('.box').css('color', function (index, oldCSSValue) {
6
  return 'green';
7
});
8

9
// 通过传入一个对象同时设置多个样式
10
$('.box').css({
11
  'background-color': 'white',
12
  color: function (index, oldCSSValue) {
13
    return 'blue';
14
  },
15
});

.width()

获取集合中第一个元素的宽度（像素值），不包含 padding、border、margin 的宽度。

1
1
$('.box').width();

也可以设置集合中所有元素的宽度（不包含 padding、border、margin 的宽度）。

值可以是带单位的字符串、数值、或返回带单位的字符串或数值的回调函数。

回调函数的第一个参数为元素的索引位置，第二个参数为元素原有的宽度值，函数中的 this 指向当前元素。

若值、或回调函数的返回值为数值，则会自动添加 px 作为单位。

若值、或回调函数的返回值为 null 或 undefined，则不修改元素的宽度。

10
1
// 设置集合中所有元素的宽度
2
$('.box').width('20%');
3

4
// 值为数值时，默认单位为 px
5
$('.box').width(10);
6

7
// 通过回调函数的返回值设置宽度
8
$('.box').width(function (index, oldWidth) {
9
  return 10;
10
});

.height()

获取集合中第一个元素的高度（像素值），不包含 padding、border、margin 的高度。

1
1
$('.box').height();

也可以设置集合中所有元素的高度（不包含 padding、border、margin 的高度）。

值可以是带单位的字符串、数值、或返回带单位的字符串或数值的回调函数。

回调函数的第一个参数为元素的索引位置，第二个参数为元素原有的高度值，函数中的 this 指向当前元素。

若值、或回调函数的返回值为数值，则会自动添加 px 作为单位。

若值、或回调函数的返回值为 null 或 undefined，在不修改元素的高度。

10
1
// 设置集合中所有元素的高度
2
$('.box').height('20%');
3

4
// 值为数值时，默认单位为 px
5
$('.box').height(10);
6

7
// 通过回调函数的返回值设置高度
8
$('.box').height(function (index, oldWidth) {
9
  return 10;
10
});

.innerWidth()

获取集合中第一个元素的宽度（像素值），包含 padding，不包含 border、margin 的宽度。

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

也可以设置集合中所有元素的宽度（包含 padding，不包含 border、margin 的宽度）。

值可以是带单位的字符串、数值、或返回带单位的字符串或数值的回调函数。

回调函数的第一个参数为元素的索引位置，第二个参数为元素原有的宽度值，函数中的 this 指向当前元素。

若值、或回调函数的返回值为数值，则会自动添加 px 作为单位。

若值、或回调函数的返回值为 null 或 undefined，则不修改元素的宽度。

10
1
// 设置集合中所有元素的宽度
2
$('.box').innerWidth('20%');
3

4
// 值为数值时，默认单位为 px
5
$('.box').innerWidth(10);
6

7
// 通过回调函数的返回值设置宽度
8
$('.box').innerWidth(function (index, oldWidth) {
9
  return 10;
10
});

.innerHeight()

获取集合中第一个元素的高度（像素值），包含 padding，不包含 border、margin 的高度。

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

也可以设置集合中所有元素的高度（包含 padding，不包含 border、margin 的高度）。

值可以是带单位的字符串、数值、或返回带单位的字符串或数值的回调函数。

回调函数的第一个参数为元素的索引位置，第二个参数为元素原有的高度值，函数中的 this 指向当前元素。

若值、或回调函数的返回值为数值，则会自动添加 px 作为单位。

若值、或回调函数的返回值为 null 或 undefined，在不修改元素的高度。

10
1
// 设置集合中所有元素的高度
2
$('.box').innerHeight('20%');
3

4
// 值为数值时，默认单位为 px
5
$('.box').innerHeight(10);
6

7
// 通过回调函数的返回值设置高度
8
$('.box').innerHeight(function (index, oldHeight) {
9
  return 10;
10
});

.outerWidth()

获取集合中第一个元素的宽度（像素值），包含 padding、border的宽度，不包含 margin 的宽度，可以传入参数 true，使宽度包含 margin 的宽度。

5
1
// 包含 padding、border 的宽度
2
$('.box').outerWidth();
3

4
// 包含 padding、border、margin 的宽度
5
$('.box').outerWidth(true);

也可以设置集合中所有元素的宽度（包含 padding、border，不包含 margin 的宽度，可以在第二个参数中传入 true，使宽度包含 margin 的宽度）。

第一个参数可以是带单位的字符串、数值、或返回带单位的字符串或数值的回调函数。

回调函数的第一个参数为元素的索引位置，第二个参数为元素的原有宽度，函数中的 this 指向当前元素。

若值、或回调函数的返回值为数值，则会自动添加 px 作为单位。

若值、或回调函数的返回值为 null 或 undefined，则不修改元素的宽度。

13
1
// 设置集合中所有元素的宽度
2
$('.box').outerWidth('20%');
3

4
// 值为数值时，默认单位为 px
5
$('.box').outerWidth(10);
6

7
// 第二个参数为 true，则宽度将包含 margin
8
$('.box').outerWidth(10, true);
9

10
// 通过回调函数的返回值设置宽度
11
$('.box').outerWidth(function (index, oldWidth) {
12
  return 10;
13
});

.outerHeight()

获取集合中第一个元素的高度（像素值），包含 padding、border的高度，不包含 margin 的高度，可以传入参数 true，使高度包含 margin 的高度。

5
1
// 包含 padding、border 的高度
2
$('.box').outerHeight();
3

4
// 包含 padding、border、margin 的高度
5
$('.box').outerHeight(true);

也可以设置集合中所有元素的高度（包含 padding、border，不包含 margin 的高度，可以在第二个参数中传入 true，使高度包含 margin 的高度）。

第一个参数可以是带单位的字符串、数值、或返回带单位的字符串或数值的回调函数。

回调函数的第一个参数为元素的索引位置，第二个参数为元素的原有高度，函数中的 this 指向当前元素。

若值、或回调函数的返回值为数值，则会自动添加 px 作为单位。

若值、或回调函数的返回值为 null 或 undefined，则不修改元素的高度。

13
1
// 设置集合中所有元素的高度
2
$('.box').outerHeight('20%');
3

4
// 值为数值时，默认单位为 px
5
$('.box').outerHeight(10);
6

7
// 第二个参数为 true，则高度将包含 margin
8
$('.box').outerHeight(10, true);
9

10
// 通过回调函数的返回值设置高度
11
$('.box').outerHeight(function (index, oldWidth) {
12
  return 10;
13
});

.hide()

隐藏集合中的所有元素。

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

.show()

显示集合中的所有元素。

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

.toggle()

切换集合中所有元素的显示状态。

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

.offset()

获取集合中第一个元素相对于 document 的坐标。

1
1
$('.box').offset(); // { top: 20, left: 30 }

也可以设置集合中所有元素相对于 document 的坐标。

参数为一个包含 top 和 left 属性的对象，或一个返回此格式对象的回调函数。

若参数是回调函数，第一个参数为元素的索引位置，第二个参数为元素的原有坐标，函数中的 this 指向当前元素。

若参数中 top 或 left 的值为 undefined，则不修改对应的值。

7
1
// 设置集合中所有元素的坐标
2
$('.box').offset({ top: 20, left: 30 });
3

4
// 通过回调函数的返回值设置元素的坐标
5
$('.box').offset(function (index, oldOffset) {
6
  return { top: 20, left: 30 };
7
});

.offsetParent()

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

1
1
$('.box').offsetParent();

.position()

获取集合中第一个元素相对于父元素的偏移。

1
1
$('.box').position(); // { top: 20, left: 30 }

查找节点

.find()

在当前集合的所有元素中，根据 CSS 选择器找到指定的后代节点的集合。

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

.children()

在当前集合的所有元素中，获取直接子元素组成的集合。

可以传入一个 CSS 选择器作为参数，对子元素进行过滤。

5
1
// 找到 #box 的所有直接子元素
2
$('#box').children();
3

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

.has()

在当前集合的所有元素中，筛选出含有指定子元素的元素。

参数可以是 CSS 选择器或 DOM 元素。

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

.parent()

获取当前集合中，所有元素的直接父元素的集合。

可以传入一个 CSS 选择器作为参数，仅返回与该参数匹配的父元素的集合。

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

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

.parents()

获取当前集合中，所有元素的祖先元素的集合。

可以传入一个 CSS 选择器作为参数，仅返回与该参数匹配的祖先元素的集合。

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

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

.parentsUntil()

获取当前集合中，每个元素的所有父辈元素，直到遇到和第一个参数匹配的元素为止（不包含匹配元素）。

第一个参数可以是 CSS 选择器、DOM 元素、JQ 对象。

可以传入第二个参数，必须是 CSS 选择器，表示仅返回和该参数匹配的元素。

若没有指定参数，则所有的祖先元素都将被匹配，即和 .parents() 效果一样。

8
1
// 获取 .item 元素的所有祖先元素
2
$('.item').parentsUntil();
3

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

7
// 获取 .item 元素的所有是 div 元素的祖先元素，直到遇到 .parent 元素为止
8
$('.item').parentsUntil('.parent', 'div');

.prev()

获取当前集合中所有元素的前一个同辈元素组成的集合。

可以传入一个 CSS 选择器作为参数，仅获取和该参数匹配的同辈元素的集合。

5
1
// 获取 .box 元素的前一个元素的集合
2
$('.box').prev();
3

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

.prevAll()

获取当前集合中所有元素的前面的所有同辈元素组成的集合。

可以传入一个 CSS 选择器作为参数，仅获取和该参数匹配的同辈元素的集合。

5
1
// 获取 .box 元素前面的所有同辈元素
2
$('.box').prevAll();
3

4
// 获取 .box 元素前面的所有含 .selected 的同辈元素
5
$('.box').prevAll('.selected');

.prevUntil()

获取当前集合中，每个元素前面所有的同辈元素，直到遇到和第一个参数匹配的元素为止（不包含匹配元素）。

第一个参数可以是 CSS 选择器、DOM 元素、JQ 对象。

可以传入第二个参数，必须是 CSS 选择器，表示仅返回和该参数匹配的元素。

8
1
// 获取 .box 元素前面所有的同辈元素
2
$('.box').prevUntil();
3

4
// 获取 .box 元素前所有的同辈元素，直到遇到 .until 元素为止
5
$('.box').prevUntil('.until');
6

7
// 获取 .box 元素前面同辈的 div 元素，直到遇到 .until 元素为止
8
$('.box').prevUntil('.until', 'div');

.next()

获取当前集合中所有元素的后一个同辈元素组成的集合。

可以传入一个 CSS 选择器作为参数，仅获取和该参数匹配的同辈元素的集合。

5
1
// 获取 .box 元素的后一个元素的集合
2
$('.box').next();
3

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

.nextAll()

获取当前集合中所有元素的后面的所有同辈元素组成的集合。

可以传入一个 CSS 选择器作为参数，仅获取和该参数匹配的同辈元素的集合。

5
1
// 获取 .box 元素后面的所有同辈元素
2
$('.box').nextAll();
3

4
// 获取 .box 元素后面的所有含 .selected 的同辈元素
5
$('.box').nextAll('.selected');

.nextUntil()

获取当前集合中，每个元素后面所有的同辈元素，直到遇到和第一个参数匹配的元素为止（不包含匹配元素）。

第一个参数可以是 CSS 选择器、DOM 元素、JQ 对象。

可以传入第二个参数，必须是 CSS 选择器，表示仅返回和该参数匹配的元素。

8
1
// 获取 .box 元素后面所有的同辈元素
2
$('.box').nextUntil();
3

4
// 获取 .box 元素后所有的同辈元素，直到遇到 .until 元素为止
5
$('.box').nextUntil('.until');
6

7
// 获取 .box 元素后面同辈的 div 元素，直到遇到 .until 元素为止
8
$('.box').nextUntil('.until', 'div');

.closest()

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

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

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

.siblings()

获取当前集合中，每个元素的兄弟元素。

可以传入一个 CSS 选择器作为参数，仅获取和该参数匹配的兄弟元素。

5
1
// 获取 .box 元素的所有兄弟元素
2
$('.box').siblings();
3

4
// 获取 .box 元素的所有兄弟元素中含 .selected 的元素
5
$('.box').siblings('.selected');

.add()

添加元素到当前集合中。

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

2
1
// 把含 .selected 的元素添加到当前集合中中
2
$('.box').add('.selected');

节点操作

.empty()

移除当前元素中所有的子元素。

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

.remove()

从 DOM 中移除当前集合中的元素。

可以传入一个 CSS 选择器作为参数，仅移除与该参数匹配的元素。

5
1
// 移除所有 p 元素
2
$('p').remove();
3

4
// 移除所有含 .box 的 p 元素
5
$('p').remove('.box');

.prepend()

在当前集合的元素内部的前面插入指定内容。

参数类型可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。支持传入多个参数。

也可以传入一个返回 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象的回调函数，函数的第一个参数是当前元素的索引位置，第二个参数是元素的原始 HTML，函数中的 this 指向当前元素。

该方法返回原始集合。

13
1
// 插入一个元素
2
$('<p>I would like to say: </p>').prepend('<b>Hello</b>');
3
// 结果：<p><b>Hello</b>I would like to say: </p>
4

5
// 插入多个元素
6
$('<p>I would like to say: </p>').prepend('<b>Hello</b>', '<b>World</b>');
7
// 结果：<p><b>Hello</b><b>World</b>I would like to say: </p>
8

9
// 通过回调函数插入一个元素
10
$('<p>Hello</p>').append(function (index, oldHTML) {
11
  return '<b>' + oldHTML + index + '</b>';
12
});
13
// 结果：<p><b>Hello0</b>Hello</p>

.prependTo()

把当前集合中的元素追加到指定元素内部的前面。

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

该方法返回原始集合。

3
1
$('<p>Hello</p>').prependTo('<p>I would like to say: </p>');
2

3
// 结果：[ <p><p>Hello</p>I would like to say: </p> ]

.append()

在当前集合的元素内部的后面插入指定内容。

参数类型可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。支持传入多个参数。

也可以传入一个返回 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象的回调函数，函数的第一个参数是当前元素的索引位置，第二个参数是元素的原始 HTML，函数中的 this 指向当前元素。

该方法返回原始集合。

13
1
// 插入一个元素
2
$('<p>I would like to say: </p>').append('<b>Hello</b>');
3
// 结果：<p>I would like to say: <b>Hello</b></p>
4

5
// 插入多个元素
6
$('<p>I would like to say: </p>').append('<b>Hello</b>', '<b>World</b>');
7
// 结果：<p>I would like to say: <b>Hello</b><b>World</b></p>
8

9
// 通过回调函数插入一个元素
10
$('<p>Hello</p>').append(function (index, oldHTML) {
11
  return '<b>' + oldHTML + index + '</b>';
12
});
13
// 结果：<p>Hello<b>Hello0</b></p>

.appendTo()

把当前集合中的元素追加到指定元素内部的后面。

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

该方法返回原始集合。

2
1
$('<p>Hello</p>').appendTo('<p>I would like to say: </p>')
2
// 结果：<p>I would like to say: <p>Hello</p></p>

.after()

在当前集合的元素后面插入指定内容，作为其兄弟节点。

参数类型可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。支持传入多个参数。

也可以传入一个返回 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象的回调函数，函数的第一个参数为当前元素的索引位置，第二个参数为元素的原始 HTML，函数中的 this 指向当前元素。

该方法返回原始集合。

13
1
// 插入一个元素
2
$('<p>I would like to say: </p>').after('<b>Hello</b>')
3
// 结果：<p>I would like to say: </p><b>Hello</b>
4

5
// 插入多个元素
6
$('<p>I would like to say: </p>').after('<b>Hello</b>', '<b>World</b>')
7
// 结果：<p>I would like to say: </p><b>Hello</b><b>World</b>
8

9
// 通过回调函数插入一个元素
10
$('<p>Hello</p>').after(function (index, oldHTML) {
11
  return '<b>' + oldHTML + index + '</b>';
12
});
13
// 结果：<p>Hello</p><b>Hello0</b>

.insertAfter()

把当前集合中的元素插入到目标元素的后面，作为其兄弟元素。

如果当前集合中的元素是页面中已有的元素，则将移动该元素，而不是复制。如果有多个目标，则将克隆当前集合中的元素，并添加到每个目标元素的后面。

可以传入一个 HTML 字符串、CSS 选择器、DOM 元素、DOM 元素数组、JQ 对象作为参数，来指定目标元素。

2
1
$('<b>Hello</b>').insertAfter('<p>I would like to say: </p>');
2
// 结果：<p>I would like to say: </p><b>Hello</b>

.before()

在当前集合的元素前面插入指定内容，作为其兄弟节点。

参数类型可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。支持传入多个参数。

也可以传入一个返回 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象的回调函数，函数的第一个参数为当前元素的索引位置，第二个参数为元素的原始 HTML，函数中的 this 指向当前元素。

该方法返回原始集合。

13
1
// 插入一个元素
2
$('<p>I would like to say: </p>').before('<b>Hello</b>')
3
// 结果：<b>Hello</b><p>I would like to say: </p>
4

5
// 插入多个元素
6
$('<p>I would like to say: </p>').before('<b>Hello</b>', '<b>World</b>')
7
// 结果：<b>Hello</b><b>World</b><p>I would like to say: </p>
8

9
// 通过回调函数插入一个元素
10
$('<p>Hello</p>').before(function (index, oldHTML) {
11
  return '<b>' + oldHTML + index + '</b>';
12
});
13
// 结果：<b>Hello0</b><p>Hello</p>

.insertBefore()

把当前集合中的元素插入到目标元素的前面，作为其兄弟元素。

如果当前集合中的元素是页面中已有的元素，则将移动该元素，而不是复制。如果有多个目标，则将克隆当前集合中的元素，并添加到每个目标元素的后面。

可以传入一个 HTML 字符串、CSS 选择器、DOM 元素、DOM 元素数组、JQ 对象作为参数，来指定目标元素。

2
1
$('<p>I would like to say: </p>').insertBefore('<b>Hello</b>');
2
// 结果：<p>I would like to say: </p><b>Hello</b>

.replaceWith()

用指定元素来替换当前集合中的元素。

参数可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。

也可以传入一个返回 HTML 字符串、DOM 元素、DOM元素数组、JQ 对象的回调函数，函数的第一个参数为当前元素的索引位置，第二个参数为元素的原始 HTML，函数中的 this 指向当前元素。

该方法返回原始集合，即被替换掉的集合。

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

4
// 用回调函数的返回值替换所有 .box 元素
5
$('.box').replaceWith(function (index, oldHTML) {
6
  return oldHTML + index;
7
});

.replaceAll()

用当前集合中的元素替换指定元素。

参数为 CSS 选择器、DOM 元素、DOM 元素数组、JQ 对象。

该方法返回原始集合，即用于替换的元素的集合。

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

.clone()

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

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

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

表单

.serializeArray()

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

该方法可对单独表单元素进行操作，也可以对整个 <form> 表单进行操作

6
1
$('form').serializeArray();
2
// [
3
//   { "name": "golang", "value":"456" },
4
//   { "name": "name", "value": "mdui" },
5
//   { "name": "password", "value": "" }
6
// ]

.serialize()

将表单元素的值序列化。

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