jq ライブラリ

mdui には軽量な JavaScript ツールライブラリが組み込まれており、jQuery のような API とチェーン呼び出しを提供しますが、サイズは jQuery の 6 分の 1 です。

このツール関数は必要に応じてインポートできます：

import { $ } from 'mdui/jq.js';

コア

$()

この関数には複数の使用方法があります：

CSS セレクターをパラメーターとして渡すと、一致する要素を含む JQ オブジェクトを返します。

$('.box');

DOM 要素、任意の配列、NodeList、または JQ オブジェクトを渡すと、指定された要素を含む JQ オブジェクトを返します。

$(document);

HTML 文字列を渡すと、HTML から作成された DOM を含む JQ オブジェクトを返します。

$(`<div id="wrapper">
  <span id="inner"></span>
</div>`);

関数を渡すと、DOM の読み込みが完了したときにその関数が呼び出されます。

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

拡張

$.extend()

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

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

// その後、このようにカスタムメソッドを呼び出せます
$.customFunc();

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

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

// このとき、最初のオブジェクトと戻り値はどちらも { key1: val1, key2: val2, key3: val3 } になります

$.fn.extend()

$ のプロトタイプチェーンにメソッドを拡張します。

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

// その後、このように拡張したメソッドを使用できます
$(document).customFunc();

URL

$.param()

配列またはオブジェクトを 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

配列とオブジェクトの操作

$.each()

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

コールバック関数の最初のパラメーターは配列のインデックスまたはオブジェクトのキー、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

$.merge()

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

const first = ['a', 'b', 'c'];
const second = ['c', 'd', 'e'];
const result = $.merge(first, second);

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

$.unique()

配列内の重複する要素を削除します。

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

$.map()

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

コールバック関数の最初のパラメーターは配列またはオブジェクトの対応する位置の値、2番目のパラメーターは配列のインデックスまたはオブジェクトのキーです。

コールバック関数は任意の値を返せます。返り値が配列の場合、その配列は展開されます。null または undefined を返した場合、その値は無視されます。コールバック関数内では、this は window オブジェクトを指します。

// 配列を反復処理
const result = $.map(['a', 'b', 'c'], function (value, index) {
  return index + value;
});
console.log(result); // ['0a', '1b', '2c']

// コールバック関数が配列を返す場合、その配列は展開される
const result = $.map([1, 2, 3], function (value, index) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

// オブジェクトを反復処理
const result = $.map(
  { name: 'mdui', password: '123456' },
  function (value, key) {
    return key + ':' + value;
  },
);
console.log(result); // ['name:mdui', 'password:123456']

$.contains()

あるノードが別のノードを含むかどうかを判定します。親ノードが子ノードを含む場合は true、そうでない場合は false を返します。

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

データ型の判定

.is()

コレクション内の少なくとも 1 つの要素がパラメーターと一致するかどうかを判定します。一致する場合は true、そうでない場合は false を返します。

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

パラメーターがコールバック関数の場合、関数の最初のパラメーターはインデックス、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

オブジェクトアクセス

.length

現在のコレクション内の要素の数を返します。

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

.each()

現在のコレクションを反復処理し、コレクション内の各要素に対して関数を実行します。関数が false を返すと、反復処理は停止します。

関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは現在の要素です。関数内では、this は現在の要素を指します。

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

.map()

現在のコレクションを反復処理し、コレクション内の各要素に対して関数を実行し、関数の戻り値で構成される新しいコレクションを返します。

関数は単一のデータまたはデータの配列を返せます。配列を返すと、配列内の要素が新しいコレクションに順次追加されます。関数が null または undefined を返した場合、その値は新しいコレクションに追加されません。

関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは現在の要素です。関数内では、this は現在の要素を指します。

const result = $('input.checked').map(function (i, element) {
  return element.value;
});

// result は、一致する要素の値で構成される JQ オブジェクトです

.eq()

指定されたインデックス位置の要素のみを含む新しいコレクションを返します。

$('div').eq(0); // 最初の要素のみを含むコレクションを返す
$('div').eq(-1); // 最後の要素のみを含むコレクションを返す
$('div').eq(-2); // 最後から2番目の要素のみを含むコレクションを返す

.first()

現在のコレクションの最初の要素のみを含む新しいコレクションを返します。

$('div').first(); // 最初の div のみを含むコレクションを返す

.last()

現在のコレクションの最後の要素のみを含む新しいコレクションを返します。

$('div').last(); // 最後の div のみを含むコレクションを返す

.get()

指定されたインデックス位置の要素を返します。パラメーターを省略した場合は、コレクション内のすべての要素で構成される配列を返します。

$('div').get(); // すべての div 要素で構成される配列を返す
$('div').get(0); // 最初の div 要素を返す
$('div').get(-1); // 最後の div 要素を返す

.index()

パラメーターを省略すると、現在のコレクション内の最初の要素の、同階層の要素に対するインデックス値を返します。

CSS セレクターを渡すと、現在のコレクション内の最初の要素の、CSS セレクターに一致する要素に対するインデックス値を返します。

DOM 要素を渡すと、その要素の現在のコレクション内でのインデックス値を返します。

JQ オブジェクトを渡すと、そのオブジェクトの最初の要素の現在のコレクション内でのインデックス値を返します。

<div id="child">
  <div id="child1"></div>
  <div id="child2"></div>
  <div id="child3"></div>
  <div id="child4"></div>
</div>

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

.slice()

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

2 つのパラメーターを渡してサブセットの開始位置と終了位置（終了位置の要素は含まない）を指定できます。2 番目のパラメーターを省略すると、開始位置からコレクションの末尾までのすべての要素を返します。

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

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

.filter()

現在のコレクションから指定された式に一致する要素を抽出します。パラメーターには CSS セレクター、DOM 要素、DOM 要素の配列、またはコールバック関数を指定できます。

パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは現在の要素です。関数内では、this は現在の要素を指します。関数が true を返すと現在の要素は保持され、false を返すと削除されます。

// .box クラスを持つ div 要素を抽出
$('div').filter('.box');

// 選択されたオプションを抽出
$('#select option').filter(function (index, element) {
  return element.selected;
});

.not()

現在のコレクションから指定された式に一致しない要素を抽出します。

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

パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは現在の要素です。関数内では、this は現在の要素を指します。関数が true を返すと現在の要素は削除され、false を返すと保持されます。

// .box クラスを持たない div 要素を抽出
$('div').not('.box');

// 選択されていないオプションを抽出
$('#select option').not(function (index, element) {
  return element.selected;
});

CSS クラス

.hasClass()

コレクション内の最初の要素が指定された CSS クラスを持っているかどうかを判定します。

// 最初の div 要素が .item クラスを持っているか判定
$('div').hasClass('item');

.addClass()

コレクション内の各要素に CSS クラスを追加します。複数のクラス名はスペースで区切ります。

パラメーターには、文字列または CSS クラス名を返すコールバック関数を指定できます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、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;
});

.removeClass()

コレクション内の各要素から指定された CSS クラスを削除します。複数のクラス名はスペースで区切ります。

パラメーターには、文字列または CSS クラス名を返すコールバック関数を指定できます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、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';
});

.toggleClass()

要素に指定された CSS クラスがあれば削除し、なければ追加します。複数のクラス名はスペースで区切ります。

パラメーターには、文字列または CSS クラス名を返すコールバック関数を指定できます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターはその要素に既にある CSS クラス名です。関数内では、this は現在の要素を指します。

// すべての div 要素の .item クラスを切り替え
$('div').toggleClass('item');

// すべての div 要素の .item1 と .item2 クラスを切り替え
$('div').toggleClass('item1 item2');

// すべての div 要素で、コールバック関数が返す CSS クラスを切り替え
$('div').toggleClass(function (index, currentClassName) {
  return 'item';
});

ノード属性

.prop()

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

// 最初の要素の checked プロパティの値を取得
$('input').prop('checked');

2 つのパラメーターを渡すと、コレクション内のすべての要素の指定された JavaScript プロパティの値を設定します。

プロパティの値は任意の型の値、またはコールバック関数の戻り値にできます。コールバック関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターはその要素に既にあるプロパティの値で、関数内の this は現在の要素を指します。

プロパティの値またはコールバック関数の戻り値が undefined の場合、このメソッドは要素の既存のプロパティを変更しません。

// すべての一致する要素の checked プロパティの値を true に設定
$('input').prop('checked', true);

// コールバック関数の戻り値でプロパティ値を設定
$('input').prop('checked', function (index, oldPropValue) {
  return true;
});

オブジェクトを渡すことで、複数のプロパティを同時に設定することもできます。

// 要素の複数のプロパティ値を同時に設定
$('input').prop({
  checked: false,
  disabled: function (index, oldPropValue) {
    return true;
  },
});

.removeProp()

コレクション内のすべての要素から指定された JavaScript プロパティを削除します。

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

.attr()

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

// 最初の要素の属性値を取得
$('div').attr('username');

2 つのパラメーターを渡すと、コレクション内のすべての要素の指定された HTML 属性の値を設定します。

属性の値は文字列または数値、または属性値を返すコールバック関数にできます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターはその要素に既にある属性の値です。関数内では、this は現在の要素を指します。

属性の値またはコールバック関数の戻り値が null の場合、このメソッドは指定された属性を削除します。undefined の場合は、要素の既存の属性を変更しません。

// すべての一致する要素の属性値を設定
$('div').attr('username', 'mdui');

// コールバック関数の戻り値で属性値を設定
$('div').attr('username', function (index, oldAttrValue) {
  return 'mdui';
});

オブジェクトを渡すことで、複数の属性を同時に設定することもできます。

// 要素の複数の属性値を同時に設定
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  },
});

.removeAttr()

コレクション内のすべての要素から指定された HTML 属性を削除します。複数の属性名はスペースで区切ります。

// コレクション内のすべての要素から 1 つの属性を削除
$('div').removeAttr('username');

// コレクション内のすべての要素から複数の属性を削除
$('div').removeAttr('username lastname');

.val()

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

要素が <select multiple="multiple"> の場合、選択されたすべての項目を含む配列を返します。

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

パラメーターを渡すと、コレクション内のすべての要素の値を設定します。

値は文字列、数値、文字列の配列、または値を返すコールバック関数にできます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは要素の元の値です。関数内では、this は現在の要素を指します。

要素が <input type="checkbox">、<input type="radio">、<option> の場合、値またはコールバック関数の戻り値は配列にできます。その場合、配列内の値が選択され、配列にない値の選択は解除されます。

値またはコールバック関数の戻り値が undefined の場合、要素の値は空に設定されます。

// 一致する要素の値を設定
$('#input').val('mdui');

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

.text()

コレクション内のすべての要素（その子孫要素を含む）のテキストコンテンツを返します。

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

パラメーターを渡すと、コレクション内のすべての要素のテキストコンテンツを設定します。

値は文字列、数値、ブール値、またはテキストコンテンツを返すコールバック関数にできます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは要素の元のテキストコンテンツです。関数内では、this は現在の要素を指します。

値またはコールバック関数の戻り値が undefined の場合、要素のテキストコンテンツは変更されません。

// 一致する要素のテキストコンテンツを設定
$('.box').text('テキストコンテンツ');

// コールバック関数の戻り値で要素のテキストコンテンツを設定
$('.box').text(function (index, oldTextContent) {
  return '新しいテキストコンテンツ';
});

.html()

コレクション内の最初の要素の HTML コンテンツを返します。

// 最初の .box 要素の HTML コンテンツを取得
$('.box').html();

パラメーターを渡すと、コレクション内のすべての要素の HTML コンテンツを設定します。

値は HTML 文字列、DOM 要素、または HTML 文字列または DOM 要素を返すコールバック関数にできます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは要素の元の HTML コンテンツです。関数内では、this は現在の要素を指します。

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

// 一致する要素の HTML を設定
$('.box').html('<div>新しい HTML コンテンツ</div>');

// コールバック関数の戻り値で要素の HTML コンテンツを設定
$('.box').html(function (index, oldHTMLContent) {
  return '<div>新しい HTML コンテンツ</div>';
});

データストレージ

$.data()

指定された要素にデータを読み書きします。

データを保存する際、値が undefined の場合は、要素上の対応するデータを読み取ることになります。つまり、$.data(element, 'key', undefined) は $.data(element, 'key') と同等です。

注意：このメソッドは要素の data-* 属性を取得しません。

// 指定された要素にデータを保存し、保存された値を返す
$.data(document.body, 'layout', 'dark'); // dark を返す

// 指定された要素に複数のデータを同時に保存
$.data(document.body, {
  primary: 'indigo',
  accent: 'pink',
}); // { primary: 'indigo', accent: 'pink' } を返す

// 指定された要素に保存されたデータを取得
$.data(document.body, 'layout'); // dark を返す

// 指定された要素に保存されたすべてのデータを取得
$.data(document.body); // { layout: 'dark', primary: 'indigo', accent: 'pink' } を返す

$.removeData()

指定された要素に保存されたデータを削除します。

複数のキー名をスペースで区切るか、配列で指定できます。キー名を指定しない場合は、要素上のすべてのデータが削除されます。

// 要素からキー名 name のデータを削除
$.removeData(document.body, 'name');

// 要素からキー名 name1 と name2 のデータを削除。以下の 2 つの方法は同等：
$.removeData(document.body, 'name1 name2');
$.removeData(document.body, ['name1', 'name2']);

// 要素に保存されたすべてのデータを削除
$.removeData(document.body);

.data()

現在のコレクションの要素にデータを読み書きします。

保存する値が undefined の場合は、保存は行われません。

注意：このメソッドが取得するデータには、要素の data-* 属性が含まれます。

// 現在のコレクションの要素にデータを保存
$('.box').data('layout', 'dark');

// 現在のコレクションの要素に複数のデータを同時に保存
$('.box').data({
  primary: 'indigo',
  accent: 'pink',
});

// 現在のコレクションの最初の要素に保存された指定されたデータを取得
$('.box').data('layout'); // dark を返す

// 現在のコレクションの最初の要素に保存されたすべてのデータを取得
$('.box').data(); // { layout: 'dark', primary: 'indigo', accent: 'pink' } を返す

.removeData()

現在のコレクションの要素に保存されたデータを削除します。

複数のキー名をスペースで区切るか、配列で指定できます。キー名を指定しない場合は、要素上のすべてのデータが削除されます。

注意：このメソッドは .data() メソッドで設定されたデータのみを削除し、data-* 属性のデータは削除しません。

// キー名 name のデータを削除
$('.box').removeData('name');

// キー名 name1 と name2 のデータを削除。以下の 2 つの方法は同等：
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

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

スタイル

.css()

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

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

パラメーターを渡すと、コレクション内のすべての要素の CSS プロパティの値を設定します。

プロパティの値は文字列、数値、または文字列または数値を返すコールバック関数にできます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは要素の元の CSS プロパティの値です。関数内では、this は現在の要素を指します。

値またはコールバック関数の戻り値が undefined の場合、要素の CSS プロパティの値は変更されません。値が null の場合、要素の対応する CSS プロパティは削除されます。値が数値の場合、自動的に px が単位として追加されます。ただし、そのプロパティが px を単位として使用できない場合は、値はそのまま文字列に変換されます。

// コレクション内のすべての要素のスタイル値を設定
$('.box').css('color', 'red');

// コールバック関数の戻り値ですべての要素のスタイル値を設定
$('.box').css('color', function (index, oldCSSValue) {
  return 'green';
});

// オブジェクトを渡して複数のスタイルを同時に設定
$('.box').css({
  'background-color': 'white',
  color: function (index, oldCSSValue) {
    return 'blue';
  },
});

.width()

コレクション内の最初の要素の幅を取得します（padding、border、margin は含みません）。

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

パラメーターを渡すと、コレクション内のすべての要素の幅を設定します。

値は単位付きの文字列、数値、または単位付きの文字列または数値を返すコールバック関数にできます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは要素の元の幅です。関数内では、this は現在の要素を指します。

値またはコールバック関数の戻り値が null または undefined の場合、要素の幅は変更されません。値が数値の場合、自動的に px が単位として追加されます。

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

// 値が数値の場合、デフォルトの単位は px
$('.box').width(10);

// コールバック関数の戻り値で幅を設定
$('.box').width(function (index, oldWidth) {
  return 10;
});

.height()

コレクション内の最初の要素の高さを取得します（padding、border、margin は含みません）。

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

パラメーターを渡すと、コレクション内のすべての要素の高さを設定します。

値は単位付きの文字列、数値、または単位付きの文字列または数値を返すコールバック関数にできます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは要素の元の高さです。関数内では、this は現在の要素を指します。

値またはコールバック関数の戻り値が null または undefined の場合、要素の高さは変更されません。値が数値の場合、自動的に px が単位として追加されます。

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

// 値が数値の場合、デフォルトの単位は px
$('.box').height(10);

// コールバック関数の戻り値で高さを設定
$('.box').height(function (index, oldHeight) {
  return 10;
});

.innerWidth()

コレクション内の最初の要素の幅を取得します（padding を含み、border、margin は含みません）。

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

パラメーターを渡すと、コレクション内のすべての要素の幅を設定します。

値は単位付きの文字列、数値、または単位付きの文字列または数値を返すコールバック関数にできます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは要素の元の幅です。関数内では、this は現在の要素を指します。

値またはコールバック関数の戻り値が null または undefined の場合、要素の幅は変更されません。値が数値の場合、自動的に px が単位として追加されます。

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

// 値が数値の場合、デフォルトの単位は px
$('.box').innerWidth(10);

// コールバック関数の戻り値で幅を設定
$('.box').innerWidth(function (index, oldWidth) {
  return 10;
});

.innerHeight()

コレクション内の最初の要素の高さを取得します（padding を含み、border、margin は含みません）。

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

パラメーターを渡すと、コレクション内のすべての要素の高さを設定します。

値は単位付きの文字列、数値、または単位付きの文字列または数値を返すコールバック関数にできます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは要素の元の高さです。関数内では、this は現在の要素を指します。

値またはコールバック関数の戻り値が null または undefined の場合、要素の高さは変更されません。値が数値の場合、自動的に px が単位として追加されます。

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

// 値が数値の場合、デフォルトの単位は px
$('.box').innerHeight(10);

// コールバック関数の戻り値で高さを設定
$('.box').innerHeight(function (index, oldHeight) {
  return 10;
});

.outerWidth()

コレクション内の最初の要素の幅を取得します（padding、border を含み、margin は含みません。パラメーター true を渡すと、幅に margin を含めます）。

// padding、border を含む幅
$('.box').outerWidth();

// padding、border、margin を含む幅
$('.box').outerWidth(true);

このメソッドを使用して、コレクション内のすべての要素の幅を設定することもできます（padding、border を含み、margin は含みません。2番目のパラメーターに true を渡すと、幅に margin を含めます）。

最初のパラメーターは単位付きの文字列、数値、または単位付きの文字列または数値を返すコールバック関数にできます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは要素の元の幅です。関数内では、this は現在の要素を指します。

値またはコールバック関数の戻り値が null または undefined の場合、要素の幅は変更されません。値が数値の場合、自動的に px が単位として追加されます。

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

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

// 2番目のパラメーターが true の場合、幅は margin を含む
$('.box').outerWidth(10, true);

// コールバック関数の戻り値で幅を設定
$('.box').outerWidth(function (index, oldWidth) {
  return 10;
});

.outerHeight()

コレクション内の最初の要素の高さを取得します（padding、border を含み、margin は含みません。パラメーター true を渡すと、高さに margin を含めます）。

// padding、border を含む高さ
$('.box').outerHeight();

// padding、border、margin を含む高さ
$('.box').outerHeight(true);

このメソッドを使用して、コレクション内のすべての要素の高さを設定することもできます（padding、border を含み、margin は含みません。2番目のパラメーターに true を渡すと、高さに margin を含めます）。

最初のパラメーターは単位付きの文字列、数値、または単位付きの文字列または数値を返すコールバック関数にできます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは要素の元の高さです。関数内では、this は現在の要素を指します。

値またはコールバック関数の戻り値が null または undefined の場合、要素の高さは変更されません。値が数値の場合、自動的に px が単位として追加されます。

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

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

// 2番目のパラメーターが true の場合、高さは margin を含む
$('.box').outerHeight(10, true);

// コールバック関数の戻り値で高さを設定
$('.box').outerHeight(function (index, oldHeight) {
  return 10;
});

.hide()

コレクション内のすべての要素を非表示にします。

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

.show()

コレクション内のすべての要素を表示します。

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

.toggle()

コレクション内のすべての要素の表示状態を切り替えます。

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

.offset()

現在のコレクション内の最初の要素の document に対する座標を取得します。

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

パラメーターを渡すと、コレクション内のすべての要素の document に対する座標を設定します。

パラメーターは top と left プロパティを含むオブジェクト、またはこの形式のオブジェクトを返すコールバック関数にできます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは要素の元の座標です。関数内では、this は現在の要素を指します。

パラメーターの top または left の値が undefined の場合、対応する値は変更されません。

// コレクション内のすべての要素の座標を設定
$('.box').offset({ top: 20, left: 30 });

// コールバック関数の戻り値で要素の座標を設定
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});

.offsetParent()

コレクション内の最初の要素の位置決め親要素を取得します。つまり、親要素の中で最初に position プロパティが relative または absolute の要素です。

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

.position()

コレクション内の最初の要素の、その位置決め親要素に対するオフセットを取得します。

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

ノード検索

.find()

現在のコレクション内で、CSS セレクターに基づいて指定された子孫ノードのコレクションを検索します。

// #box の子孫ノードの中で .box を含むノードのコレクションを検索
$('#box').find('.box');

.children()

現在のコレクション内で、直接の子要素で構成されるコレクションを取得します。CSS セレクターをパラメーターとして渡すと、子要素をフィルタリングできます。

// #box のすべての直接の子要素を取得
$('#box').children();

// #box のすべての直接の子要素の中で .box を含む要素を取得
$('#box').children('.box');

.has()

現在のコレクション内で、指定された子要素を含む要素を抽出します。パラメーターは CSS セレクターまたは DOM 要素です。

// ul を含む li に背景色を追加
$('li').has('ul').css('background-color', 'red');

.parent()

現在のコレクション内のすべての要素の、直接の親要素のコレクションを取得します。CSS セレクターをパラメーターとして渡すと、そのパラメーターに一致する親要素のみを返します。

// .box 要素の直接の親要素を返す
$('.box').parent();

// .box 要素の直接の親要素の中で .parent クラスを持つ要素を返す
$('.box').parent('.parent');

.parents()

現在のコレクション内のすべての要素の祖先要素のコレクションを取得します。CSS セレクターをパラメーターとして渡すと、そのパラメーターに一致する祖先要素のみを返します。

// span 要素のすべての祖先要素を返す
$('span').parents();

// span 要素の祖先要素の中で p 要素であるものを返す
$('span').parents('p');

.parentsUntil()

現在のコレクション内の各要素のすべての親要素を、最初のパラメーターに一致する要素に達するまで（一致する要素は含まない）取得します。

最初のパラメーターは CSS セレクター、DOM 要素、JQ オブジェクトです。

2 番目のパラメーターは CSS セレクターである必要があり、このパラメーターに一致する要素のみを返すことを示します。

パラメーターを指定しない場合は、すべての祖先要素が一致します。つまり、.parents() と同じ効果になります。

// .item 要素のすべての祖先要素を取得
$('.item').parentsUntil();

// .item 要素のすべての親要素を、.parent 要素に達するまで取得
$('.item').parentsUntil('.parent');

// .item 要素の div 要素である祖先要素を、.parent 要素に達するまで取得
$('.item').parentsUntil('.parent', 'div');

.prev()

現在のコレクション内の各要素の、前の同階層要素で構成されるコレクションを取得します。CSS セレクターをパラメーターとして渡すと、そのパラメーターに一致する同階層要素のみを返します。

// .box 要素の前の同階層要素のコレクションを取得
$('.box').prev();

// .box 要素の前の div である同階層要素のコレクションを取得
$('.box').prev('div');

.prevAll()

現在のコレクション内の各要素の、前にあるすべての同階層要素で構成されるコレクションを取得します。CSS セレクターをパラメーターとして渡すと、そのパラメーターに一致する同階層要素のみを返します。

// .box 要素の前にあるすべての同階層要素を取得
$('.box').prevAll();

// .box 要素の前にある .selected を含むすべての同階層要素を取得
$('.box').prevAll('.selected');

.prevUntil()

現在のコレクション内の各要素の、前にあるすべての同階層要素を、最初のパラメーターに一致する要素に達するまで（一致する要素は含まない）取得します。

最初のパラメーターは CSS セレクター、DOM 要素、JQ オブジェクトです。2 番目のパラメーターは CSS セレクターである必要があり、このパラメーターに一致する要素のみを返すことを示します。

パラメーターを指定しない場合は、前にあるすべての同階層要素を返します。つまり、.prevAll() メソッドと同じ効果になります。

// .box 要素の前にあるすべての同階層要素を取得
$('.box').prevUntil();

// .box 要素の前にあるすべての同階層要素を、.until 要素に達するまで取得
$('.box').prevUntil('.until');

// .box 要素の前にある div である同階層要素を、.until 要素に達するまで取得
$('.box').prevUntil('.until', 'div');

.next()

現在のコレクション内の各要素の、次の同階層要素で構成されるコレクションを取得します。CSS セレクターをパラメーターとして渡すと、そのパラメーターに一致する同階層要素のみを返します。

// .box 要素の次の同階層要素のコレクションを取得
$('.box').next();

// .box 要素の次の div である同階層要素のコレクションを取得
$('.box').next('div');

.nextAll()

現在のコレクション内の各要素の、後ろにあるすべての同階層要素で構成されるコレクションを取得します。CSS セレクターをパラメーターとして渡すと、そのパラメーターに一致する同階層要素のみを返します。

// .box 要素の後ろにあるすべての同階層要素を取得
$('.box').nextAll();

// .box 要素の後ろにある .selected を含むすべての同階層要素を取得
$('.box').nextAll('.selected');

.nextUntil()

現在のコレクション内の各要素の、後ろにあるすべての同階層要素を、最初のパラメーターに一致する要素に達するまで（一致する要素は含まない）取得します。

最初のパラメーターは CSS セレクター、DOM 要素、JQ オブジェクトです。2 番目のパラメーターは CSS セレクターである必要があり、このパラメーターに一致する要素のみを返すことを示します。

パラメーターを指定しない場合は、後ろにあるすべての同階層要素を返します。つまり、.nextAll() メソッドと同じ効果になります。

// .box 要素の後ろにあるすべての同階層要素を取得
$('.box').nextUntil();

// .box 要素の後ろにあるすべての同階層要素を、.until 要素に達するまで取得
$('.box').nextUntil('.until');

// .box 要素の後ろにある同階層の div 要素を、.until 要素に達するまで取得
$('.box').nextUntil('.until', 'div');

.closest()

現在の要素から上に向かって段階的に検索し、最初に一致した要素を返します。パラメーターは CSS セレクター、DOM 要素、JQ オブジェクトです。

// .box 要素の親要素の中で最も近い .parent 要素を取得
$('.box').closest('.parent');

.siblings()

現在のコレクション内の各要素の、すべての同階層要素を取得します。CSS セレクターをパラメーターとして渡すと、そのパラメーターに一致する同階層要素のみを返します。

// .box 要素のすべての同階層要素を取得
$('.box').siblings();

// .box 要素のすべての同階層要素の中で .selected を含む要素を取得
$('.box').siblings('.selected');

.add()

要素を現在のコレクションに追加します。パラメーターは HTML 文字列、CSS セレクター、JQ オブジェクト、DOM 要素、DOM 要素の配列、NodeList です。

// .selected を含む要素を現在のコレクションに追加
$('.box').add('.selected');

ノード操作

.empty()

現在の要素のすべての子要素を削除します。

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

.remove()

DOM から現在のコレクション内の要素を削除します。CSS セレクターをパラメーターとして渡すと、そのパラメーターに一致する要素のみを削除します。

// すべての p 要素を削除
$('p').remove();

// .box を含む p 要素をすべて削除
$('p').remove('.box');

.prepend()

現在のコレクション内の要素の内部の先頭に指定されたコンテンツを挿入します。パラメーターは HTML 文字列、DOM 要素、DOM 要素の配列、JQ オブジェクトです。複数のパラメーターを渡せます。

また、HTML 文字列、DOM 要素、DOM 要素の配列、JQ オブジェクトを返すコールバック関数も渡せます。関数の最初のパラメーターは現在の要素のインデックス位置、2番目のパラメーターは要素の元の HTML で、関数内の this は現在の要素を指します。

このメソッドは元のコレクションを返します。

// 1 つの要素を挿入
$('<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>

.prependTo()

現在のコレクション内の要素を、指定された要素の内部の先頭に追加します。パラメーターは CSS セレクター、HTML 文字列、DOM 要素、DOM 要素の配列、JQ オブジェクトです。

このメソッドは元のコレクションを返します。

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

.append()

現在の要素の内部の後ろに指定されたコンテンツを挿入します。パラメーターは HTML 文字列、DOM 要素、DOM 要素の配列、JQ オブジェクトです。複数のパラメーターを渡せます。

また、HTML 文字列、DOM 要素、DOM 要素の配列、JQ オブジェクトを返すコールバック関数も渡せます。関数の最初のパラメーターは現在の要素のインデックス位置、2番目のパラメーターは要素の元の HTML で、関数内の this は現在の要素を指します。

このメソッドは元のコレクションを返します。

// 1 つの要素を挿入
$('<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>

.appendTo()

現在のコレクション内の要素を、指定された要素の内部の後ろに追加します。パラメーターは CSS セレクター、HTML 文字列、DOM 要素、DOM 要素の配列、JQ オブジェクトです。

このメソッドは元のコレクションを返します。

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

.after()

現在のコレクションの要素の後ろに指定されたコンテンツを挿入し、その同階層要素とします。パラメーターは HTML 文字列、DOM 要素、DOM 要素の配列、JQ オブジェクトです。複数のパラメーターを渡せます。

また、HTML 文字列、DOM 要素、DOM 要素の配列、JQ オブジェクトを返すコールバック関数も渡せます。関数の最初のパラメーターは現在の要素のインデックス位置、2番目のパラメーターは要素の元の HTML で、関数内の this は現在の要素を指します。

このメソッドは元のコレクションを返します。

// 1 つの要素を挿入
$('<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>

.insertAfter()

現在のコレクション内の要素を、ターゲット要素の後ろに同階層要素として挿入します。

現在のコレクション内の要素がページ内に既にある要素の場合、その要素はコピーではなく移動されます。複数のターゲットがある場合は、現在のコレクション内の要素が複製され、各ターゲット要素の後ろに追加されます。

パラメーターとして 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>

.before()

現在のコレクションの要素の前に指定されたコンテンツを挿入し、その同階層要素とします。パラメーターは HTML 文字列、DOM 要素、DOM 要素の配列、JQ オブジェクトです。複数のパラメーターを渡せます。

また、HTML 文字列、DOM 要素、DOM 要素の配列、JQ オブジェクトを返すコールバック関数も渡せます。関数の最初のパラメーターは現在の要素のインデックス位置、2番目のパラメーターは要素の元の HTML で、関数内の this は現在の要素を指します。

このメソッドは元のコレクションを返します。

// 1 つの要素を挿入
$('<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>

.insertBefore()

現在のコレクション内の要素を、ターゲット要素の前に同階層要素として挿入します。

現在のコレクション内の要素がページ内に既にある要素の場合、その要素はコピーではなく移動されます。複数のターゲットがある場合は、現在のコレクション内の要素が複製され、各ターゲット要素の前に追加されます。

パラメーターとして 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>

.replaceWith()

現在のコレクション内の要素を、指定された要素で置き換えます。

パラメーターは HTML 文字列、DOM 要素、DOM 要素の配列、JQ オブジェクトです。

また、HTML 文字列、DOM 要素、DOM要素の配列、JQ オブジェクトを返すコールバック関数も渡せます。関数の最初のパラメーターは現在の要素のインデックス位置、2番目のパラメーターは要素の元の HTML で、関数内の this は現在の要素を指します。

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

// すべての .box 要素を <p>Hello</p> で置き換え
$('.box').replaceWith('<p>Hello</p>');

// コールバック関数の戻り値ですべての .box 要素を置き換え
$('.box').replaceWith(function (index, oldHTML) {
  return oldHTML + index;
});

.replaceAll()

現在のコレクション内の要素で、指定された要素を置き換えます。

パラメーターは置き換えられる要素で、CSS セレクター、DOM 要素、DOM 要素の配列、JQ オブジェクトです。

このメソッドは元のコレクション、つまり置き換えに使用する要素のコレクションを返します。

// .new 要素ですべての .box 要素を置き換え
$('.new').replaceAll('.box');

.clone()

ディープクローンによってコレクション内のすべての要素を複製します。

このメソッドはネイティブの cloneNode メソッドを使用してディープクローンを行いますが、データやイベントハンドラーは新しい要素に複製されません。この点は、パラメーターを使ってデータやイベント処理を複製するかどうかを決定する jQuery とは異なります。

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

フォーム

.serializeArray()

フォーム要素の値を、name と value のキーと値のペアで構成される配列に変換します。

このメソッドは、個別のフォーム要素に対しても、<form> 全体に対しても操作できます。

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

.serializeObject()

フォーム要素の値をオブジェクトに変換します。

同じキー名が存在する場合、対応する値は配列に変換されます。

このメソッドは、個別のフォーム要素に対しても、<form> 全体に対しても操作できます。

$('form').serializeObject();
// { name: mdui, password: 123456 }

.serialize()

フォーム要素の値を URL エンコードされた文字列にコンパイルします。

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

イベント

.on()

コレクション内の各要素の特定のイベントに、イベントハンドラー関数をバインドします。具体的な使用方法は以下の例を参照してください：

// クリックイベントをバインド
$('.box').on('click', function (e) {
  console.log('.box 要素がクリックされました');
});

// 複数のイベントをバインド
$('.box').on('click focus', function (e) {
  console.log('click と focus イベントのどちらでもこの関数が実行されます');
});

// イベント委譲
$(document).on('click', '.box', function (e) {
  console.log('.box をクリックするとこの関数が実行されます');
});

// 複数のイベントとイベントハンドラー関数を同時にバインド
$('.box').on({
  click: function (e) {
    console.log('click イベントが発生しました');
  },
  focus: function (e) {
    console.log('focus イベントが発生しました');
  },
});

// パラメーターを渡す
$('.box').on('click', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('.box 要素がクリックされ、イベントハンドラー関数にパラメーターが渡されました');
  // 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', keys: '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 要素がクリックされました');
});

.one()

各一致する要素の特定のイベントにイベントハンドラー関数をバインドしますが、イベントは一度だけ発生します。

このメソッドの使用方法は .on() と同じなので、例は省略します。

.off()

コレクション内の要素にバインドされたイベントを解除します。具体的な使用方法は以下の例を参照してください：

// バインドされたすべてのイベントハンドラー関数を解除
$('.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');

.trigger()

指定されたイベントをトリガーします。具体的な使用方法は以下の例を参照してください：

// 指定されたイベントをトリガー
$('.box').trigger('click');

// イベントトリガー時にパラメーターを渡す
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });

// イベント名は名前空間を使用可能
$('.box').trigger('click.myPlugin');

// CustomEvent のパラメーターを渡す
$('.box').trigger('click', undefined, {
  bubbles: true,
  cancelable: true,
  composed: true,
});

ajax

$.ajaxSetup()

グローバルな AJAX リクエストパラメーターを設定します。

$.ajaxSetup({
  // デフォルトでグローバル AJAX イベントをトリガーしない
  global: false,

  // デフォルトで POST メソッドを使用してリクエストを送信する
  method: 'POST',
});

詳細なパラメーターリストは以下の ajax パラメーター を参照してください。

$.ajax()

AJAX リクエストを送信し、Promise オブジェクトを返します。

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

promise
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

詳細なパラメーターリストは以下の AJAX パラメーター を参照してください。

また、.on() メソッドを使用して AJAX のグローバルイベントをリッスンすることもできます。

// AJAX リクエストが開始されると、このイベントが発生します
$(document).on('ajaxStart', function (e, { xhr, options }) {
  // xhr: XMLHttpRequest オブジェクト
  // options: $.ajax() メソッドのパラメーター
});

// AJAX リクエストが成功すると、このイベントが発生します
$(document).on('ajaxSuccess', function (e, { xhr, options, response }) {
  // xhr: XMLHttpRequest オブジェクト
  // options: $.ajax() メソッドのパラメーター
  // response: リクエストのレスポンス
});

// AJAX リクエストが失敗すると、このイベントが発生します
$(document).on('ajaxError', function (e, { xhr, options }) {
  // xhr: XMLHttpRequest オブジェクト
  // options: $.ajax() メソッドのパラメーター
});

// AJAX リクエストが完了すると（成功・失敗に関わらず）、このイベントが発生します
$(document).on('ajaxComplete', function (e, { xhr, options }) {
  // xhr: XMLHttpRequest オブジェクト
  // options: $.ajax() メソッドのパラメーター
});

ajax パラメーター

$.ajax({
  url: 'クロスオリジン URL',
  xhrFields: {
    withCredentials: true
  }
});

$.ajax({
  statusCode: {
    404: function (xhr, textStatus) {
      alert('ステータスコードが 404 の場合に呼び出されます');
    },
    200: function (data, textStatus, xhr) {
      alert('ステータスコードが 200 の場合に呼び出されます');
    }
  }
});

$.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 は成功またはエラーコードを含む文字列
  }
});