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') })

オブジェクトを1つだけ渡した場合、そのオブジェクトのプロパティが JQ オブジェクトにマージされます。これは JQ の名前空間に新しい機能を追加することに相当します。

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

// これで、カスタムメソッドを次のように呼び出すことができます。
$.customFunc()

2つ以上のオブジェクトを渡した場合、すべてのオブジェクトのプロパティが最初のオブジェクトに追加され、マージされたオブジェクトが返されます。

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

配列またはオブジェクトを反復処理します。戻り値は最初の引数、つまり反復処理された配列またはオブジェクトです。

関数の第1引数は配列のインデックスまたはオブジェクトのキーで、第2引数は配列またはオブジェクトの対応する位置の値です。

コールバック関数内の 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

2番目の配列の要素を最初の配列に追加し、マージされた配列を返します。

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]

配列またはオブジェクトを反復処理し、関数の戻り値で構成される新しい配列を返します。

関数の第1引数は配列またはオブジェクトの対応する位置の値で、第2引数は配列のインデックスまたはオブジェクトのキーです。

関数は任意の値を返すことができます。関数が配列を返した場合は展開され、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

コレクション内に引数と一致する要素が少なくとも1つある場合は true を返し、そうでない場合は false を返します。

引数は、CSS セレクター、DOM 要素、DOM 要素の配列、JQ オブジェクト、またはコールバック関数を指定できます。

引数がコールバック関数の場合、第1引数はインデックス位置、第2引数は現在の要素で、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 を返すと、反復処理を終了します。

関数の第1引数は要素のインデックス位置、第2引数は現在の要素です。関数内の this は現在の要素を指します。

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

現在のコレクションを反復処理し、コレクション内の各要素に対して関数を実行して、関数の戻り値で構成される新しいコレクションを返します。関数が null または undefined を返した場合は、フィルターで除外されます。

関数の第1引数は要素のインデックス位置、第2引数は現在の要素です。関数の 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); // 最後から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

現在のコレクションのサブセットを返します。

第1引数はサブセットの開始位置、第2引数はサブセットの終了位置です。第2引数を渡さない場合は、開始位置から最後までのすべての要素が含まれます。

// コレクション内の3番目（3番目を含む）以降のすべての要素を返します
$('div').slice(3);

// コレクション内の3番目から5番目（3番目を含み、5番目を含まない）の間の要素を返します
$('div').slice(3, 5);

指定された式に一致する要素を現在のコレクションから絞り込みます。引数は、CSS セレクター、DOM 要素、DOM 要素の配列、またはコールバック関数を指定できます。

引数が関数の場合、第1引数はインデックス位置、第2引数は現在の要素で、関数内の this は現在の要素を指します。関数が true を返すと現在の要素は保持され、false を返すと現在の要素は削除されます。

// .box を含むすべての div 要素を絞り込む
$('div').filter('.box');

// 選択されているすべてのオプションを絞り込む
$('#select option').filter(function (index, element) {
  return element.selected;
});

指定された式に一致しない要素を現在のコレクションから絞り込みます。引数は、CSS セレクター、DOM 要素、DOM 要素の配列、またはコールバック関数を指定できます。

引数が関数の場合、第1引数はインデックス位置、第2引数は現在の要素で、関数内の 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 クラス名を返すコールバック関数を渡すこともできます。関数の第1引数はインデックス位置、第2引数はその要素にもともとあった 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 クラス名を返すコールバック関数を渡すこともできます。関数の第1引数はインデックス位置、第2引数はその要素にもともとあった 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 クラス名を返すコールバック関数を渡すこともできます。関数の第1引数はインデックス位置、第2引数はその要素にもともとあった 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');

コレクション内のすべての要素の属性値を設定することもできます。

設定する属性値は、コールバック関数の戻り値にすることができます。コールバック関数の第1引数は要素のインデックス位置、第2引数はその要素にもともとあった属性値で、関数内の 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');

コレクション内のすべての要素のプロパティ値を設定することもできます。

設定するプロパティ値は、コールバック関数の戻り値にすることができます。コールバック関数の第1引数は要素のインデックス位置、第2引数はその要素にもともとあったプロパティ値で、関数内の 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';
  }
});

コレクション内のすべての要素から指定されたプロパティを削除します。複数のプロパティ名はスペースで区切ることができます。

// コレクション内のすべての要素から1つのプロパティを削除する
$('div').removeAttr('username');

// コレクション内のすべての要素から複数のプロパティを削除する
$('div').removeAttr('username lastname');

コレクション内の最初の要素の値を取得します。

要素が <select multiple="multiple"> の場合、各選択項目の配列が返されます。

// 選択された最初の要素の値を取得する
$('#input').val();

コレクション内のすべての要素の値を設定することもできます。

設定する値には、文字列、数値、文字列の配列、コールバック関数を指定できます。

値がコールバック関数の場合、第1引数は要素のインデックス位置、第2引数は要素のもともとの値で、関数内の this は現在の要素を指します。

要素が <input type="checkbox">、<input type="radio">、<option> の場合、要素の値または関数の戻り値を配列にすることができます。その場合、値が配列に含まれている要素が選択され、含まれていない要素の選択は解除されます。

値や関数の戻り値が undefined の場合、要素の値は空に設定されます。

// 選択された要素の値を設定する
$('#input').val('input value');

// コールバック関数の戻り値で要素の値を設定する
$('#input').val(function (index, oldValue) {
  return 'new value';
});

コレクション内のすべての要素（その子孫要素も含む）のテキスト内容を取得します

// すべての .box 要素のテキストを取得する
$('.box').text();

コレクション内のすべての要素のテキストを設定することもできます。

設定する値には、文字列、数値、ブール値、コールバック関数を指定できます。

コールバック関数の場合、第1引数は要素のインデックス位置、第2引数は要素のもともとのテキスト内容で、関数内の this は現在の要素を指します。

設定する値やコールバック関数の戻り値が undefined の場合、対応する要素のテキストは変更されません。

// 選択された要素のテキスト内容を設定する
$('.box').text('text content');

// コールバック関数の戻り値で要素のテキスト内容を設定する
$('.box').text(function (index, oldTextContent) {
  return 'new text content';
});

コレクション内の最初の要素の HTML 内容を取得します。

// 最初の .box 要素の HTML 内容を取得する
$('.box').html();

コレクション内のすべての要素の HTML 内容を設定することもできます。

設定する値には、HTML 文字列、DOM 要素、コールバック関数を指定できます。

コールバック関数の場合、第1引数は要素のインデックス位置、第2引数は要素のもともとの 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 のデータを削除する。以下の2つの方法は同等です：
$.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 のデータを削除する。以下の2つの方法は同等です：
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

// 要素に保存されているすべてのデータを削除する
$('.box').removeData();

コレクション内の最初の要素の CSS プロパティ値を取得します。

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

コレクション内のすべての要素の CSS プロパティ値を設定することもできます。

プロパティ値には、文字列、数値、または文字列や数値を返すコールバック関数を指定できます。

プロパティ値がコールバック関数の場合、第1引数は要素のインデックス位置、第2引数は要素のもともとの 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 の幅を含まない）を設定することもできます。

値には、単位付きの文字列、数値、または単位付きの文字列や数値を返すコールバック関数を指定できます。

コールバック関数の第1引数は要素のインデックス位置、第2引数は要素のもともとの幅の値で、関数内の 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 の高さを含まない）を設定することもできます。

値には、単位付きの文字列、数値、または単位付きの文字列や数値を返すコールバック関数を指定できます。

コールバック関数の第1引数は要素のインデックス位置、第2引数は要素のもともとの高さの値で、関数内の 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 の幅を含まない）を設定することもできます。

値には、単位付きの文字列、数値、または単位付きの文字列や数値を返すコールバック関数を指定できます。

コールバック関数の第1引数は要素のインデックス位置、第2引数は要素のもともとの幅の値で、関数内の 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 の高さを含まない）を設定することもできます。

値には、単位付きの文字列、数値、または単位付きの文字列や数値を返すコールバック関数を指定できます。

コールバック関数の第1引数は要素のインデックス位置、第2引数は要素のもともとの高さの値で、関数内の 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 の幅を含まない）を設定することもできます。第2引数に true を渡すと、幅に margin の幅が含まれるようになります。

第1引数には、単位付きの文字列、数値、または単位付きの文字列や数値を返すコールバック関数を指定できます。

コールバック関数の第1引数は要素のインデックス位置、第2引数は要素のもともとの幅で、関数内の this は現在の要素を指します。

値またはコールバック関数の戻り値が数値の場合、自動的に単位として px が追加されます。

値またはコールバック関数の戻り値が null または undefined の場合、要素の幅は変更されません。

// コレクション内のすべての要素の幅を設定する
$('.box').outerWidth('20%');

// 値が数値の場合、デフォルトの単位は px になります
$('.box').outerWidth(10);

// 第2引数が 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 の高さを含まない）を設定することもできます。第2引数に true を渡すと、高さに margin の高さが含まれるようになります。

第1引数には、単位付きの文字列、数値、または単位付きの文字列や数値を返すコールバック関数を指定できます。

コールバック関数の第1引数は要素のインデックス位置、第2引数は要素のもともとの高さで、関数内の this は現在の要素を指します。

値またはコールバック関数の戻り値が数値の場合、自動的に単位として px が追加されます。

値またはコールバック関数の戻り値が null または undefined の場合、要素の高さは変更されません。

// コレクション内のすべての要素の高さを設定する
$('.box').outerHeight('20%');

// 値が数値の場合、デフォルトの単位は px になります
$('.box').outerHeight(10);

// 第2引数が 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 プロパティを含むオブジェクト、またはこの形式のオブジェクトを返すコールバック関数です。

引数がコールバック関数の場合、第1引数は要素のインデックス位置、第2引数は要素のもともとの座標で、関数内の 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');

現在のコレクション内の各要素について、最初の引数と一致する要素が見つかるまで、すべての親要素を取得します（一致する要素は含まれません）。

第1引数は、CSS セレクター、DOM 要素、JQ オブジェクトを指定できます。

第2引数を渡すこともできます。これは 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');

現在のコレクション内の各要素について、最初の引数と一致する要素が見つかるまで、前にあるすべての兄弟要素を取得します（一致する要素は含まれません）。

第1引数は、CSS セレクター、DOM 要素、JQ オブジェクトを指定できます。

第2引数を渡すこともできます。これは 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');

現在のコレクション内の各要素について、最初の引数と一致する要素が見つかるまで、後ろにあるすべての兄弟要素を取得します（一致する要素は含まれません）。

第1引数は、CSS セレクター、DOM 要素、JQ オブジェクトを指定できます。

第2引数を渡すこともできます。これは 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 オブジェクトを返すコールバック関数を渡すこともできます。第1引数は現在の要素のインデックス位置、第2引数は要素の元の 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 オブジェクトを返すコールバック関数を渡すこともできます。第1引数は現在の要素のインデックス位置、第2引数は要素の元の 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 オブジェクトを返すコールバック関数を渡すこともできます。第1引数は現在の要素のインデックス位置、第2引数は要素の元の 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 オブジェクトを返すコールバック関数を渡すこともできます。第1引数は現在の要素のインデックス位置、第2引数は要素の元の 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 オブジェクトを返すコールバック関数を渡すこともできます。第1引数は現在の要素のインデックス位置、第2引数は要素の元の HTML で、関数内の this は現在の要素を指します。

このメソッドは元のコレクション、つまり置き換えられたコレクションを返します。

// すべての .box 要素を <p>Hello</p> で置き換える
$('.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 とは異なります。

$('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 要素がクリックされました');
});

各一致する要素の特定のイベントにイベント処理関数をバインドします。ただし、イベントは1回しか発生しません。

使い方は .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();

関数のスロットリング。

関数を引数として受け取ります。第1引数は実行する関数、第2引数は遅延時間（ミリ秒）です。

$.throttle(function () {
  console.log('この関数は最大で 100ms に1回実行されます');
}, 100)

グローバルで一意の ID （GUID） を生成します。

$.guid();

引数を1つ渡すことができます。その引数の値に対応する guid が存在しない場合は、新しい guid が生成されて返されます。その引数に対応する guid がすでに存在する場合は、既存の guid をそのまま返します。

// 以下の2行のコードは同じ戻り値を返します
$.guid('test');
$.guid('test');