JavaScript 도구 라이브러리

이 메소드는 여러 가지 용도로 사용할 수 있습니다:

CSS 선택자를 매개변수로 전달하여 일치하는 요소를 포함하는 JQ 객체를 반환할 수 있습니다. 이 메소드는 querySelectorAll을 통해 구현됩니다.

$('.box')

DOM 요소, 임의의 배열, NodeList, JQ 객체를 전달하여 지정된 요소를 포함하는 JQ 객체를 반환할 수 있습니다.

$(document)

HTML 문자열을 전달하여 HTML을 기반으로 생성된 DOM을 포함하는 JQ 객체를 반환할 수 있습니다.

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

함수를 전달할 수 있으며, DOM 로드가 완료된 후 해당 함수가 호출됩니다.

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

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

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

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

두 개 이상의 객체를 전달하면 모든 객체의 속성이 첫 번째 객체에 추가되고 병합된 객체가 반환됩니다.

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

// 이때 첫 번째 객체와 반환값은 모두 { key1: val1, key2: val2, key3: val3 }가 됩니다.

JQ의 프로토타입 체인에서 메소드를 확장합니다.

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

// 그러면 다음과 같이 확장된 메소드를 사용할 수 있습니다.
$(document).customFunc()

객체나 배열을 직렬화하여 URL 매개변수에 사용할 수 있는 문자열을 반환합니다.

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

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

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

전달된 매개변수가 배열인 경우, 해당 배열 형식은 .serializeArray()의 반환 형식과 일치해야 합니다:

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

배열이나 객체를 순회합니다. 반환값은 첫 번째 매개변수인 순회된 배열이나 객체입니다.

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

콜백 함수 내의 this는 배열 또는 객체의 해당 위치의 값을 가리킵니다. 콜백 함수가 false를 반환하면 순회가 중지됩니다.

// 배열 순회
$.each(['a', 'b', 'c'], function (index, value) {
  console.log(index + ':' + value);
})

// 결과:
// 0:a
// 1:b
// 2:c

// 객체 순회
$.each({'name': 'mdui', 'lang': 'zh'}, function (key, value) {
  console.log(key + ':' + value);
})

// 결과:
// name:mdui
// lang:zh

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

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

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

배열에서 중복된 요소를 필터링합니다.

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

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

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

함수는 임의의 값을 반환할 수 있으며, 함수가 배열을 반환하면 펼쳐지고, null 또는 undefined를 반환하면 무시됩니다. 함수 내부의 this는 window 객체를 가리킵니다.

// 배열 순회
var result = $.map(['a', 'b', 'c'], function (value, index) {
  return index + value;
});
console.log(result); // ['0a', '1b', '2c']

// 콜백 함수가 배열을 반환하면 펼쳐집니다.
var result = $.map([1, 2, 3], function (value, index) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

// 객체 순회
var result = $.map({ name: 'mdui', password: '123456' }, function (value, key) {
  return key + ':' + value;
});
console.log(result); // ['name:mdui', 'password:123456']

부모 노드가 자식 노드를 포함하는지 여부를 판단하여 불리언 값을 반환합니다.

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

컬렉션 중 하나 이상의 요소가 매개변수와 일치하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

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

매개변수가 콜백 함수인 경우, 함수의 첫 번째 매개변수는 인덱스 위치, 두 번째 매개변수는 현재 요소이며, this는 현재 요소를 가리킵니다. 함수가 true를 반환하면 일치함을 의미하고, false를 반환하면 일치하지 않음을 의미합니다.

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

// 콜백 함수의 반환값으로 판단
$(document).is(function (index, element) {
  return element === document;
});
// true

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

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

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

함수의 첫 번째 매개변수는 요소의 인덱스 위치, 두 번째 매개변수는 현재 요소입니다. 함수 내의 this는 현재 요소를 가리킵니다.

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

현재 컬렉션을 순회하며 컬렉션의 각 요소에 대해 함수를 실행하고 함수의 반환값으로 구성된 새 컬렉션을 반환합니다. 함수가 null 또는 undefined를 반환하면 필터링됩니다.

함수의 첫 번째 매개변수는 요소의 인덱스 위치, 두 번째 매개변수는 현재 요소입니다. 함수의 this는 현재 요소를 가리킵니다.

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

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

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

$('div').eq(0); // 첫 번째 요소만 포함하는 JQ 객체 반환
$('div').eq(-1); // 마지막 요소만 포함하는 JQ 객체 반환
$('div').eq(-2); // 뒤에서 두 번째 요소만 포함하는 JQ 객체 반환

첫 번째 요소만 포함하는 컬렉션을 반환합니다.

$('div').first(); // 첫 번째 div만 포함하는 JQ 객체 반환

마지막 요소만 포함하는 컬렉션을 반환합니다.

$('div').last(); // 마지막 div만 포함하는 JQ 객체 반환

지정된 인덱스 위치의 요소를 반환합니다. 매개변수가 전달되지 않으면 컬렉션의 모든 요소로 구성된 배열을 반환합니다.

$('div').get(); // 모든 div 요소로 구성된 배열 반환
$('div').get(0); // 첫 번째 div 요소 반환
$('div').get(-1); // 마지막 div 요소 반환

매개변수가 전달되지 않으면 형제 요소에 대한 컬렉션의 첫 번째 요소의 인덱스 위치를 반환합니다.

CSS 선택자가 매개변수로 전달되면 CSS 선택자와 일치하는 요소에 대한 컬렉션의 첫 번째 요소의 인덱스 위치를 반환합니다.

DOM 요소가 전달되면 컬렉션에서 해당 DOM 요소의 인덱스 값을 반환합니다.

JQ 객체가 전달되면 현재 컬렉션에서 객체의 첫 번째 요소의 인덱스 위치를 반환합니다.

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

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

현재 컬렉션의 부분 집합을 반환합니다.

첫 번째 매개변수는 부분 집합의 시작 위치, 두 번째 매개변수는 부분 집합의 종료 위치입니다. 두 번째 매개변수가 전달되지 않으면 시작 위치부터 끝까지의 모든 요소가 포함됨을 의미합니다.

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

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

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

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

// .box를 포함하는 모든 div 요소 필터링
$('div').filter('.box');

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

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

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

// .box 클래스를 포함하지 않는 모든 div 요소 필터링
$('div').not('.box');

// 선택되지 않은 모든 옵션 필터링
$('#select option').not(function (index, element) {
  return element.selected;
});

컬렉션의 첫 번째 요소에 지정된 CSS 클래스가 포함되어 있는지 확인합니다.

// 첫 번째 div 요소에 .item이 포함되어 있는지 확인
$('div').hasClass('item')

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

CSS 클래스 이름을 반환하는 콜백 함수를 전달할 수도 있습니다. 함수의 첫 번째 매개변수는 인덱스 위치, 두 번째 매개변수는 해당 요소의 원래 CSS 클래스 이름이며, 함수 내의 this는 현재 요소를 가리킵니다.

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

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

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

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

CSS 클래스 이름을 반환하는 콜백 함수를 전달할 수도 있습니다. 함수의 첫 번째 매개변수는 인덱스 위치, 두 번째 매개변수는 해당 요소의 원래 CSS 클래스 이름이며, 함수 내의 this는 현재 요소를 가리킵니다.

매개변수가 전달되지 않으면 요소의 class 속성이 직접 제거됩니다.

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

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

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

// class 속성 직접 제거
$('div').removeClass()

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

CSS 클래스 이름을 반환하는 콜백 함수를 전달할 수도 있습니다. 함수의 첫 번째 매개변수는 인덱스 위치, 두 번째 매개변수는 해당 요소의 원래 CSS 클래스 이름이며, 함수 내의 this는 현재 요소를 가리킵니다.

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

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

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

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

// 첫 번째 요소의 속성 값 가져오기
$('input').prop('checked');

컬렉션의 모든 요소에 대한 속성 값을 설정할 수도 있습니다.

설정할 속성 값은 콜백 함수의 반환값일 수 있습니다. 콜백 함수의 첫 번째 매개변수는 요소의 인덱스 위치, 두 번째 매개변수는 해당 요소의 원래 속성 값이며, 함수 내의 this는 현재 요소를 가리킵니다.

속성 값 또는 콜백 함수의 반환값이 void 또는 undefined인 경우 원래 속성은 수정되지 않습니다.

객체를 전달하여 여러 속성을 동시에 설정할 수도 있습니다.

// 선택된 모든 요소의 속성 값 설정
$('input').prop('checked', true);

// 콜백 함수의 반환값을 통해 속성 값 설정
$('input').prop('checked', function (index, oldPropValue) {
  return true;
});

// 요소의 여러 속성 값을 동시에 설정
$('input').prop({
  checked: false,
  disabled: function (index, oldPropValue) {
    return true;
  }
});

컬렉션의 모든 요소에서 지정된 속성 값을 삭제합니다.

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

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

// 첫 번째 요소의 속성 값 가져오기
$('div').attr('username');

컬렉션의 모든 요소에 대한 속성 값을 설정할 수도 있습니다.

설정할 속성 값은 콜백 함수의 반환값일 수 있습니다. 콜백 함수의 첫 번째 매개변수는 요소의 인덱스 위치, 두 번째 매개변수는 해당 요소의 원래 속성 값이며, 함수 내의 this는 현재 요소를 가리킵니다.

속성 값 또는 콜백 함수의 반환값이 void 또는 undefined인 경우 원래 속성은 수정되지 않습니다. 속성 값 또는 콜백 함수의 반환값이 null인 경우 지정된 속성이 삭제됩니다.

객체를 전달하여 여러 속성을 동시에 설정할 수도 있습니다.

// 선택된 모든 요소의 속성 값 설정
$('div').attr('username', 'mdui');

// 콜백 함수의 반환값을 통해 속성 값 설정
$('div').attr('username', function (index, oldAttrValue) {
  return 'mdui';
});

// 요소의 여러 속성 값을 동시에 설정
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  }
});

컬렉션의 모든 요소에서 지정된 속성 값을 삭제합니다. 여러 속성 이름은 공백으로 구분할 수 있습니다.

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

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

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

요소가 <select multiple="multiple">인 경우 각 선택 항목을 포함하는 배열이 반환됩니다.

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

컬렉션의 모든 요소의 값을 설정할 수도 있습니다.

설정할 값은 문자열, 숫자, 문자열 배열, 콜백 함수일 수 있습니다.

값이 콜백 함수인 경우, 첫 번째 매개변수는 요소의 인덱스 위치, 두 번째 매개변수는 요소의 원래 값이며, 함수 내의 this는 현재 요소를 가리킵니다.

요소가 <input type="checkbox">, <input type="radio">, <option>인 경우 요소 값 또는 함수 반환값은 배열일 수 있으며, 이때 배열에 있는 값과 일치하는 요소는 선택되고 그렇지 않은 요소는 선택 취소됩니다.

값 또는 함수 반환값이 undefined인 경우 요소 값은 비어 있게 설정됩니다.

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

// 콜백 함수의 반환값을 통해 요소 값 설정
$('#input').val(function (index, oldValue) {
  return 'new value';
});

컬렉션의 모든 요소(후손 요소 포함)의 텍스트 내용을 가져옵니다.

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

컬렉션의 모든 요소의 텍스트를 설정할 수도 있습니다.

설정할 값은 문자열, 숫자, 불리언, 콜백 함수일 수 있습니다.

콜백 함수인 경우, 첫 번째 매개변수는 요소의 인덱스 위치, 두 번째 매개변수는 요소의 원래 텍스트 내용이며, 함수 내의 this는 현재 요소를 가리킵니다.

설정할 값 또는 콜백 함수 반환값이 undefined인 경우 해당 요소의 텍스트는 수정되지 않습니다.

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

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

컬렉션의 첫 번째 요소의 HTML 내용을 가져옵니다.

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

컬렉션의 모든 요소의 HTML 내용을 설정할 수도 있습니다.

설정할 값은 HTML 문자열, DOM 요소, 콜백 함수일 수 있습니다.

콜백 함수인 경우, 첫 번째 매개변수는 요소의 인덱스 위치, 두 번째 매개변수는 요소의 원래 HTML 내용이며, 함수 내의 this는 현재 요소를 가리킵니다.

설정할 값 또는 함수 반환값이 undefined인 경우 해당 요소의 HTML은 수정되지 않습니다.

// 선택된 요소의 HTML 설정
$('.box').html('<div>new html content</div>');

// 콜백 함수의 반환값을 통해 요소의 HTML 내용 설정
$('.box').html(function (index, oldHTMLContent) {
  return '<div>new html content</div>';
});

지정된 요소에서 데이터를 읽거나 저장합니다.

데이터를 저장할 때 값이 undefined이면 해당 요소의 데이터를 읽는 것과 같습니다. 즉, $.data(element, 'key', undefined)와 $.data(element, 'key')는 동일합니다.

참고: 이 메소드는 요소의 data-* 속성을 검색하지 않습니다.

// 지정된 요소에 데이터를 저장하고 저장된 값을 반환합니다.
$.data(document.body, 'layout', 'dark'); // dark 반환

// 지정된 요소에 여러 데이터를 동시에 저장
$.data(document.body, {
  primary: 'indigo',
  accent: 'pink',
});

// 지정된 요소에 저장된 데이터 가져오기
$.data(document.body, 'layout'); // dark 반환

// 지정된 요소에 저장된 모든 데이터 가져오기
$.data(document.body); //  { layout: 'dark', primary: 'indigo', accent: 'pink' } 반환

지정된 요소에 저장된 데이터를 제거합니다.

여러 키 이름은 공백으로 구분하거나 배열로 표시할 수 있습니다. 키 이름을 지정하지 않으면 요소의 모든 데이터가 제거됩니다.

// 요소에서 키 이름이 name인 데이터 제거
$.removeData(document.body, 'name');

// 요소에서 키 이름이 name1 및 name2인 데이터 제거. 다음 두 방법은 동일합니다:
$.removeData(document.body, 'name1 name2');
$.removeData(document.body, ['name1', 'name2']);

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

현재 컬렉션의 요소에서 데이터를 읽거나 저장합니다.

데이터를 저장할 때 값이 undefined이면 저장되지 않습니다.

참고: 이 메소드가 검색하는 데이터에는 요소의 data-* 속성이 포함됩니다.

// 현재 컬렉션의 요소에 데이터 저장
$('.box').data('layout', 'dark');

// 현재 컬렉션의 요소에 여러 데이터를 동시에 저장
$('.box').data({
  primary: 'indigo',
  accent: 'pink',
});

// 현재 컬렉션의 첫 번째 요소에 저장된 특정 데이터 가져오기
$('.box').data('layout'); // dark 반환

// 현재 컬렉션의 첫 번째 요소에 저장된 모든 데이터 가져오기
$('.box').data(); //  { layout: 'dark', primary: 'indigo', accent: 'pink' } 반환

현재 컬렉션의 요소에 저장된 데이터를 제거합니다.

여러 키 이름은 공백으로 구분하거나 배열로 표시할 수 있습니다. 키 이름을 지정하지 않으면 요소의 모든 데이터가 제거됩니다.

참고: 이 메소드는 .data() 메소드를 통해 설정된 데이터만 제거하며, data-* 속성의 데이터는 제거하지 않습니다.

// 키 이름이 name인 데이터 제거
$('.box').removeData('name');

// 키 이름이 name1 및 name2인 데이터 제거. 다음 두 방법은 동일합니다:
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

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

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

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

컬렉션의 모든 요소의 CSS 속성 값을 설정할 수도 있습니다.

속성 값은 문자열, 숫자 또는 문자열이나 숫자를 반환하는 콜백 함수일 수 있습니다.

속성 값이 콜백 함수인 경우, 첫 번째 매개변수는 요소의 인덱스 위치, 두 번째 매개변수는 요소의 원래 CSS 속성 값이며, 함수 내의 this는 현재 요소를 가리킵니다.

속성 값 또는 콜백 함수가 void, undefined, null을 반환하면 현재 요소의 CSS 속성 값은 수정되지 않습니다.

속성 값 또는 콜백 함수가 숫자를 반환하면 px가 단위로 추가됩니다. 해당 속성에 px를 단위로 사용할 수 없는 경우 해당 값이 직접 문자열로 변환됩니다.

키-값 쌍 객체를 전달하여 여러 CSS 속성을 동시에 설정할 수도 있습니다.

// 컬렉션의 모든 요소의 스타일 값 설정
$('.box').css('color', 'red')

// 콜백 함수의 반환값을 통해 모든 요소의 스타일 값 설정
$('.box').css('color', function (index, oldCSSValue) {
  return 'green';
});

// 객체를 전달하여 여러 스타일을 동시에 설정
$('.box').css({
  'background-color': 'white',
  color: function (index, oldCSSValue) {
    return 'blue';
  },
});

컬렉션의 첫 번째 요소의 너비(픽셀)를 가져옵니다. padding, border, margin 너비는 포함되지 않습니다.

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

컬렉션의 모든 요소의 너비를 설정할 수도 있습니다(padding, border, margin 너비 제외).

값은 단위가 포함된 문자열, 숫자 또는 단위가 포함된 문자열이나 숫자를 반환하는 콜백 함수일 수 있습니다.

콜백 함수의 첫 번째 매개변수는 요소의 인덱스 위치, 두 번째 매개변수는 요소의 원래 너비 값이며, 함수 내의 this는 현재 요소를 가리킵니다.

값 또는 콜백 함수의 반환값이 숫자인 경우 자동으로 px가 단위로 추가됩니다.

값 또는 콜백 함수의 반환값이 null 또는 undefined인 경우 요소의 너비는 수정되지 않습니다.

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

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

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

컬렉션의 첫 번째 요소의 높이(픽셀)를 가져옵니다. padding, border, margin 높이는 포함되지 않습니다.

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

컬렉션의 모든 요소의 높이를 설정할 수도 있습니다(padding, border, margin 높이 제외).

값은 단위가 포함된 문자열, 숫자 또는 단위가 포함된 문자열이나 숫자를 반환하는 콜백 함수일 수 있습니다.

콜백 함수의 첫 번째 매개변수는 요소의 인덱스 위치, 두 번째 매개변수는 요소의 원래 높이 값이며, 함수 내의 this는 현재 요소를 가리킵니다.

값 또는 콜백 함수의 반환값이 숫자인 경우 자동으로 px가 단위로 추가됩니다.

값 또는 콜백 함수의 반환값이 null 또는 undefined인 경우 요소의 높이는 수정되지 않습니다.

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

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

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

컬렉션의 첫 번째 요소의 너비(픽셀)를 가져옵니다. padding을 포함하고 border, margin 너비는 포함하지 않습니다.

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

컬렉션의 모든 요소의 너비를 설정할 수도 있습니다(padding 포함, border, margin 너비 제외).

값은 단위가 포함된 문자열, 숫자 또는 단위가 포함된 문자열이나 숫자를 반환하는 콜백 함수일 수 있습니다.

콜백 함수의 첫 번째 매개변수는 요소의 인덱스 위치, 두 번째 매개변수는 요소의 원래 너비 값이며, 함수 내의 this는 현재 요소를 가리킵니다.

값 또는 콜백 함수의 반환값이 숫자인 경우 자동으로 px가 단위로 추가됩니다.

값 또는 콜백 함수의 반환값이 null 또는 undefined인 경우 요소의 너비는 수정되지 않습니다.

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

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

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

컬렉션의 첫 번째 요소의 높이(픽셀)를 가져옵니다. padding을 포함하고 border, margin 높이는 포함하지 않습니다.

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

컬렉션의 모든 요소의 높이를 설정할 수도 있습니다(padding 포함, border, margin 높이 제외).

값은 단위가 포함된 문자열, 숫자 또는 단위가 포함된 문자열이나 숫자를 반환하는 콜백 함수일 수 있습니다.

콜백 함수의 첫 번째 매개변수는 요소의 인덱스 위치, 두 번째 매개변수는 요소의 원래 높이 값이며, 함수 내의 this는 현재 요소를 가리킵니다.

값 또는 콜백 함수의 반환값이 숫자인 경우 자동으로 px가 단위로 추가됩니다.

값 또는 콜백 함수의 반환값이 null 또는 undefined인 경우 요소의 높이는 수정되지 않습니다.

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

// 값이 숫자인 경우 기본 단위는 px입니다.
$('.box').innerHeight(10);

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

컬렉션의 첫 번째 요소의 너비(픽셀)를 가져옵니다. padding, border 너비를 포함하고 margin 너비는 포함하지 않습니다. 매개변수 true를 전달하여 너비에 margin 너비가 포함되도록 할 수 있습니다.

// padding, border 너비 포함
$('.box').outerWidth();

// padding, border, margin 너비 포함
$('.box').outerWidth(true);

컬렉션의 모든 요소의 너비를 설정할 수도 있습니다(padding, border 포함, margin 너비 제외. 두 번째 매개변수에 true를 전달하여 너비에 margin 너비가 포함되도록 할 수 있습니다).

첫 번째 매개변수는 단위가 포함된 문자열, 숫자 또는 단위가 포함된 문자열이나 숫자를 반환하는 콜백 함수일 수 있습니다.

콜백 함수의 첫 번째 매개변수는 요소의 인덱스 위치, 두 번째 매개변수는 요소의 원래 너비이며, 함수 내의 this는 현재 요소를 가리킵니다.

값 또는 콜백 함수의 반환값이 숫자인 경우 자동으로 px가 단위로 추가됩니다.

값 또는 콜백 함수의 반환값이 null 또는 undefined인 경우 요소의 너비는 수정되지 않습니다.

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

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

// 두 번째 매개변수가 true이면 너비에 margin이 포함됩니다.
$('.box').outerWidth(10, true);

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

컬렉션의 첫 번째 요소의 높이(픽셀)를 가져옵니다. padding, border 높이를 포함하고 margin 높이는 포함하지 않습니다. 매개변수 true를 전달하여 높이에 margin 높이가 포함되도록 할 수 있습니다.

// padding, border 높이 포함
$('.box').outerHeight();

// padding, border, margin 높이 포함
$('.box').outerHeight(true);

컬렉션의 모든 요소의 높이를 설정할 수도 있습니다(padding, border 포함, margin 높이 제외. 두 번째 매개변수에 true를 전달하여 높이에 margin 높이가 포함되도록 할 수 있습니다).

첫 번째 매개변수는 단위가 포함된 문자열, 숫자 또는 단위가 포함된 문자열이나 숫자를 반환하는 콜백 함수일 수 있습니다.

콜백 함수의 첫 번째 매개변수는 요소의 인덱스 위치, 두 번째 매개변수는 요소의 원래 높이이며, 함수 내의 this는 현재 요소를 가리킵니다.

값 또는 콜백 함수의 반환값이 숫자인 경우 자동으로 px가 단위로 추가됩니다.

값 또는 콜백 함수의 반환값이 null 또는 undefined인 경우 요소의 높이는 수정되지 않습니다.

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

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

// 두 번째 매개변수가 true이면 높이에 margin이 포함됩니다.
$('.box').outerHeight(10, true);

// 콜백 함수의 반환값을 통해 높이 설정
$('.box').outerHeight(function (index, oldWidth) {
  return 10;
});

컬렉션의 모든 요소를 숨깁니다.

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

컬렉션의 모든 요소를 표시합니다.

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

컬렉션의 모든 요소의 표시 상태를 토글합니다.

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

document에 대한 컬렉션의 첫 번째 요소의 좌표를 가져옵니다.

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

document에 대한 컬렉션의 모든 요소의 좌표를 설정할 수도 있습니다.

매개변수는 top 및 left 속성을 포함하는 객체이거나 이 형식의 객체를 반환하는 콜백 함수입니다.

매개변수가 콜백 함수인 경우, 첫 번째 매개변수는 요소의 인덱스 위치, 두 번째 매개변수는 요소의 원래 좌표이며, 함수 내의 this는 현재 요소를 가리킵니다.

매개변수에서 top 또는 left 값이 undefined인 경우 해당 값은 수정되지 않습니다.

// 컬렉션의 모든 요소의 좌표 설정
$('.box').offset({ top: 20, left: 30 });

// 콜백 함수의 반환값을 통해 요소의 좌표 설정
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});

컬렉션의 첫 번째 요소의 위치 지정을 위한 부모 요소를 반환합니다. 즉, 부모 요소 중 첫 번째 position이 relative 또는 absolute인 요소입니다.

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

부모 요소에 대한 컬렉션의 첫 번째 요소의 오프셋을 가져옵니다.

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

현재 컬렉션의 모든 요소 중에서 CSS 선택자에 따라 지정된 후손 노드의 컬렉션을 찾습니다.

// #box의 후손 노드 중 .box를 포함하는 노드 컬렉션 찾기
$('#box').find('.box')

현재 컬렉션의 모든 요소 중에서 직접 자식 요소로 구성된 컬렉션을 가져옵니다.

자식 요소를 필터링하기 위해 CSS 선택자를 매개변수로 전달할 수 있습니다.

// #box의 모든 직접 자식 요소 찾기
$('#box').children();

// #box의 모든 직접 자식 요소 중 .box를 포함하는 요소 컬렉션 찾기
$('#box').children('.box')

현재 컬렉션의 모든 요소 중에서 지정된 자식 요소를 포함하는 요소를 필터링합니다.

매개변수는 CSS 선택자 또는 DOM 요소일 수 있습니다.

// ul을 포함하는 li에 배경색 추가
$('li').has('ul').css('background-color', 'red');

현재 컬렉션에 있는 모든 요소의 직접 부모 요소 컬렉션을 가져옵니다.

해당 매개변수와 일치하는 부모 요소 컬렉션만 반환하도록 CSS 선택자를 매개변수로 전달할 수 있습니다.

// .box 요소의 직접 부모 요소 반환
$('.box').parent();

// .box 요소의 직접 부모 요소 중 .parent 클래스를 포함하는 요소 반환
$('.box').parent('.parent');

현재 컬렉션에 있는 모든 요소의 조상 요소 컬렉션을 가져옵니다.

해당 매개변수와 일치하는 조상 요소 컬렉션만 반환하도록 CSS 선택자를 매개변수로 전달할 수 있습니다.

// span 요소의 모든 조상 요소 반환
$('span').parents();

// span 요소의 조상 요소 중 p 요소인 모든 요소 반환
$('span').parents('p');

첫 번째 매개변수와 일치하는 요소를 만날 때까지(일치하는 요소 제외) 현재 컬렉션의 각 요소의 모든 부모 요소를 가져옵니다.

첫 번째 매개변수는 CSS 선택자, DOM 요소, JQ 객체일 수 있습니다.

두 번째 매개변수를 전달할 수 있으며, 이는 CSS 선택자여야 하며 해당 매개변수와 일치하는 요소만 반환됨을 나타냅니다.

매개변수가 지정되지 않으면 모든 조상 요소가 일치하게 되며, 이는 .parents()와 동일한 효과를 가집니다.

// .item 요소의 모든 조상 요소 가져오기
$('.item').parentsUntil();

// .parent 요소를 만날 때까지 .item 요소의 모든 부모 요소 찾기
$('.item').parentsUntil('.parent');

// .parent 요소를 만날 때까지 .item 요소의 조상 요소 중 div 요소인 모든 요소 가져오기
$('.item').parentsUntil('.parent', 'div');

현재 컬렉션의 모든 요소의 바로 이전 형제 요소로 구성된 컬렉션을 가져옵니다.

해당 매개변수와 일치하는 형제 요소의 컬렉션만 가져오기 위해 CSS 선택자를 매개변수로 전달할 수 있습니다.

// .box 요소의 이전 요소 컬렉션 가져오기
$('.box').prev();

// .box 요소의 이전 div 요소 컬렉션 가져오기
$('.box').prev('div');

현재 컬렉션의 모든 요소의 앞에 있는 모든 형제 요소로 구성된 컬렉션을 가져옵니다.

해당 매개변수와 일치하는 형제 요소의 컬렉션만 가져오기 위해 CSS 선택자를 매개변수로 전달할 수 있습니다.

// .box 요소 앞의 모든 형제 요소 가져오기
$('.box').prevAll();

// .box 요소 앞의 모든 .selected가 포함된 형제 요소 가져오기
$('.box').prevAll('.selected');

첫 번째 매개변수와 일치하는 요소를 만날 때까지(일치하는 요소 제외) 현재 컬렉션의 각 요소 앞에 있는 모든 형제 요소를 가져옵니다.

첫 번째 매개변수는 CSS 선택자, DOM 요소, JQ 객체일 수 있습니다.

두 번째 매개변수를 전달할 수 있으며, 이는 CSS 선택자여야 하며 해당 매개변수와 일치하는 요소만 반환됨을 나타냅니다.

// .box 요소 앞의 모든 형제 요소 가져오기
$('.box').prevUntil();

// .until 요소를 만날 때까지 .box 요소 앞의 모든 형제 요소 가져오기
$('.box').prevUntil('.until');

// .until 요소를 만날 때까지 .box 요소 앞의 형제 div 요소 가져오기
$('.box').prevUntil('.until', 'div');

현재 컬렉션의 모든 요소의 바로 다음 형제 요소로 구성된 컬렉션을 가져옵니다.

해당 매개변수와 일치하는 형제 요소의 컬렉션만 가져오기 위해 CSS 선택자를 매개변수로 전달할 수 있습니다.

// .box 요소의 다음 요소 컬렉션 가져오기
$('.box').next();

// .box 요소의 다음 div 요소 컬렉션 가져오기
$('.box').next('div');

현재 컬렉션의 모든 요소의 뒤에 있는 모든 형제 요소로 구성된 컬렉션을 가져옵니다.

해당 매개변수와 일치하는 형제 요소의 컬렉션만 가져오기 위해 CSS 선택자를 매개변수로 전달할 수 있습니다.

// .box 요소 뒤의 모든 형제 요소 가져오기
$('.box').nextAll();

// .box 요소 뒤의 모든 .selected가 포함된 형제 요소 가져오기
$('.box').nextAll('.selected');

첫 번째 매개변수와 일치하는 요소를 만날 때까지(일치하는 요소 제외) 현재 컬렉션의 각 요소 뒤에 있는 모든 형제 요소를 가져옵니다.

첫 번째 매개변수는 CSS 선택자, DOM 요소, JQ 객체일 수 있습니다.

두 번째 매개변수를 전달할 수 있으며, 이는 CSS 선택자여야 하며 해당 매개변수와 일치하는 요소만 반환됨을 나타냅니다.

// .box 요소 뒤의 모든 형제 요소 가져오기
$('.box').nextUntil();

// .until 요소를 만날 때까지 .box 요소 뒤의 모든 형제 요소 가져오기
$('.box').nextUntil('.until');

// .until 요소를 만날 때까지 .box 요소 뒤의 형제 div 요소 가져오기
$('.box').nextUntil('.until', 'div');

현재 요소부터 위로 차례로 일치하는지 확인하고 가장 먼저 일치하는 요소를 반환합니다.

매개변수는 CSS 선택자, DOM 요소, JQ 객체일 수 있습니다.

// .box 요소의 부모 요소 중 가장 가까운 .parent 요소 가져오기
$('.box').closest('.parent');

현재 컬렉션에 있는 각 요소의 형제 요소를 가져옵니다.

해당 매개변수와 일치하는 형제 요소만 가져오기 위해 CSS 선택자를 매개변수로 전달할 수 있습니다.

// .box 요소의 모든 형제 요소 가져오기
$('.box').siblings();

// .box 요소의 모든 형제 요소 중 .selected가 포함된 요소 가져오기
$('.box').siblings('.selected');

현재 컬렉션에 요소를 추가합니다.

매개변수는 HTML 문자열, CSS 선택자, JQ 객체, DOM 요소, DOM 요소 배열, NodeList일 수 있습니다.

// .selected가 포함된 요소를 현재 컬렉션에 추가
$('.box').add('.selected');

현재 요소의 모든 자식 요소를 제거합니다.

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

DOM에서 현재 컬렉션의 요소를 제거합니다.

해당 매개변수와 일치하는 요소만 제거하도록 CSS 선택자를 매개변수로 전달할 수 있습니다.

// 모든 p 요소 제거
$('p').remove();

// 모든 .box가 포함된 p 요소 제거
$('p').remove('.box');

현재 컬렉션의 요소 내부 앞에 지정된 내용을 삽입합니다.

매개변수 타입은 HTML 문자열, DOM 요소, DOM 요소 배열, JQ 객체일 수 있습니다. 여러 매개변수 전달을 지원합니다.

HTML 문자열, DOM 요소, DOM 요소 배열, JQ 객체를 반환하는 콜백 함수를 전달할 수도 있습니다. 함수의 첫 번째 매개변수는 현재 요소의 인덱스 위치, 두 번째 매개변수는 요소의 원래 HTML이며, 함수 내의 this는 현재 요소를 가리킵니다.

이 메소드는 원본 컬렉션을 반환합니다.

// 하나의 요소 삽입
$('<p>I would like to say: </p>').prepend('<b>Hello</b>');
// 결과:<p><b>Hello</b>I would like to say: </p>

// 여러 요소 삽입
$('<p>I would like to say: </p>').prepend('<b>Hello</b>', '<b>World</b>');
// 결과:<p><b>Hello</b><b>World</b>I would like to say: </p>

// 콜백 함수를 통해 하나의 요소 삽입
$('<p>Hello</p>').prepend(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// 결과:<p><b>Hello0</b>Hello</p>

현재 컬렉션의 요소를 지정된 요소 내부의 앞에 추가합니다.

매개변수는 CSS 선택자, HTML 문자열, DOM 요소, DOM 요소 배열, JQ 객체일 수 있습니다.

이 메소드는 원본 컬렉션을 반환합니다.

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

// 결과:[ <div><div>Hello</div>I would like to say: </div> ]

현재 컬렉션의 요소 내부 뒤에 지정된 내용을 삽입합니다.

매개변수 타입은 HTML 문자열, DOM 요소, DOM 요소 배열, JQ 객체일 수 있습니다. 여러 매개변수 전달을 지원합니다.

HTML 문자열, DOM 요소, DOM 요소 배열, JQ 객체를 반환하는 콜백 함수를 전달할 수도 있습니다. 함수의 첫 번째 매개변수는 현재 요소의 인덱스 위치, 두 번째 매개변수는 요소의 원래 HTML이며, 함수 내의 this는 현재 요소를 가리킵니다.

이 메소드는 원본 컬렉션을 반환합니다.

// 하나의 요소 삽입
$('<p>I would like to say: </p>').append('<b>Hello</b>');
// 결과:<p>I would like to say: <b>Hello</b></p>

// 여러 요소 삽입
$('<p>I would like to say: </p>').append('<b>Hello</b>', '<b>World</b>');
// 결과:<p>I would like to say: <b>Hello</b><b>World</b></p>

// 콜백 함수를 통해 하나의 요소 삽입
$('<p>Hello</p>').append(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// 결과:<p>Hello<b>Hello0</b></p>

현재 컬렉션의 요소를 지정된 요소 내부의 뒤에 추가합니다.

매개변수는 CSS 선택자, HTML 문자열, DOM 요소, DOM 요소 배열, JQ 객체일 수 있습니다.

이 메소드는 원본 컬렉션을 반환합니다.

$('<div>Hello</div>').appendTo('<div>I would like to say: </div>')
// 결과:<div>I would like to say: <div>Hello</div></div>

현재 컬렉션의 요소 뒤에 지정된 내용을 형제 노드로 삽입합니다.

매개변수 타입은 HTML 문자열, DOM 요소, DOM 요소 배열, JQ 객체일 수 있습니다. 여러 매개변수 전달을 지원합니다.

HTML 문자열, DOM 요소, DOM 요소 배열, JQ 객체를 반환하는 콜백 함수를 전달할 수도 있습니다. 함수의 첫 번째 매개변수는 현재 요소의 인덱스 위치, 두 번째 매개변수는 요소의 원래 HTML이며, 함수 내의 this는 현재 요소를 가리킵니다.

이 메소드는 원본 컬렉션을 반환합니다.

// 하나의 요소 삽입
$('<p>I would like to say: </p>').after('<b>Hello</b>')
// 결과:<p>I would like to say: </p><b>Hello</b>

// 여러 요소 삽입
$('<p>I would like to say: </p>').after('<b>Hello</b>', '<b>World</b>')
// 결과:<p>I would like to say: </p><b>Hello</b><b>World</b>

// 콜백 함수를 통해 하나의 요소 삽입
$('<p>Hello</p>').after(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// 결과:<p>Hello</p><b>Hello0</b>

현재 컬렉션의 요소를 대상 요소 뒤에 형제 요소로 삽입합니다.

현재 컬렉션의 요소가 페이지에 이미 존재하는 요소인 경우 복제되지 않고 이동됩니다. 대상이 여러 개인 경우 현재 컬렉션의 요소를 복제하여 각 대상 요소 뒤에 추가합니다.

HTML 문자열, CSS 선택자, DOM 요소, DOM 요소 배열, JQ 객체를 매개변수로 전달하여 대상 요소를 지정할 수 있습니다.

$('<b>Hello</b>').insertAfter('<p>I would like to say: </p>');
// 결과:<p>I would like to say: </p><b>Hello</b>

현재 컬렉션의 요소 앞에 지정된 내용을 형제 노드로 삽입합니다.

매개변수 타입은 HTML 문자열, DOM 요소, DOM 요소 배열, JQ 객체일 수 있습니다. 여러 매개변수 전달을 지원합니다.

HTML 문자열, DOM 요소, DOM 요소 배열, JQ 객체를 반환하는 콜백 함수를 전달할 수도 있습니다. 함수의 첫 번째 매개변수는 현재 요소의 인덱스 위치, 두 번째 매개변수는 요소의 원래 HTML이며, 함수 내의 this는 현재 요소를 가리킵니다.

이 메소드는 원본 컬렉션을 반환합니다.

// 하나의 요소 삽입
$('<p>I would like to say: </p>').before('<b>Hello</b>')
// 결과:<b>Hello</b><p>I would like to say: </p>

// 여러 요소 삽입
$('<p>I would like to say: </p>').before('<b>Hello</b>', '<b>World</b>')
// 결과:<b>Hello</b><b>World</b><p>I would like to say: </p>

// 콜백 함수를 통해 하나의 요소 삽입
$('<p>Hello</p>').before(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// 결과:<b>Hello0</b><p>Hello</p>

현재 컬렉션의 요소를 대상 요소 앞에 형제 요소로 삽입합니다.

현재 컬렉션의 요소가 페이지에 이미 존재하는 요소인 경우 복제되지 않고 이동됩니다. 대상이 여러 개인 경우 현재 컬렉션의 요소를 복제하여 각 대상 요소 뒤에 추가합니다.

HTML 문자열, CSS 선택자, DOM 요소, DOM 요소 배열, JQ 객체를 매개변수로 전달하여 대상 요소를 지정할 수 있습니다.

$('<p>I would like to say: </p>').insertBefore('<b>Hello</b>');
// 결과:<p>I would like to say: </p><b>Hello</b>

현재 컬렉션의 요소를 지정된 요소로 교체합니다.

매개변수는 HTML 문자열, DOM 요소, DOM 요소 배열, JQ 객체일 수 있습니다.

HTML 문자열, DOM 요소, DOM 요소 배열, JQ 객체를 반환하는 콜백 함수를 전달할 수도 있습니다. 함수의 첫 번째 매개변수는 현재 요소의 인덱스 위치, 두 번째 매개변수는 요소의 원래 HTML이며, 함수 내의 this는 현재 요소를 가리킵니다.

이 메소드는 원본 컬렉션, 즉 교체된 컬렉션을 반환합니다.

// 모든 .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 요소를 클릭했습니다.');
});

각 일치하는 요소의 특정 이벤트에 이벤트 처리기 함수를 바인딩합니다. 그러나 이벤트는 한 번만 트리거됩니다.

이 메소드의 용법은 .on()과 동일하므로 더 이상 예시를 들지 않겠습니다.

컬렉션의 각 요소에서 바인딩된 이벤트를 해제합니다. 구체적인 용법은 아래 예시를 참조하세요.

// 모든 바인딩된 이벤트 처리기 함수 해제
$('.box').off();

// 바인딩된 지정된 이벤트 해제
$('.box').off('click');

// 여러 바인딩된 이벤트를 동시에 해제
$('.box').off('click focus');

// 바인딩된 지정된 이벤트 처리기 함수 해제
$('.box').off('click', callback);

// 이벤트 위임을 통해 바인딩된 이벤트 해제
$(document).off('click', '.box');

// 이벤트 위임을 통해 바인딩된 지정된 이벤트 처리기 함수 해제
$(document).off('click', '.box', callback);

// 여러 이벤트 처리기 함수를 동시에 해제
$('.box').off({
  'click': callback1,
  'focus': callback2,
});

// 이벤트 위임을 통해 바인딩된 여러 이벤트 처리기 함수를 동시에 해제
$(document).off({
  'click': callback1,
  'focus': callback2,
}, '.box');

// 이벤트 이름은 네임스페이스 사용을 지원하며, 아래 용법은 .myPlugin으로 끝나는 모든 이벤트를 해제합니다.
$(document).off('.myPlugin');

지정된 이벤트를 트리거합니다. 구체적인 용법은 아래 예시를 참조하세요.

// 지정된 이벤트 트리거
$('.box').trigger('click');

// 이벤트 트리거 시 매개변수 전달
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });

Ajax 요청에 대한 글로벌 구성 매개변수를 설정합니다.

$.ajaxSetup({
  // 글로벌 AJAX 이벤트 트리거 기본 금지
  global: false,

  // POST 요청 기본 사용
  method: 'POST'
});

자세한 매개변수 목록은 아래의 AJAX 매개변수를 참조하세요.

AJAX 요청을 보내고 Promise를 반환합니다.

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

자세한 매개변수 목록은 아래의 AJAX 매개변수를 참조하세요.

글로벌 AJAX 이벤트.

AJAX 요청이 시작될 때 함수 실행

$(document).ajaxStart(function (event, xhr, options) {
  // xhr: XMLHttpRequest 객체
  // options: AJAX 요청의 구성 매개변수
});

글로벌 AJAX 이벤트.

AJAX 요청이 성공했을 때 함수 실행

$(document).ajaxSuccess(function (event, xhr, options, data) {
  // xhr: XMLHttpRequest 객체
  // options: AJAX 요청의 구성 매개변수
  // data: AJAX 요청이 반환한 데이터
});

글로벌 AJAX 이벤트.

AJAX 요청에서 오류가 발생했을 때 함수 실행

$(document).ajaxError(function (event, xhr, options) {
  // xhr: XMLHttpRequest 객체
  // options: AJAX 요청의 구성 매개변수
});

글로벌 AJAX 이벤트.

AJAX 요청이 완료되었을 때 함수 실행

$(document).ajaxComplete(function (event, xhr, options) {
  // xhr: XMLHttpRequest 객체
  // options: AJAX 요청의 구성 매개변수
});

요청 방식

포함: GET, POST, PUT, PATCH, HEAD, OPTIONS, DELETE

Headers에 추가될 데이터. beforeSend 콜백 함수에서 이 값을 재작성할 수 있습니다.

값이 문자열이거나 null인 필드는 전송되고, 값이 undefined인 필드는 제거됩니다.

XMLHttpRequest 객체에 설정된 데이터

$.ajax({
  url: '교차 도메인 URL',
  xhrFields: {
    withCredentials: true
  }
});

HTTP 상태 코드와 함수로 구성된 객체

$.ajax({
  statusCode: {
    404: function (xhr, textStatus) {
      alert('반환 상태 코드가 404일 때 호출됨');
    },
    200: function (data, textStatus, xhr) {
      alert('반환 상태 코드가 200일 때 호출됨');
    }
  }
});

상태 코드가 200 - 299 사이이거나 상태 코드가 304인 경우 요청 성공을 의미하며, 함수 매개변수는 success 콜백의 매개변수와 동일합니다. 그렇지 않으면 요청 실패를 의미하며, 함수 매개변수는 error 콜백의 매개변수와 동일합니다.

서버가 반환하는 데이터 타입

포함: text, json

요청을 보내기 전에 호출됩니다. false를 반환하면 AJAX 요청이 취소됩니다.

$.ajax({
  beforeSend: function (xhr) {
    // xhr: XMLHttpRequest 객체
  }
});

요청 성공 후 호출됩니다.

$.ajax({
  success: function (data, textStatus, xhr) {
    // data: AJAX 요청이 반환한 데이터
    // textStatus: 성공 코드가 포함된 문자열
    // xhr: XMLHttpRequest 객체
  }
});

요청 오류 발생 시 호출됩니다.

$.ajax({
  error: function (xhr, textStatus) {
    // xhr: XMLHttpRequest 객체
    // textStatus: 성공 코드가 포함된 문자열
  }
});

요청 완료 후 호출됩니다.

$.ajax({
  complete: function (xhr, textStatus) {
    // xhr: XMLHttpRequest 객체
    // textStatus: 성공 코드가 포함된 문자열
  }
});

현재 요소를 강제로 다시 그립니다.

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

현재 요소의 transition-duration 속성을 설정합니다.

단위가 포함된 시간 값일 수도 있고 단위가 없을 수도 있습니다. 단위가 없으면 자동으로 ms가 단위로 추가됩니다.

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

현재 요소에 transitionend 이벤트 콜백을 추가합니다.

콜백 함수의 매개변수는 transitionend 이벤트 객체이며, 함수 내의 this는 현재 요소를 가리킵니다.

$('.box').transitionEnd(function () {
  console.log('.box 요소의 transitionend 이벤트가 트리거되었습니다.');
})

현재 요소의 transform 속성을 설정합니다.

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

현재 요소의 transform-origin 속성을 설정합니다.

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

현재 요소 및 해당 자식 요소 내에 등록된 초기화 함수를 실행합니다.

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

오버레이를 생성하여 표시하고 오버레이 레이어의 JQ 객체를 반환합니다.

오버레이 레이어의 z-index 스타일을 나타내는 정수 매개변수를 전달할 수 있으며, 기본값은 2000입니다.

$.showOverlay();

오버레이 레이어를 숨깁니다.

오버레이 레이어를 표시하기 위해 $.showOverlay()를 여러 번 호출한 경우 오버레이 레이어를 숨기려면 동일한 횟수만큼 $.hideOverlay()를 호출해야 합니다. true 매개변수를 전달하여 오버레이 레이어를 강제로 숨길 수 있습니다.

$.hideOverlay();

페이지를 잠가 페이지 스크롤을 금지합니다.

$.lockScreen();

페이지 잠금을 해제합니다.

페이지를 잠그기 위해 $.lockScreen()을 여러 번 호출한 경우 페이지 잠금을 해제하려면 동일한 횟수만큼 $.unlockScreen()을 호출해야 합니다. true 매개변수를 전달하여 페이지 잠금을 강제로 해제할 수 있습니다.

$.unlockScreen();

함수 스로틀

함수를 매개변수로 입력받으며, 함수의 첫 번째 매개변수는 실행할 함수, 두 번째 매개변수는 지연 시간(밀리초)입니다.

$.throttle(function () {
  console.log('이 함수는 최대 100ms마다 한 번 실행됩니다.');
}, 100)

글로벌 고유 ID를 생성합니다.

$.guid();

하나의 매개변수를 전달할 수 있습니다. 해당 매개변수 값에 해당하는 guid가 존재하지 않으면 새로운 guid를 생성하여 반환하고, 존재하면 기존 guid를 반환합니다.

// 아래 두 줄의 코드 반환값은 동일합니다.
$.guid('test');
$.guid('test');