Bibliothèque d'utilitaires 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 로드됨');
});

확장

$.extend()

하나의 객체만 전달하면 해당 객체의 속성이 $ 객체에 병합되어 $의 네임스페이스 아래에 새로운 기능을 추가하는 것과 같습니다.

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

// 그러면 다음과 같이 사용자 정의 메서드를 호출할 수 있습니다
$.customFunc();

두 개 이상의 객체를 전달하면 모든 객체의 속성이 첫 번째 객체에 추가되고 병합된 객체가 반환됩니다. 단, 값이 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()

배열이나 객체를 순회합니다. 첫 번째 매개변수인 순회 대상 배열 또는 객체를 반환합니다.

콜백 함수의 첫 번째 매개변수는 배열의 인덱스 또는 객체의 키이고, 두 번째 매개변수는 배열 또는 객체의 해당 위치 값입니다.

콜백 함수 내에서 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()

두 번째 배열의 요소를 첫 번째 배열에 추가하고 병합된 배열을 반환합니다.

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()

배열이나 객체를 순회하고 콜백 함수의 반환값으로 구성된 새 배열을 반환합니다.

콜백 함수의 첫 번째 매개변수는 배열 또는 객체의 해당 위치 값이고, 두 번째 매개변수는 배열의 인덱스 또는 객체의 키입니다.

콜백 함수는 임의의 값을 반환할 수 있습니다. 배열을 반환하면 해당 배열이 펼쳐집니다. 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()

컬렉션에 매개변수와 일치하는 요소가 하나라도 있는지 판단합니다. 일치하면 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

객체 접근

.length

현재 컬렉션에 있는 요소의 개수를 반환합니다.

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

.each()

현재 컬렉션을 순회하며 컬렉션의 각 요소에 대해 함수를 실행합니다. 함수가 false를 반환하면 순회를 중지합니다.

함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 현재 요소입니다. 함수 내부에서 this는 현재 요소를 가리킵니다.

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

.map()

현재 컬렉션을 순회하며 컬렉션의 각 요소에 대해 함수를 실행하고 함수 반환값으로 구성된 새 컬렉션을 반환합니다.

함수는 단일 데이터 또는 데이터 배열을 반환할 수 있습니다. 배열을 반환하면 배열의 요소가 순서대로 새 컬렉션에 추가됩니다. 함수가 null 또는 undefined를 반환하면 해당 값은 새 컬렉션에 추가되지 않습니다.

함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 현재 요소입니다. 함수 내부에서 this는 현재 요소를 가리킵니다.

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

// result는 일치하는 요소의 값으로 구성된 JQ 객체입니다

.eq()

지정된 인덱스 위치의 요소만 포함하는 새 컬렉션을 반환합니다.

$('div').eq(0); // 첫 번째 요소만 포함하는 컬렉션 반환
$('div').eq(-1); // 마지막 요소만 포함하는 컬렉션 반환
$('div').eq(-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()

현재 컬렉션의 하위 집합을 반환합니다.

두 개의 매개변수를 전달하여 하위 집합의 시작과 끝 위치(끝 위치의 요소는 포함하지 않음)를 지정할 수 있습니다. 두 번째 매개변수를 전달하지 않으면 시작 위치부터 컬렉션 끝까지의 모든 요소를 반환합니다.

// 컬렉션에서 세 번째(세 번째 포함) 이후의 모든 요소 반환
$('div').slice(3);

// 컬렉션에서 세 번째부터 다섯 번째(세 번째 포함, 다섯 번째 미포함) 사이의 요소 반환
$('div').slice(3, 5);

.filter()

현재 컬렉션에서 지정된 표현식과 일치하는 요소를 필터링합니다. 매개변수는 CSS 선택자, DOM 요소, DOM 요소 배열 또는 콜백 함수일 수 있습니다.

매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 현재 요소입니다. 함수 내부에서 this는 현재 요소를 가리킵니다. 함수가 true를 반환하면 현재 요소가 유지되고, false를 반환하면 제거됩니다.

// .box 클래스를 가진 모든 div 요소 필터링
$('div').filter('.box');

// 선택된 모든 옵션 필터링
$('#select option').filter(function (index, element) {
  return element.selected;
});

.not()

현재 컬렉션에서 지정된 표현식과 일치하지 않는 요소를 필터링합니다.

매개변수는 CSS 선택자, DOM 요소, DOM 요소 배열, JQ 객체 또는 boolean 값을 반환하는 콜백 함수일 수 있습니다.

매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 현재 요소입니다. 함수 내부에서 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 클래스 이름을 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 해당 요소에 원래 있던 CSS 클래스 이름입니다. 함수 내부에서 this는 현재 요소를 가리킵니다.

// 모든 div 요소에 .item 클래스 추가
$('div').addClass('item');

// 모든 div 요소에 .item1 및 .item2 클래스 추가
$('div').addClass('item1 item2');

// 콜백 함수가 반환하는 CSS 클래스를 모든 div 요소에 추가
$('div').addClass(function (index, currentClassName) {
  return currentClassName + '-' + index;
});

.removeClass()

컬렉션의 각 요소에서 지정된 CSS 클래스를 제거합니다. 여러 클래스 이름은 공백으로 구분할 수 있습니다.

매개변수는 문자열 또는 CSS 클래스 이름을 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 해당 요소에 원래 있던 CSS 클래스 이름입니다. 함수 내부에서 this는 현재 요소를 가리킵니다.

매개변수를 전달하지 않으면 요소의 class 속성을 직접 제거합니다.

// 모든 div 요소에서 .item 클래스 제거
$('div').removeClass('item');

// 모든 div 요소에서 .item1 및 .item2 클래스 제거
$('div').removeClass('item1 item2');

// 콜백 함수가 반환하는 CSS 클래스를 모든 div 요소에서 제거
$('div').removeClass(function (index, currentClassName) {
  return 'item';
});

.toggleClass()

요소에 지정된 CSS 클래스가 있으면 삭제하고, 없으면 추가합니다. 여러 클래스 이름은 공백으로 구분할 수 있습니다.

매개변수는 문자열 또는 CSS 클래스 이름을 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 해당 요소에 원래 있던 CSS 클래스 이름입니다. 함수 내부에서 this는 현재 요소를 가리킵니다.

// 모든 div 요소에서 .item 클래스 토글
$('div').toggleClass('item');

// 모든 div 요소에서 .item1 및 .item2 클래스 토글
$('div').toggleClass('item1 item2');

// 콜백 함수가 반환하는 CSS 클래스를 모든 div 요소에서 토글
$('div').toggleClass(function (index, currentClassName) {
  return 'item';
});

노드 속성

.prop()

컬렉션의 첫 번째 요소의 JavaScript 프로퍼티 값을 가져옵니다.

// 첫 번째 요소의 checked 프로퍼티 값 가져오기
$('input').prop('checked');

두 개의 매개변수를 전달하면 컬렉션의 모든 요소에 지정된 JavaScript 프로퍼티 값을 설정합니다.

프로퍼티 값은 임의의 타입 값 또는 콜백 함수의 반환값일 수 있습니다. 콜백 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 해당 요소에 원래 있던 프로퍼티 값이며, 함수 내부의 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');

두 개의 매개변수를 전달하면 컬렉션의 모든 요소에 지정된 HTML 속성 값을 설정합니다.

속성 값은 문자열, 숫자 또는 속성 값을 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 해당 요소에 원래 있던 속성 값입니다. 함수 내부에서 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 속성을 제거합니다. 여러 속성 이름은 공백으로 구분할 수 있습니다.

// 컬렉션의 모든 요소에서 하나의 속성 제거
$('div').removeAttr('username');

// 컬렉션의 모든 요소에서 여러 속성 제거
$('div').removeAttr('username lastname');

.val()

컬렉션의 첫 번째 요소의 값을 반환합니다.

요소가 <select multiple="multiple">인 경우 선택된 모든 항목의 배열을 반환합니다.

// 선택된 첫 번째 요소의 값 가져오기
$('#input').val();

매개변수를 전달하면 컬렉션의 모든 요소의 값을 설정합니다.

값은 문자열, 숫자, 문자열 배열 또는 값을 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 요소의 원래 값입니다. 함수 내부에서 this는 현재 요소를 가리킵니다.

요소가 <input type="checkbox">, <input type="radio">, <option>인 경우 값 또는 콜백 함수의 반환값은 배열일 수 있으며, 배열에 있는 값을 선택하고 배열에 없는 값은 선택 취소합니다.

값 또는 콜백 함수의 반환값이 undefined인 경우 요소 값을 비웁니다.

// 선택된 요소의 값 설정
$('#input').val('mdui');

// 콜백 함수의 반환값으로 요소 값 설정
$('#input').val(function (index, oldValue) {
  return 'mdui';
});

.text()

컬렉션의 모든 요소(해당 하위 요소 포함)의 텍스트 내용을 반환합니다.

// 모든 .box 요소의 텍스트 가져오기
$('.box').text();

매개변수를 전달하면 컬렉션의 모든 요소의 텍스트 내용을 설정합니다.

값은 문자열, 숫자, 불리언 또는 텍스트 내용을 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 요소의 원래 텍스트 내용입니다. 함수 내부에서 this는 현재 요소를 가리킵니다.

값 또는 콜백 함수의 반환값이 undefined인 경우 요소의 텍스트 내용을 수정하지 않습니다.

// 선택된 요소의 텍스트 내용 설정
$('.box').text('텍스트 내용');

// 콜백 함수의 반환값으로 요소의 텍스트 내용 설정
$('.box').text(function (index, oldTextContent) {
  return '새 텍스트 내용';
});

.html()

컬렉션의 첫 번째 요소의 HTML 내용을 반환합니다.

// 첫 번째 .box 요소의 HTML 내용 가져오기
$('.box').html();

매개변수를 전달하면 컬렉션의 모든 요소의 HTML 내용을 설정합니다.

값은 HTML 문자열, DOM 요소, 또는 HTML 문자열이나 DOM 요소를 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 요소의 원래 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인 데이터 제거. 아래 두 방법은 동일합니다:
$.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인 데이터 제거. 아래 두 방법은 동일합니다:
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

// 요소에 저장된 모든 데이터 제거
$('.box').removeData();

스타일

.css()

컬렉션의 첫 번째 요소의 CSS 속성 값을 가져옵니다.

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

매개변수를 전달하면 컬렉션의 모든 요소의 CSS 속성 값을 설정합니다.

속성 값은 문자열, 숫자 또는 문자열이나 숫자를 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 요소의 원래 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();

매개변수를 전달하면 컬렉션의 모든 요소의 너비를 설정합니다.

값은 단위가 있는 문자열, 숫자 또는 단위가 있는 문자열이나 숫자를 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 요소의 원래 너비입니다. 함수 내부에서 this는 현재 요소를 가리킵니다.

값 또는 콜백 함수의 반환값이 null 또는 undefined인 경우 요소의 너비를 수정하지 않습니다. 값이 숫자이면 자동으로 px 단위가 추가됩니다.

// 컬렉션의 모든 요소의 너비 설정
$('.box').width('20%');

// 값이 숫자일 때 기본 단위는 px입니다
$('.box').width(10);

// 콜백 함수의 반환값으로 너비 설정
$('.box').width(function (index, oldWidth) {
  return 10;
});

.height()

컬렉션의 첫 번째 요소의 높이를 가져옵니다(padding, border, margin 미포함).

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

매개변수를 전달하면 컬렉션의 모든 요소의 높이를 설정합니다.

값은 단위가 있는 문자열, 숫자 또는 단위가 있는 문자열이나 숫자를 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 요소의 원래 높이입니다. 함수 내부에서 this는 현재 요소를 가리킵니다.

값 또는 콜백 함수의 반환값이 null 또는 undefined인 경우 요소의 높이를 수정하지 않습니다. 값이 숫자이면 자동으로 px 단위가 추가됩니다.

// 컬렉션의 모든 요소의 높이 설정
$('.box').height('20%');

// 값이 숫자일 때 기본 단위는 px입니다
$('.box').height(10);

// 콜백 함수의 반환값으로 높이 설정
$('.box').height(function (index, oldHeight) {
  return 10;
});

.innerWidth()

컬렉션의 첫 번째 요소의 너비를 가져옵니다(padding 포함, border, margin 미포함).

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

매개변수를 전달하면 컬렉션의 모든 요소의 너비를 설정합니다.

값은 단위가 있는 문자열, 숫자 또는 단위가 있는 문자열이나 숫자를 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 요소의 원래 너비입니다. 함수 내부에서 this는 현재 요소를 가리킵니다.

값 또는 콜백 함수의 반환값이 null 또는 undefined인 경우 요소의 너비를 수정하지 않습니다. 값이 숫자이면 자동으로 px 단위가 추가됩니다.

// 컬렉션의 모든 요소의 너비 설정
$('.box').innerWidth('20%');

// 값이 숫자일 때 기본 단위는 px입니다
$('.box').innerWidth(10);

// 콜백 함수의 반환값으로 너비 설정
$('.box').innerWidth(function (index, oldWidth) {
  return 10;
});

.innerHeight()

컬렉션의 첫 번째 요소의 높이를 가져옵니다(padding 포함, border, margin 미포함).

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

매개변수를 전달하면 컬렉션의 모든 요소의 높이를 설정합니다.

값은 단위가 있는 문자열, 숫자 또는 단위가 있는 문자열이나 숫자를 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 요소의 원래 높이입니다. 함수 내부에서 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 미포함. 두 번째 매개변수에 true를 전달하면 너비에 margin을 포함).

첫 번째 매개변수는 단위가 있는 문자열, 숫자 또는 단위가 있는 문자열이나 숫자를 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 요소의 원래 너비입니다. 함수 내부에서 this는 현재 요소를 가리킵니다.

값 또는 콜백 함수의 반환값이 null 또는 undefined인 경우 요소의 너비를 수정하지 않습니다. 값이 숫자이면 자동으로 px 단위가 추가됩니다.

// 컬렉션의 모든 요소의 너비 설정
$('.box').outerWidth('20%');

// 값이 숫자일 때 기본 단위는 px입니다
$('.box').outerWidth(10);

// 두 번째 매개변수가 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 미포함. 두 번째 매개변수에 true를 전달하면 높이에 margin을 포함).

첫 번째 매개변수는 단위가 있는 문자열, 숫자 또는 단위가 있는 문자열이나 숫자를 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 요소의 원래 높이입니다. 함수 내부에서 this는 현재 요소를 가리킵니다.

값 또는 콜백 함수의 반환값이 null 또는 undefined인 경우 요소의 높이를 수정하지 않습니다. 값이 숫자이면 자동으로 px 단위가 추가됩니다.

// 컬렉션의 모든 요소의 높이 설정
$('.box').outerHeight('20%');

// 값이 숫자일 때 기본 단위는 px입니다
$('.box').outerHeight(10);

// 두 번째 매개변수가 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 속성을 포함하는 객체 또는 이러한 형식의 객체를 반환하는 콜백 함수일 수 있습니다. 매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 요소의 인덱스이고 두 번째 매개변수는 요소의 원래 좌표입니다. 함수 내부에서 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 객체일 수 있습니다.

두 번째 매개변수를 전달할 수 있으며, 반드시 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 객체일 수 있습니다. 두 번째 매개변수를 전달할 수 있으며, 반드시 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 객체일 수 있습니다. 두 번째 매개변수를 전달할 수 있으며, 반드시 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 객체를 반환하는 콜백 함수를 전달할 수 있습니다. 함수의 첫 번째 매개변수는 현재 요소의 인덱스이고, 두 번째 매개변수는 요소의 원래 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>

.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 객체를 반환하는 콜백 함수를 전달할 수 있습니다. 함수의 첫 번째 매개변수는 현재 요소의 인덱스이고, 두 번째 매개변수는 요소의 원래 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>

.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 객체를 반환하는 콜백 함수를 전달할 수 있습니다. 함수의 첫 번째 매개변수는 현재 요소의 인덱스이고, 두 번째 매개변수는 요소의 원래 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>

.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 객체를 반환하는 콜백 함수를 전달할 수 있습니다. 함수의 첫 번째 매개변수는 현재 요소의 인덱스이고, 두 번째 매개변수는 요소의 원래 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>

.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 객체를 반환하는 콜백 함수를 전달할 수 있습니다. 함수의 첫 번째 매개변수는 현재 요소의 인덱스이고, 두 번째 매개변수는 요소의 원래 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: 'a cross-domain 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는 성공 또는 오류 코드를 포함하는 문자열입니다
  }
});