jQuery 치트시트

모든 도구

무료

검색하고 인쇄할 수 있는 jQuery 참조 자료——선택자, DOM 조작, 이벤트, 효과, 순회, AJAX, 폼 헬퍼. 무료.

Selectors

$('#id')

Select an element by its id

$('.class')

Select all elements with a class

$('div')

Select all elements of a tag name

$('*')

Select every element in the page

$('[name="email"]')

Select by an attribute value

$('a[href^="https"]')

Attribute starts-with selector

$('ul li:first')

First matched element

$('ul li:last')

Last matched element

$('tr:eq(2)')

Element at a zero-based index

$('li:not(.done)')

Exclude elements matching a selector

$(':checked')

All checked checkboxes/radios

$('div:visible')

Only currently visible elements

$('ul li')

Descendant combinator

$('ul > li')

Direct child combinator

Document ready & DOM

$(function () { /* ... */ });

Run code once the DOM is ready

$(document).ready(fn)

Explicit document-ready handler

$(window).on('load', fn)

Run after all assets have loaded

$(this)

Wrap the current context element

$(el)

Wrap a raw DOM node in jQuery

$('<div class="box"></div>')

Create a new element from HTML

$('#box')[0]

Get the underlying DOM node

$('#box').get(0)

Get the DOM node via .get()

$('.item').length

Count the matched elements

$('#box').is(':visible')

Test a selector against the set

DOM manipulation

$('#box').html('<b>Hi</b>')

Set the inner HTML

$('#box').text('Hello')

Set the text content (escaped)

$('#name').val('Ada')

Set a form field value

$('#list').append('<li>x</li>')

Insert content at the end

$('#list').prepend('<li>x</li>')

Insert content at the start

$('#box').before('<hr>')

Insert content before the element

$('#box').after('<hr>')

Insert content after the element

$('#box').remove()

Remove the element from the DOM

$('#box').empty()

Remove all child nodes

$('#box').clone()

Create a copy of the element

$('#box').wrap('<div>')

Wrap the element in new HTML

$('#box').replaceWith('<p>')

Replace the element entirely

Attributes & CSS

$('#img').attr('src')

Get an attribute value

$('#img').attr('alt', 'Logo')

Set an attribute value

$('#cb').prop('checked')

Get a DOM property (checked/disabled)

$('#cb').prop('checked', true)

Set a DOM property

$('#img').removeAttr('title')

Remove an attribute

$('.box').addClass('active')

Add a CSS class

$('.box').removeClass('active')

Remove a CSS class

$('.box').toggleClass('open')

Toggle a CSS class on/off

$('.box').hasClass('active')

Test if a class is present

$('#box').css('color', 'red')

Set a single CSS property

$('#box').css({top: 0, left: 0})

Set multiple CSS properties

$('#box').width()

Get the computed width in pixels

$('#box').height()

Get the computed height in pixels

Events

$('#btn').on('click', fn)

Attach an event handler

$('#btn').off('click')

Detach event handlers

$('#btn').click(fn)

Shorthand click handler

$('#form').submit(fn)

Handle form submission

$('#sel').change(fn)

Handle value changes

$('#in').keyup(fn)

Handle key-up in a field

$('#list').on('click', '.item', fn)

Delegated event for dynamic children

$('#btn').trigger('click')

Programmatically fire an event

$('#btn').one('click', fn)

Run a handler at most once

e.preventDefault()

Stop the default browser action

e.stopPropagation()

Stop the event from bubbling

e.target

The element that triggered the event

Effects & animation

$('#box').show()

Display a hidden element

$('#box').hide()

Hide an element

$('#box').toggle()

Toggle visibility

$('#box').fadeIn(300)

Fade an element in

$('#box').fadeOut(300)

Fade an element out

$('#box').fadeTo(300, 0.5)

Fade to a given opacity

$('#box').slideUp()

Slide an element up (collapse)

$('#box').slideDown()

Slide an element down (expand)

$('#box').slideToggle()

Toggle a slide animation

$('#box').animate({left: 100})

Animate CSS properties

$('#box').stop()

Stop the current animation

$('#box').delay(500).fadeIn()

Delay the next queued effect

Traversing

$('#box').find('.item')

Find descendants matching a selector

$('#box').parent()

Get the direct parent

$('#box').parents('.row')

Get all ancestors matching a selector

$('#box').closest('.row')

Nearest matching ancestor (or self)

$('#box').children()

Get the direct children

$('#box').siblings()

Get sibling elements

$('#box').next()

Get the next sibling

$('#box').prev()

Get the previous sibling

$('.item').each(fn)

Iterate over each matched element

$('.item').filter('.on')

Reduce the set by a selector

$('.item').first()

Reduce the set to the first element

$('.item').eq(1)

Reduce the set to one index

AJAX

$.ajax({url: '/api', method: 'GET'})

Full-control AJAX request

$.get('/api', fn)

Shorthand HTTP GET request

$.post('/api', data, fn)

Shorthand HTTP POST request

$.getJSON('/api.json', fn)

GET request expecting JSON

$('#box').load('/part.html')

Load HTML into an element

$.ajax({dataType: 'json'})

Set the expected response type

$.ajax({data: {q: 'x'}})

Send request parameters

.done(function (res) {})

Run a callback on success

.fail(function (err) {})

Run a callback on failure

.always(function () {})

Run a callback after completion

$.ajaxSetup({headers: {}})

Set defaults for all requests

Forms

$('#form').serialize()

Encode form data as a query string

$('#form').serializeArray()

Encode form data as an array

$('#name').val()

Read a field value

$('#name').val('Ada')

Write a field value

$(':input')

Select all form input elements

$('#cb').is(':checked')

Test if a checkbox is checked

$('#sel option:selected')

Get the selected option

$('#in').focus()

Move focus to a field

$('#form').on('submit', fn)

Handle the form submit event

$('#in').prop('disabled', true)

Disable a form control

Utilities

$.each(arr, fn)

Iterate over an array or object

$.map(arr, fn)

Build a new array from each item

$.grep(arr, fn)

Filter an array by a predicate

$.extend({}, a, b)

Merge objects into a target

$.trim(' hi ')

Trim leading/trailing whitespace

$.inArray(2, arr)

Find an item index in an array

$.isArray(x)

Test whether a value is an array

$.isFunction(x)

Test whether a value is a function

$.parseJSON(str)

Parse a JSON string into an object

$.now()

Current timestamp in milliseconds

$.type(x)

Get the internal type of a value

“:q”와 일치하는 항목이 없습니다.

jQuery 치트시트 소개

이 jQuery 치트시트는 여전히 기존 사이트의 상당 부분을 움직이는 라이브러리에 대한 간결한 참고 자료입니다: 셀렉터, document ready와 DOM 기초, DOM 조작, 속성과 CSS, 이벤트, 효과와 애니메이션, 순회, AJAX, 폼, 유틸리티를 다룹니다.

레거시 프런트엔드, 플러그인, 오래된 CMS 테마를 유지보수한다면 jQuery 숙련도는 여전히 실용적인 기술입니다. 각 행은 메서드 호출과 한 줄 설명을 짝지어, 오래된 문서를 뒤지지 않고도 이벤트 위임, 연쇄 순회, AJAX 요청의 정확한 시그니처를 떠올릴 수 있게 해줍니다.

이 시트는 무료이며 완전히 클라이언트 사이드로 동작합니다. 검색창으로 메서드를 실시간 필터링하고, 고정된 목차로 섹션 간을 이동하고, 클릭 한 번으로 스니펫을 복사하고, 레거시 리팩터링에 깊이 몰입할 때 페이지를 인쇄하세요.

jQuery 치트시트 사용 방법

셀렉터와 document ready 및 DOM부터 순회를 거쳐 AJAX와 유틸리티까지 섹션을 훑어보세요.
on, closest, ajax 같은 메서드를 검색해 시트를 실시간 필터링하세요.
고정된 사이드바를 통해 효과 및 애니메이션 같은 섹션으로 이동하세요.
스니펫이나 복사 아이콘을 클릭해 jQuery 호출을 코드에 복사하세요.
레거시 프로젝트 작업 중 오프라인 참고 자료로 시트를 인쇄하세요.

자주 묻는 질문

열 개 섹션입니다: 셀렉터, document ready와 DOM 기초, DOM 조작, 속성과 CSS, 이벤트, 효과와 애니메이션, 순회, AJAX, 폼, 유틸리티 헬퍼입니다.

새 프로젝트에서는 대부분의 팀이 순수 JavaScript를 사용하지만, 방대한 양의 프로덕션 코드, 플러그인, CMS 테마가 여전히 jQuery로 동작합니다 — 이 시트는 그런 코드를 자신 있게 유지보수하고 마이그레이션하는 데 목적이 있습니다.

네. 이벤트 섹션은 .on()의 위임 형태와 바인딩, 언바인딩, 트리거를 함께 다룹니다 — 동적으로 삽입된 요소를 다룰 때 가장 필요한 패턴입니다.

네. 아무 스니펫이나 해당 행의 복사 아이콘을 클릭하면 붙여넣을 준비가 된 상태로 클립보드에 복사됩니다.

네, 완전히 무료입니다 — 검색과 인쇄가 가능하고 가입 없이 브라우저에서 렌더링됩니다.

jQuery 치트시트

Selectors

Document ready & DOM

DOM manipulation

Attributes & CSS

Events

Effects & animation

Traversing

AJAX

Forms

Utilities

jQuery 치트시트 소개

jQuery 치트시트 사용 방법

자주 묻는 질문

jQuery 치트시트는 무엇을 다루나요?

jQuery는 여전히 참고할 가치가 있나요?

이벤트 위임도 다루나요?

클릭 한 번으로 메서드 호출을 복사할 수 있나요?

jQuery 참고 자료는 무료인가요?

관련 도구

인기 검색어

이 도구 임베드하기