JavaScript 工具函式庫

該方法有多種用法：

可以傳入一個 CSS 選取器作為參數，回傳包含符合元素的 JQ 物件。該方法是透過 querySelectorAll 實作的。

$('.box')

可以傳入 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()

將物件或陣列序列化，回傳一個可用於 URL 參數的字串。

$.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

若傳入參數是一個陣列，則該陣列格式必須與 .serializeArray() 的回傳格式一致：

$.param([
  { "name": "name", "value": "mdui" },
  { "name": "password", "value": "123456" }
])
// name=mdui&password=123456

遍歷陣列或物件。回傳值為第一個參數，即被遍歷的陣列或物件。

函式的第一個參數為陣列的索引位置、或物件的鍵；第二個參數為陣列或物件對應位置的值。

回呼函式中的 this 指向陣列或物件對應位置的值。若回呼函式回傳 false，則停止遍歷。

// 遍歷一個陣列
$.each(['a', 'b', 'c'], function (index, value) {
  console.log(index + ':' + value);
})

// 結果：
// 0:a
// 1:b
// 2:c

// 遍歷一個物件
$.each({'name': 'mdui', 'lang': 'zh'}, function (key, value) {
  console.log(key + ':' + 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']

過濾掉陣列中的重複元素。

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

遍歷陣列或物件，回傳由函式的回傳值組成的新陣列。

函式的第一個參數為陣列或物件對應位置的值，第二個參數為陣列的索引位置、或物件的鍵。

函式可以回傳任何值，若函式回傳的是陣列，則會被展開；若回傳的是 null 或 undefined，則會被忽略。函式內部的 this 指向 window 物件。

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

// 回呼函式回傳陣列時，會被展開
var result = $.map([1, 2, 3], function (value, index) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

// 遍歷物件
var result = $.map({ name: 'mdui', password: '123456' }, function (value, key) {
  return key + ':' + value;
});
console.log(result); // ['name:mdui', 'password:123456']

判斷父節點是否包含子節點，回傳布林值。

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

如果集合中至少有一個元素和參數符合，則回傳 true，否則回傳 false。

參數可以是 CSS 選取器、DOM 元素、DOM 元素陣列、JQ 物件、或回呼函式。

參數為回呼函式時，函式的第一個參數為索引位置，第二個參數為目前元素，this 指向目前元素。若函式回傳 true，表示符合；若回傳 false，表示不符合。

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

// 透過回呼函式的回傳值做判斷
$(document).is(function (index, element) {
  return element === document;
});
// true

回傳目前集合中元素的數量。

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

遍歷目前集合，為集合中每一個元素執行一個函式。如果函式回傳 false，則結束遍歷。

函式的第一個參數為元素的索引位置，第二個參數為目前元素。函式中的 this 指向目前元素。

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

遍歷目前集合，為集合中的每個元素執行一個函式，回傳由函式回傳值組成的新集合。若函式回傳 null 或 undefined 則會被過濾。

函式的第一個參數為元素的索引位置，第二個參數為目前元素。函式的 this 指向目前元素。

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

// result 為符合元素的值組成的 JQ 物件

回傳僅包含指定索引位置的元素的集合。

$('div').eq(0); // 回傳僅包含第一個元素的 JQ 物件
$('div').eq(-1); // 回傳僅包含最後一個元素的 JQ 物件
$('div').eq(-2); // 回傳僅包含倒數第二個元素的 JQ 物件

回傳僅包含第一個元素的集合。

$('div').first(); // 回傳僅包含第一個 div 的 JQ 物件

回傳僅包含最後一個元素的集合。

$('div').last(); // 回傳僅包含最後一個 div 的 JQ 物件

回傳指定索引位置的元素。若未傳入參數，則回傳集合中所有元素組成的陣列。

$('div').get(); // 回傳所有 div 元素組成的陣列
$('div').get(0); // 回傳第一個 div 元素
$('div').get(-1); // 回傳最後一個 div 元素

如果沒有傳入參數，則回傳集合中第一個元素相對於同輩元素的索引位置。

如果傳入了一個 CSS 選取器作為參數，則回傳集合中第一個元素相對於 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

回傳當前集合的子集。

第一個參數為子集的起始位置，第二個參數為子集的結束位置；若未傳入第二個參數，表示包含從起始位置到結尾的所有元素。

// 回傳集合中第三個（包含第三個）之後的所有元素
$('div').slice(3);

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

從當前集合中篩選出與指定運算式符合的元素。參數可以是 CSS 選取器、DOM 元素、DOM 元素陣列、回呼函式。

參數為函式時，函式的第一個參數為索引位置，第二個參數為當前元素，函式中的 this 指向當前元素。函式回傳 true 時，當前元素會被保留，回傳 false 時，當前元素會被移除。

// 篩選出所有含 .box 的 div 元素
$('div').filter('.box');

// 篩選出所有已選取選項
$('#select option').filter(function (index, element) {
  return element.selected;
});

從當前集合中篩選出與指定運算式不符合的元素。參數可以是 CSS 選取器、DOM 元素、DOM 元素陣列、回呼函式。

參數為函式時，函式的第一個參數為索引位置，第二個參數為當前元素，函式中的 this 指向當前元素。函式回傳 true 時，當前元素會被移除，回傳 false 時，當前元素會被保留。

// 篩選出所有不含 .box 類別的 div 元素
$('div').not('.box');

// 篩選出所有未選取選項
$('#select option').not(function (index, element) {
  return element.selected;
});

判斷集合中的第一個元素是否含有指定 CSS 類別。

// 判斷第一個 div 元素是否含有 .item
$('div').hasClass('item')

為集合中的每個元素新增 CSS 類別，多個類別名稱之間可以用空格分隔。

也可以傳入一個回傳 CSS 類別名稱的回呼函式。函式的第一個參數為索引位置，第二個參數為該元素上原有的 CSS 類別名稱，函式中的 this 指向當前元素。

// 為所有 div 元素新增 .item
$('div').addClass('item')

// 為所有 div 元素新增 .item1 和 .item2
$('div').addClass('item1 item2')

// 為所有 div 元素新增由回呼函式回傳的 CSS 類別
$('div').addClass(function (index, currentClassName) {
  return currentClassName + '-' + index;
})

移除集合中的元素上的 CSS 類別，多個類別名稱之間可以用空格分隔。

也可以傳入一個回傳 CSS 類別名稱的回呼函式。函式的第一個參數為索引位置，第二個參數為該元素上原有的 CSS 類別名稱，函式中的 this 指向當前元素。

若沒有傳入參數，則將直接移除元素上的 class 屬性。

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

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

// 移除所有 div 元素上的由回呼函式回傳的 CSS 類別
$('div').removeClass(function (index, currentClassName) {
  return 'item';
})

// 直接移除 class 屬性
$('div').removeClass()

元素上的 CSS 類別，有則刪除，無則添加。多個類別名稱之間可以用空格分隔。

也可以傳入一個傳回 CSS 類別名稱的回呼函式。函式的第一個參數為索引位置，第二個參數為該元素上原有的 CSS 類別名稱，函式中的 this 指向目前元素。

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

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

// 切換所有 div 元素上的由回呼函式傳回的 CSS 類別
$('div').toggleClass(function (index, currentClassName) {
  return 'item';
})

取得集合中第一個元素的屬性值。

// 取得第一個元素的屬性值
$('input').prop('checked');

也可以是設定集合中所有元素的屬性值。

設定的屬性值可以是回呼函式的傳回值。回呼函式的第一個參數為元素的索引位置，第二個參數為該元素上原有的屬性值，函式內的 this 指向目前元素。

若屬性值或回呼函式的傳回值為 void 或 undefined，則不會修改原有屬性。

也可以透過傳入物件來同時設定多個屬性。

// 設定所有選取元素的屬性值
$('input').prop('checked', true);

// 透過回呼函式的傳回值設定屬性值
$('input').prop('checked', function (index, oldPropValue) {
  return true;
});

// 同時設定元素的多個屬性值
$('input').prop({
  checked: false,
  disabled: function (index, oldPropValue) {
    return true;
  }
});

刪除集合中所有元素上指定的屬性值。

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

取得集合中第一個元素的屬性值。

// 取得第一個元素的屬性值
$('div').attr('username');

也可以是設定集合中所有元素的屬性值。

設定的屬性值可以是回呼函式的傳回值。回呼函式的第一個參數為元素的索引位置，第二個參數為該元素上原有的屬性值，函式內的 this 指向目前元素。

若屬性值或回呼函式的傳回值為 void 或 undefined，則不會修改原有屬性。若屬性值或回呼函式的傳回值為 null，則刪除指定屬性。

也可以透過傳入物件來同時設定多個屬性。

// 設定所有選取元素的屬性值
$('div').attr('username', 'mdui');

// 透過回呼函式的傳回值設定屬性值
$('div').attr('username', function (index, oldAttrValue) {
  return 'mdui';
});

// 同時設定元素的多個屬性值
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  }
});

刪除集合中所有元素上指定的屬性值，多個屬性名稱之間可以用空格分隔。

// 刪除集合中所有元素上的一個屬性
$('div').removeAttr('username');

// 刪除集合中所有元素上的多個屬性
$('div').removeAttr('username lastname');

取得集合中第一個元素的值。

若元素是 <select multiple="multiple">，則將傳回一個包含每個選擇項的陣列。

// 取得選取的第一個元素的值
$('#input').val();

也可以是設定集合中所有元素的值。

設定的值可以是字串、數值、字串陣列、回呼函式。

若值為回呼函式，第一個參數為元素的索引位置，第二個參數為元素的原有的值，函式中的 this 指向目前元素。

若元素為 <input type="checkbox">、<input type="radio">、<option>，則元素值、或函式傳回值可以為陣列，此時將選取值在陣列中的元素，並取消值不在陣列中的元素。

若值、或函式傳回值為 undefined，則會將元素值設為空。

// 設定選取元素的值
$('#input').val('input value');

// 透過回呼函式的傳回值設定元素值
$('#input').val(function (index, oldValue) {
  return 'new value';
});

取得集合中所有元素的文字內容（包含它們的後代元素）

// 取得所有 .box 元素的文字
$('.box').text();

也可以是設定集合中所有元素的文字。

設定的值可以是字串、數值、布林值、回呼函式。

若為回呼函式，第一個參數為元素的索引位置，第二個參數為元素原有的文字內容，函式內的 this 指向目前元素。

若設定的值、或回呼函式傳回值為 undefined，則不修改對應元素的文字。

// 設定選取元素的文字內容
$('.box').text('text content');

// 透過回呼函式的傳回值設定元素的文字內容
$('.box').text(function (index, oldTextContent) {
  return 'new text content';
});

取得集合中第一個元素的 HTML 內容。

// 取得第一個 .box 元素的 HTML 內容
$('.box').html();

也可以是設定集合中所有元素的 HTML 內容。

設定的值可以是 HTML 字串、DOM 元素、回呼函式。

若為回呼函式，第一個參數為元素的索引位置，第二個參數為元素原有的 HTML 內容，函式內的 this 指向目前元素。

若設定的值、或函式傳回值為 undefined，則不修改對應元素的 HTML。

// 設定選取元素的 HTML
$('.box').html('<div>new html content</div>');

// 透過回呼函式的傳回值設定元素的 HTML 內容
$('.box').html(function (index, oldHTMLContent) {
  return '<div>new html content</div>';
});

在指定元素上讀取或儲存資料。

儲存資料時，若值為 undefined，則相當於讀取元素上對應的資料。即 $.data(element, 'key', undefined) 和 $.data(element, 'key') 等效。

注意：該方法不會檢索元素上的 data-* 屬性。

// 在指定元素上儲存資料，傳回儲存的值
$.data(document.body, 'layout', 'dark'); // 傳回 dark

// 在指定元素上同時儲存多個資料
$.data(document.body, {
  primary: 'indigo',
  accent: 'pink',
});

// 取得在指定元素上儲存的資料
$.data(document.body, 'layout'); // 傳回 dark

// 取得在指定元素上儲存的所有資料
$.data(document.body); // 傳回 { layout: 'dark', primary: 'indigo', accent: 'pink' }

移除指定元素上儲存的資料。

多個鍵名可以用空格分隔，也可以用陣列表示多個鍵名。未指定鍵名時，將移除元素上的所有資料。

// 移除元素上鍵名為 name 的資料
$.removeData(document.body, 'name');

// 移除元素上鍵名為 name1 和 name2 的資料。下面兩種方法等效：
$.removeData(document.body, 'name1 name2');
$.removeData(document.body, ['name1', 'name2']);

// 移除元素上儲存的所有資料
$.removeData(document.body);

在目前集合的元素上讀取或儲存資料。

儲存資料時，若值為 undefined，則不進行儲存。

注意：該方法檢索的資料會包含元素上的 data-* 屬性。

// 在目前集合中的元素上儲存資料
$('.box').data('layout', 'dark');

// 在目前集合中的元素上同時儲存多個資料
$('.box').data({
  primary: 'indigo',
  accent: 'pink',
});

// 取得目前集合中第一個元素上儲存的指定資料
$('.box').data('layout'); // 傳回 dark

// 取得在目前集合中第一個元素上儲存的所有資料
$('.box').data(); // 傳回 { layout: 'dark', primary: 'indigo', accent: 'pink' }

移除目前集合的元素上儲存的資料。

多個鍵名可以用空格分隔，也可以用陣列表示多個鍵名。未指定鍵名時，將移除元素上的所有資料。

注意：該方法只會移除透過 .data() 方法設定的資料，不會移除 data-* 屬性上的資料。

// 移除鍵名為 name 的資料
$('.box').removeData('name');

// 移除鍵名為 name1 和 name2 的資料。下面兩種方法等效：
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

// 移除元素上儲存的所有資料
$('.box').removeData();

取得集合中第一個元素的 CSS 屬性值。

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

也可以設定集合中所有元素的 CSS 屬性值。

屬性值可以是字串、數值、或一個傳回字串或數值的回呼函式。

若屬性值是回呼函式，第一個參數為元素的索引位置，第二個參數為元素原有的 CSS 屬性值，函式中的 this 指向目前元素。

若屬性值或回呼函式傳回 void、undefined、null，則不對目前元素的 CSS 屬性值進行修改。

若屬性值或回呼函式傳回數值，則會添加 px 作為單位。若該屬性無法使用 px 作為單位，則會直接把該值轉為字串。

也可以透過傳入一個鍵值對物件，來同時設定多個 CSS 屬性。

// 設定集合中所有元素的樣式值
$('.box').css('color', 'red')

// 透過回呼函式的傳回值設定所有元素的樣式值
$('.box').css('color', function (index, oldCSSValue) {
  return 'green';
});

// 透過傳入一個物件同時設定多個樣式
$('.box').css({
  'background-color': 'white',
  color: function (index, oldCSSValue) {
    return 'blue';
  },
});

取得集合中第一個元素的寬度（像素值），不包含 padding、border、margin 的寬度。

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

也可以設定集合中所有元素的寬度（不包含 padding、border、margin 的寬度）。

值可以是帶單位的字串、數值、或傳回帶單位的字串或數值的回呼函式。

回呼函式的第一個參數為元素的索引位置，第二個參數為元素原有的寬度值，函式中的 this 指向目前元素。

若值、或回呼函式的傳回值為數值，則會自動添加 px 作為單位。

若值、或回呼函式的傳回值為 null 或 undefined，則不修改元素的寬度。

// 設定集合中所有元素的寬度
$('.box').width('20%');

// 值為數值時，預設單位為 px
$('.box').width(10);

// 透過回呼函式的傳回值設定寬度
$('.box').width(function (index, oldWidth) {
  return 10;
});

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

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

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

值可以是帶單位的字串、數值、或傳回帶單位的字串或數值的回呼函式。

回呼函式的第一個參數為元素的索引位置，第二個參數為元素原有的高度值，函式中的 this 指向目前元素。

若值、或回呼函式的傳回值為數值，則會自動添加 px 作為單位。

若值、或回呼函式的傳回值為 null 或 undefined，則不修改元素的高度。

// 設定集合中所有元素的高度
$('.box').height('20%');

// 值為數值時，預設單位為 px
$('.box').height(10);

// 透過回呼函式的傳回值設定高度
$('.box').height(function (index, oldHeight) {
  return 10;
});

取得集合中第一個元素的寬度（像素值），包含 padding，不包含 border、margin 的寬度。

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

也可以設定集合中所有元素的寬度（包含 padding，不包含 border、margin 的寬度）。

值可以是帶單位的字串、數值、或傳回帶單位的字串或數值的回呼函式。

回呼函式的第一個參數為元素的索引位置，第二個參數為元素原有的寬度值，函式中的 this 指向目前元素。

若值、或回呼函式的傳回值為數值，則會自動添加 px 作為單位。

若值、或回呼函式的傳回值為 null 或 undefined，則不修改元素的寬度。

// 設定集合中所有元素的寬度
$('.box').innerWidth('20%');

// 值為數值時，預設單位為 px
$('.box').innerWidth(10);

// 透過回呼函式的傳回值設定寬度
$('.box').innerWidth(function (index, oldWidth) {
  return 10;
});

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

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

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

值可以是帶單位的字串、數值、或傳回帶單位的字串或數值的回呼函式。

回呼函式的第一個參數為元素的索引位置，第二個參數為元素原有的高度值，函式中的 this 指向目前元素。

若值、或回呼函式的傳回值為數值，則會自動添加 px 作為單位。

若值、或回呼函式的傳回值為 null 或 undefined，則不修改元素的高度。

// 設定集合中所有元素的高度
$('.box').innerHeight('20%');

// 值為數值時，預設單位為 px
$('.box').innerHeight(10);

// 透過回呼函式的傳回值設定高度
$('.box').innerHeight(function (index, oldHeight) {
  return 10;
});

取得集合中第一個元素的寬度（像素值），包含 padding、border的寬度，不包含 margin 的寬度，可以傳入參數 true，使寬度包含 margin 的寬度。

// 包含 padding、border 的寬度
$('.box').outerWidth();

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

也可以設定集合中所有元素的寬度（包含 padding、border，不包含 margin 的寬度，可以在第二個參數中傳入 true，使寬度包含 margin 的寬度）。

第一個參數可以是帶單位的字串、數值、或傳回帶單位的字串或數值的回呼函式。

回呼函式的第一個參數為元素的索引位置，第二個參數為元素的原有寬度，函式中的 this 指向目前元素。

若值、或回呼函式的傳回值為數值，則會自動添加 px 作為單位。

若值、或回呼函式的傳回值為 null 或 undefined，則不修改元素的寬度。

// 設定集合中所有元素的寬度
$('.box').outerWidth('20%');

// 值為數值時，預設單位為 px
$('.box').outerWidth(10);

// 第二個參數為 true，則寬度將包含 margin
$('.box').outerWidth(10, true);

// 透過回呼函式的傳回值設定寬度
$('.box').outerWidth(function (index, oldWidth) {
  return 10;
});

取得集合中第一個元素的高度（像素值），包含 padding、border的高度，不包含 margin 的高度，可以傳入參數 true，使高度包含 margin 的高度。

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

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

也可以設定集合中所有元素的高度（包含 padding、border，不包含 margin 的高度，可以在第二個參數中傳入 true，使高度包含 margin 的高度）。

第一個參數可以是帶單位的字串、數值、或傳回帶單位的字串或數值的回呼函式。

回呼函式的第一個參數為元素的索引位置，第二個參數為元素的原有高度，函式中的 this 指向目前元素。

若值、或回呼函式的傳回值為數值，則會自動添加 px 作為單位。

若值、或回呼函式的傳回值為 null 或 undefined，則不修改元素的高度。

// 設定集合中所有元素的高度
$('.box').outerHeight('20%');

// 值為數值時，預設單位為 px
$('.box').outerHeight(10);

// 第二個參數為 true，則高度將包含 margin
$('.box').outerHeight(10, true);

// 透過回呼函式的傳回值設定高度
$('.box').outerHeight(function (index, oldWidth) {
  return 10;
});

隱藏集合中的所有元素。

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

顯示集合中的所有元素。

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

切換集合中所有元素的顯示狀態。

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

取得集合中第一個元素相對於 document 的座標。

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

也可以設定集合中所有元素相對於 document 的座標。

參數為一個包含 top 和 left 屬性的物件，或一個傳回此格式物件的回呼函式。

若參數是回呼函式，第一個參數為元素的索引位置，第二個參數為元素的原有座標，函式中的 this 指向目前元素。

若參數中 top 或 left 的值為 undefined，則不修改對應的值。

// 設定集合中所有元素的座標
$('.box').offset({ top: 20, left: 30 });

// 透過回呼函式的傳回值設定元素的座標
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});

傳回集合中第一個元素的用於定位的父元素。即父元素中第一個 position 為 relative 或 absolute 的元素。

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

取得集合中第一個元素相對於父元素的偏移。

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

在目前集合的所有元素中，根據 CSS 選取器找到指定的後代節點的集合。

// 找到 #box 的後代節點中，包含 .box 的節點集合
$('#box').find('.box')

在目前集合的所有元素中，取得直接子元素組成的集合。

可以傳入一個 CSS 選取器作為參數，對子元素進行過濾。

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

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

在目前集合的所有元素中，篩選出含有指定子元素的元素。

參數可以是 CSS 選取器或 DOM 元素。

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

取得目前集合中，所有元素的直接父元素的集合。

可以傳入一個 CSS 選取器作為參數，僅傳回與該參數匹配的父元素的集合。

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

// 傳回 .box 元素的直接父元素中含有 .parent 類別的元素
$('.box').parent('.parent');

取得目前集合中，所有元素的祖先元素的集合。

可以傳入一個 CSS 選取器作為參數，僅傳回與該參數匹配的祖先元素的集合。

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

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

取得目前集合中，每個元素的所有父輩元素，直到遇到和第一個參數匹配的元素為止（不包含匹配元素）。

第一個參數可以是 CSS 選取器、DOM 元素、JQ 物件。

可以傳入第二個參數，必須是 CSS 選取器，表示僅傳回和該參數匹配的元素。

若沒有指定參數，則所有的祖先元素都將被匹配，即和 .parents() 效果一樣。

// 取得 .item 元素的所有祖先元素
$('.item').parentsUntil();

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

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

取得目前集合中所有元素的前一個同級元素組成的集合。

可以傳入一個 CSS 選取器作為參數，僅取得和該參數匹配的同級元素的集合。

// 取得 .box 元素的前一個元素的集合
$('.box').prev();

// 取得 .box 元素的前一個 div 元素的集合
$('.box').prev('div');

取得目前集合中所有元素的前面的所有同級元素組成的集合。

可以傳入一個 CSS 選取器作為參數，僅取得和該參數匹配的同級元素的集合。

// 取得 .box 元素前面的所有同級元素
$('.box').prevAll();

// 取得 .box 元素前面的所有含 .selected 的同級元素
$('.box').prevAll('.selected');

取得目前集合中，每個元素前面所有的同級元素，直到遇到和第一個參數匹配的元素為止（不包含匹配元素）。

第一個參數可以是 CSS 選取器、DOM 元素、JQ 物件。

可以傳入第二個參數，必須是 CSS 選取器，表示僅傳回和該參數匹配的元素。

// 取得 .box 元素前面所有的同級元素
$('.box').prevUntil();

// 取得 .box 元素前所有的同級元素，直到遇到 .until 元素為止
$('.box').prevUntil('.until');

// 取得 .box 元素前面同級的 div 元素，直到遇到 .until 元素為止
$('.box').prevUntil('.until', 'div');

取得目前集合中所有元素的後一個同級元素組成的集合。

可以傳入一個 CSS 選取器作為參數，僅取得和該參數匹配的同級元素的集合。

// 取得 .box 元素的後一個元素的集合
$('.box').next();

// 取得 .box 元素的後一個 div 元素的集合
$('.box').next('div');

取得目前集合中所有元素的後面的所有同級元素組成的集合。

可以傳入一個 CSS 選取器作為參數，僅取得和該參數匹配的同級元素的集合。

// 取得 .box 元素後面的所有同級元素
$('.box').nextAll();

// 取得 .box 元素後面的所有含 .selected 的同級元素
$('.box').nextAll('.selected');

取得目前集合中，每個元素後面所有的同級元素，直到遇到和第一個參數匹配的元素為止（不包含匹配元素）。

第一個參數可以是 CSS 選取器、DOM 元素、JQ 物件。

可以傳入第二個參數，必須是 CSS 選取器，表示僅傳回和該參數匹配的元素。

// 取得 .box 元素後面所有的同級元素
$('.box').nextUntil();

// 取得 .box 元素後所有的同級元素，直到遇到 .until 元素為止
$('.box').nextUntil('.until');

// 取得 .box 元素後面同級的 div 元素，直到遇到 .until 元素為止
$('.box').nextUntil('.until', 'div');

從目前元素向上逐級匹配，傳回最先匹配到的元素。

參數可以是 CSS 選取器、DOM 元素、JQ 物件。

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

取得目前集合中，每個元素的兄弟元素。

可以傳入一個 CSS 選取器作為參數，僅取得和該參數匹配的兄弟元素。

// 取得 .box 元素的所有兄弟元素
$('.box').siblings();

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

添加元素到目前集合中。

參數可以是 HTML 字串、CSS 選取器、JQ 物件、DOM 元素、DOM 元素陣列、NodeList。

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

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

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

從 DOM 中移除目前集合中的元素。

可以傳入一個 CSS 選取器作為參數，僅移除與該參數匹配的元素。

// 移除所有 p 元素
$('p').remove();

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

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

參數型態可以是 HTML 字串、DOM 元素、DOM 元素陣列、JQ 物件。支援傳入多個參數。

也可以傳入一個傳回 HTML 字串、DOM 元素、DOM 元素陣列、JQ 物件的回呼函式，函式的第一個參數是目前元素的索引位置，第二個參數是元素的原始 HTML，函式中的 this 指向目前元素。

該方法傳回原始集合。

// 插入一個元素
$('<p>I would like to say: </p>').prepend('<b>Hello</b>');
// 結果：<p><b>Hello</b>I would like to say: </p>

// 插入多個元素
$('<p>I would like to say: </p>').prepend('<b>Hello</b>', '<b>World</b>');
// 結果：<p><b>Hello</b><b>World</b>I would like to say: </p>

// 透過回呼函式插入一個元素
$('<p>Hello</p>').prepend(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// 結果：<p><b>Hello0</b>Hello</p>

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

參數可以是 CSS 選取器、HTML 字串、DOM 元素、DOM 元素陣列、JQ 物件。

該方法傳回原始集合。

$('<div>Hello</div>').prependTo('<div>I would like to say: </div>');

// 結果：[ <div><div>Hello</div>I would like to say: </div> ]

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

參數型態可以是 HTML 字串、DOM 元素、DOM 元素陣列、JQ 物件。支援傳入多個參數。

也可以傳入一個傳回 HTML 字串、DOM 元素、DOM 元素陣列、JQ 物件的回呼函式，函式的第一個參數是目前元素的索引位置，第二個參數是元素的原始 HTML，函式中的 this 指向目前元素。

該方法傳回原始集合。

// 插入一個元素
$('<p>I would like to say: </p>').append('<b>Hello</b>');
// 結果：<p>I would like to say: <b>Hello</b></p>

// 插入多個元素
$('<p>I would like to say: </p>').append('<b>Hello</b>', '<b>World</b>');
// 結果：<p>I would like to say: <b>Hello</b><b>World</b></p>

// 透過回呼函式插入一個元素
$('<p>Hello</p>').append(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// 結果：<p>Hello<b>Hello0</b></p>

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

參數可以是 CSS 選取器、HTML 字串、DOM 元素、DOM 元素陣列、JQ 物件。

該方法傳回原始集合。

$('<div>Hello</div>').appendTo('<div>I would like to say: </div>')
// 結果：<div>I would like to say: <div>Hello</div></div>

在目前集合的元素後面插入指定內容，作為其兄弟節點。

參數型態可以是 HTML 字串、DOM 元素、DOM 元素陣列、JQ 物件。支援傳入多個參數。

也可以傳入一個傳回 HTML 字串、DOM 元素、DOM 元素陣列、JQ 物件的回呼函式，函式的第一個參數為目前元素的索引位置，第二個參數為元素的原始 HTML，函式中的 this 指向目前元素。

該方法傳回原始集合。

// 插入一個元素
$('<p>I would like to say: </p>').after('<b>Hello</b>')
// 結果：<p>I would like to say: </p><b>Hello</b>

// 插入多個元素
$('<p>I would like to say: </p>').after('<b>Hello</b>', '<b>World</b>')
// 結果：<p>I would like to say: </p><b>Hello</b><b>World</b>

// 透過回呼函式插入一個元素
$('<p>Hello</p>').after(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// 結果：<p>Hello</p><b>Hello0</b>

把目前集合中的元素插入到目標元素的後面，作為其兄弟元素。

如果目前集合中的元素是頁面中已有的元素，則將移動該元素，而不是複製。如果有多個目標，則將複製目前集合中的元素，並添加到每個目標元素的後面。

可以傳入一個 HTML 字串、CSS 選取器、DOM 元素、DOM 元素陣列、JQ 物件作為參數，來指定目標元素。

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

在目前集合的元素前面插入指定內容，作為其兄弟節點。

參數型態可以是 HTML 字串、DOM 元素、DOM 元素陣列、JQ 物件。支援傳入多個參數。

也可以傳入一個傳回 HTML 字串、DOM 元素、DOM 元素陣列、JQ 物件的回呼函式，函式的第一個參數為目前元素的索引位置，第二個參數為元素的原始 HTML，函式中的 this 指向目前元素。

該方法傳回原始集合。

// 插入一個元素
$('<p>I would like to say: </p>').before('<b>Hello</b>')
// 結果：<b>Hello</b><p>I would like to say: </p>

// 插入多個元素
$('<p>I would like to say: </p>').before('<b>Hello</b>', '<b>World</b>')
// 結果：<b>Hello</b><b>World</b><p>I would like to say: </p>

// 透過回呼函式插入一個元素
$('<p>Hello</p>').before(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// 結果：<b>Hello0</b><p>Hello</p>

把目前集合中的元素插入到目標元素的前面，作為其兄弟元素。

如果目前集合中的元素是頁面中已有的元素，則將移動該元素，而不是複製。如果有多個目標，則將複製目前集合中的元素，並添加到每個目標元素的後面。

可以傳入一個 HTML 字串、CSS 選取器、DOM 元素、DOM 元素陣列、JQ 物件作為參數，來指定目標元素。

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

用指定元素來替換目前集合中的元素。

參數可以是 HTML 字串、DOM 元素、DOM 元素陣列、JQ 物件。

也可以傳入一個傳回 HTML 字串、DOM 元素、DOM 元素陣列、JQ 物件的回呼函式，函式的第一個參數為目前元素的索引位置，第二個參數為元素的原始 HTML，函式中的 this 指向目前元素。

該方法傳回原始集合，即被替換掉的集合。

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

// 用回呼函式的傳回值替換所有 .box 元素
$('.box').replaceWith(function (index, oldHTML) {
  return oldHTML + index;
});

用目前集合中的元素替換指定元素。

參數為 CSS 選取器、DOM 元素、DOM 元素陣列、JQ 物件。

該方法傳回原始集合，即用於替換的元素的集合。

// ${$t().a379}
$('.new').replaceAll('.box');

透過深度複製來複製集合中的所有元素。

透過原生 cloneNode 方法深度複製來複製集合中的所有元素。此方法不會將資料和事件處理常式複製到新的元素。這一點與 jQuery 不同，jQuery 透過參數決定是否複製資料和事件處理常式。

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

把表單元素的值組合成由 name 和 value 的鍵值對組成的陣列。

該方法可對單獨表單元素進行操作，也可以對整個 <form> 表單進行操作

$('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 元素，並為事件處理函式傳入了參數');
  // e._data 為 {key1: 'value1', key2: 'value2'}
});

// 同時繫結多個事件和事件處理函式，並傳入參數
$('.box').on({
  'click': function (e) {
    console.log('觸發了 click 事件');
    // e._data 為 {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('觸發了 focus 事件');
    // e._data 為 {key1: 'value1', key2: 'value2'}
  }
}, { key1: 'value1', key2: 'value2' });

// 透過事件委派繫結事件，並傳入參數
$(document).on('click', '.box', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('點擊了 .box 元素，並為事件處理函式傳入了參數');
  // e._data 為 {key1: 'value1', key2: 'value2'}
});

// 透過事件委派同時繫結多個事件和事件處理函式
$(document).on({
  'click': function (e) {
    console.log('觸發了 click 事件');
  },
  'focus': function (e) {
    console.log('觸發了 focus 事件');
  }
}, '.box');

// 透過事件委派同時繫結多個事件和事件處理函式，並傳入參數
$(document).on({
  'click': function (e) {
    console.log('觸發了 click 事件');
    // e._data 為 {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('觸發了 focus 事件');
    // e._data 為 {key1: 'value1', key2: 'value2'}
  }
}, '.box', { key1: 'value1', key2: 'value2' });

// 取得事件參數
$('.box').on('click', function (e, data) {
  // data 等於 e._detail
});

// 事件名稱支援使用命名空間
$('.box').on('click.myPlugin', function () {
  console.log('點擊了 .box 元素');
});

為每個匹配元素的特定事件繫結事件處理函式。但事件只會觸發一次。

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

為集合中每個元素解除繫結的事件。具體用法見下方範例：

// 解除所有繫結的事件處理函式
$('.box').off();

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

// 同時解除多個繫結的事件
$('.box').off('click focus');

// 解除繫結的指定事件處理函式
$('.box').off('click', callback);

// 解除透過事件委派繫結的事件
$(document).off('click', '.box');

// 解除透過事件委派繫結的指定事件處理函式
$(document).off('click', '.box', callback);

// 同時解除多個事件處理函式
$('.box').off({
  'click': callback1,
  'focus': callback2,
});

// 同時解除多個透過事件委派繫結的事件處理函式
$(document).off({
  'click': callback1,
  'focus': callback2,
}, '.box');

// 事件名稱支援使用命名空間，下面的用法將解除所有以 .myPlugin 結尾的事件
$(document).off('.myPlugin');

觸發指定的事件。具體用法見下方範例：

// 觸發指定的事件
$('.box').trigger('click');

// 觸發事件時傳入參數
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });

為 Ajax 請求設定全域配置參數。

$.ajaxSetup({
  // 預設禁止觸發全域 AJAX 事件
  global: false,

  // 預設使用 POST 請求
  method: 'POST'
});

詳細參數清單見下方的 AJAX 參數。

發送 AJAX 請求，傳回 Promise。

$.ajax({
  method: 'POST',
  url: './test.php',
  data: {
    key1: 'val1',
    key2: 'val2'
  },
  success: function (data) {
    console.log(data);
  }
});

詳細參數清單見下方的 AJAX 參數。

全域 AJAX 事件。

AJAX 請求開始時執行函式。

$(document).ajaxStart(function (event, xhr, options) {
  // xhr: XMLHttpRequest 物件
  // options: AJAX 請求的配置參數
});

全域 AJAX 事件。

AJAX 請求成功時執行函式。

$(document).ajaxSuccess(function (event, xhr, options, data) {
  // xhr: XMLHttpRequest 物件
  // options: AJAX 請求的配置參數
  // data: AJAX 請求傳回的資料
});

全域 AJAX 事件。

AJAX 請求發生錯誤時執行函式。

$(document).ajaxError(function (event, xhr, options) {
  // xhr: XMLHttpRequest 物件
  // options: AJAX 請求的配置參數
});

全域 AJAX 事件。

AJAX 請求完成時執行函式。

$(document).ajaxComplete(function (event, xhr, options) {
  // xhr: XMLHttpRequest 物件
  // options: AJAX 請求的配置參數
});

請求方式。

包括：GET、POST、PUT、PATCH、HEAD、OPTIONS、DELETE

新增到 Headers 中的資料。可以在 beforeSend 回呼函式中重寫該值。

值為字串或 null 的欄位會被發送，值為 undefined 的欄位會被移除。

設定在 XMLHttpRequest 物件上的資料。

$.ajax({
  url: '一個跨域 URL',
  xhrFields: {
    withCredentials: true
  }
});

HTTP 狀態碼和函式組成的物件。

$.ajax({
  statusCode: {
    404: function (xhr, textStatus) {
      alert('傳回狀態碼為 404 時被呼叫');
    },
    200: function (data, textStatus, xhr) {
      alert('傳回狀態碼為 200 時被呼叫');
    }
  }
});

狀態碼在 200 - 299 之間、或狀態碼為 304 時，表示請求成功，函式參數和 success 回呼的參數相同；否則表示請求失敗，函式參數和 error 回呼的參數相同。

伺服器傳回的資料類型。

包括：text、json

在請求發送之前呼叫。傳回 false 時將取消 AJAX 請求。

$.ajax({
  beforeSend: function (xhr) {
    // xhr: XMLHttpRequest 物件
  }
});

請求成功之後呼叫。

$.ajax({
  success: function (data, textStatus, xhr) {
    // data: AJAX 請求傳回的資料
    // textStatus: 包含成功代碼的字串
    // xhr: XMLHttpRequest 物件
  }
});

請求出錯時呼叫。

$.ajax({
  error: function (xhr, textStatus) {
    // xhr: XMLHttpRequest 物件
    // textStatus: 包含成功代碼的字串
  }
});

請求完成之後呼叫。

$.ajax({
  complete: function (xhr, textStatus) {
    // xhr: XMLHttpRequest 物件
    // textStatus: 包含成功代碼的字串
  }
});

強制重繪目前元素。

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

設定目前元素的 transition-duration 屬性。

可以是帶單位的時間值，也可以不帶單位。若不帶單位，則將自動添加 ms 作為單位。

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

在目前元素上添加 transitionend 事件回呼。

回呼函式的參數為 transitionend 事件物件，函式中的 this 指向目前元素。

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

設定目前元素的 transform 屬性。

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

設定目前元素的 transform-origin 屬性。

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

執行在目前元素及其子元素內註冊的初始化函式。

$('[mdui-collapse]').mutation()

建立並顯示遮罩，傳回遮罩層的 JQ 物件。

可以傳入一個整數參數，表示遮罩層的 z-index 樣式，預設為 2000。

$.showOverlay();

隱藏遮罩層。

如果呼叫了多次 $.showOverlay() 來顯示遮罩層，則也需要呼叫相同次數的 $.hideOverlay() 才能隱藏遮罩層。可以透過傳入參數 true 來強制隱藏遮罩層。

$.hideOverlay();

鎖定頁面，禁止頁面捲動。

$.lockScreen();

解除頁面鎖定。

如果呼叫了多次 $.lockScreen() 來鎖定頁面，則也需要呼叫相同次數的 $.unlockScreen() 才能解除頁面鎖定。可以透過傳入參數 true 來強制解除頁面鎖定。

$.unlockScreen();

函式節流。

傳入一個函式作為參數，函式的第一個參數是執行的函式，第二個參數是延遲時間，單位為毫秒。

$.throttle(function () {
  console.log('這個函式最多 100ms 執行一次');
}, 100)

產生一個全域唯一的 ID。

$.guid();

可以傳入一個參數。當該參數值對應的 guid 不存在時，會產生一個新的 guid，並傳回；當該參數對應的 guid 已存在，則直接傳回已有 guid。

// 下面兩行程式碼傳回值相同
$.guid('test');
$.guid('test');