jQuery 치트시트
검색하고 인쇄할 수 있는 jQuery 참조 자료——선택자, DOM 조작, 이벤트, 효과, 순회, AJAX, 폼 헬퍼. 무료.
선택자
14$('#id')
id로 요소 선택
$('.class')
클래스를 가진 모든 요소 선택
$('div')
태그 이름의 모든 요소 선택
$('*')
페이지의 모든 요소 선택
$('[name="email"]')
속성 값으로 선택
$('a[href^="https"]')
속성 시작-일치 선택자
$('ul li:first')
첫 번째 매치된 요소
$('ul li:last')
마지막 매치된 요소
$('tr:eq(2)')
0 기준 인덱스의 요소
$('li:not(.done)')
선택자에 매치되는 요소 제외
$(':checked')
체크된 모든 체크박스/라디오
$('div:visible')
현재 보이는 요소만
$('ul li')
후손 결합자
$('ul > li')
직접 자식 결합자
Document ready 및 DOM
10$(function () { /* ... */ });
DOM 준비 시 코드 실행
$(document).ready(fn)
명시적 document-ready 핸들러
$(window).on('load', fn)
모든 에셋 로드 후 실행
$(this)
현재 컨텍스트 요소 래핑
$(el)
원시 DOM 노드를 jQuery로 래핑
$('<div class="box"></div>')
HTML로부터 새 요소 생성
$('#box')[0]
기저 DOM 노드 가져오기
$('#box').get(0)
.get()으로 DOM 노드 가져오기
$('.item').length
매치된 요소 수 세기
$('#box').is(':visible')
집합에 대해 선택자 검사
DOM 조작
12$('#box').html('<b>Hi</b>')
inner HTML 설정
$('#box').text('Hello')
텍스트 콘텐츠 설정 (이스케이프됨)
$('#name').val('Ada')
폼 필드 값 설정
$('#list').append('<li>x</li>')
끝에 콘텐츠 삽입
$('#list').prepend('<li>x</li>')
처음에 콘텐츠 삽입
$('#box').before('<hr>')
요소 앞에 콘텐츠 삽입
$('#box').after('<hr>')
요소 뒤에 콘텐츠 삽입
$('#box').remove()
DOM에서 요소 제거
$('#box').empty()
모든 자식 노드 제거
$('#box').clone()
요소의 복사본 생성
$('#box').wrap('<div>')
요소를 새 HTML로 래핑
$('#box').replaceWith('<p>')
요소를 전부 교체
속성 및 CSS
13$('#img').attr('src')
속성 값 가져오기
$('#img').attr('alt', 'Logo')
속성 값 설정
$('#cb').prop('checked')
DOM 속성 가져오기 (checked/disabled)
$('#cb').prop('checked', true)
DOM 속성 설정
$('#img').removeAttr('title')
속성 제거
$('.box').addClass('active')
CSS 클래스 추가
$('.box').removeClass('active')
CSS 클래스 제거
$('.box').toggleClass('open')
CSS 클래스 켜기/끄기 전환
$('.box').hasClass('active')
클래스 존재 여부 검사
$('#box').css('color', 'red')
단일 CSS 속성 설정
$('#box').css({top: 0, left: 0})
여러 CSS 속성 설정
$('#box').width()
계산된 너비를 픽셀로 가져오기
$('#box').height()
계산된 높이를 픽셀로 가져오기
이벤트
12$('#btn').on('click', fn)
이벤트 핸들러 연결
$('#btn').off('click')
이벤트 핸들러 분리
$('#btn').click(fn)
단축 클릭 핸들러
$('#form').submit(fn)
폼 제출 처리
$('#sel').change(fn)
값 변경 처리
$('#in').keyup(fn)
필드에서 key-up 처리
$('#list').on('click', '.item', fn)
동적 자식용 위임 이벤트
$('#btn').trigger('click')
프로그래밍 방식으로 이벤트 발생
$('#btn').one('click', fn)
핸들러를 최대 한 번만 실행
e.preventDefault()
기본 브라우저 동작 중지
e.stopPropagation()
이벤트 버블링 중지
e.target
이벤트를 발생시킨 요소
효과 및 애니메이션
12$('#box').show()
숨겨진 요소 표시
$('#box').hide()
요소 숨기기
$('#box').toggle()
가시성 전환
$('#box').fadeIn(300)
요소 페이드 인
$('#box').fadeOut(300)
요소 페이드 아웃
$('#box').fadeTo(300, 0.5)
지정 불투명도로 페이드
$('#box').slideUp()
요소를 위로 슬라이드 (접기)
$('#box').slideDown()
요소를 아래로 슬라이드 (펼치기)
$('#box').slideToggle()
슬라이드 애니메이션 전환
$('#box').animate({left: 100})
CSS 속성 애니메이션
$('#box').stop()
현재 애니메이션 중지
$('#box').delay(500).fadeIn()
대기 중인 다음 효과 지연
탐색
12$('#box').find('.item')
선택자에 매치되는 후손 찾기
$('#box').parent()
직접 부모 가져오기
$('#box').parents('.row')
선택자에 매치되는 모든 조상 가져오기
$('#box').closest('.row')
가장 가까운 매치 조상 (또는 자신)
$('#box').children()
직접 자식 가져오기
$('#box').siblings()
형제 요소 가져오기
$('#box').next()
다음 형제 가져오기
$('#box').prev()
이전 형제 가져오기
$('.item').each(fn)
매치된 각 요소 순회
$('.item').filter('.on')
선택자로 집합 축소
$('.item').first()
집합을 첫 요소로 축소
$('.item').eq(1)
집합을 한 인덱스로 축소
AJAX
11$.ajax({url: '/api', method: 'GET'})
완전 제어 AJAX 요청
$.get('/api', fn)
단축 HTTP GET 요청
$.post('/api', data, fn)
단축 HTTP POST 요청
$.getJSON('/api.json', fn)
JSON을 기대하는 GET 요청
$('#box').load('/part.html')
요소에 HTML 로드
$.ajax({dataType: 'json'})
예상 응답 타입 설정
$.ajax({data: {q: 'x'}})
요청 매개변수 전송
.done(function (res) {})
성공 시 콜백 실행
.fail(function (err) {})
실패 시 콜백 실행
.always(function () {})
완료 후 콜백 실행
$.ajaxSetup({headers: {}})
모든 요청에 대한 기본값 설정
폼
10$('#form').serialize()
폼 데이터를 쿼리 문자열로 인코딩
$('#form').serializeArray()
폼 데이터를 배열로 인코딩
$('#name').val()
필드 값 읽기
$('#name').val('Ada')
필드 값 쓰기
$(':input')
모든 폼 입력 요소 선택
$('#cb').is(':checked')
체크박스 체크 여부 검사
$('#sel option:selected')
선택된 옵션 가져오기
$('#in').focus()
필드로 포커스 이동
$('#form').on('submit', fn)
폼 제출 이벤트 처리
$('#in').prop('disabled', true)
폼 컨트롤 비활성화
유틸리티
11$.each(arr, fn)
배열 또는 객체 순회
$.map(arr, fn)
각 항목으로 새 배열 생성
$.grep(arr, fn)
조건자로 배열 필터
$.extend({}, a, b)
객체들을 대상에 병합
$.trim(' hi ')
선행/후행 공백 제거
$.inArray(2, arr)
배열에서 항목 인덱스 찾기
$.isArray(x)
값이 배열인지 검사
$.isFunction(x)
값이 함수인지 검사
$.parseJSON(str)
JSON 문자열을 객체로 파싱
$.now()
현재 타임스탬프 (밀리초)
$.type(x)
값의 내부 타입 가져오기
“:q”와 일치하는 항목이 없습니다.
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.