jQuery는 JavaScript 라이브러리입니다. 자체 사이트에서는 "HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 Ajax를 훨씬 더 간단하게" 만든다고 설명합니다.
단일 HTML 파일에서 사용하려면 jQuery를 로드하는 <script> 태그 하나를 추가한 다음 자체 코드가 포함된 두 번째 태그를 추가하세요.
먼저 시도해 보세요. 버튼을 클릭하면 상자가 슬라이드되고 카운터가 업데이트되며 라벨이 변경됩니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery in one HTML file</title>
<style>
body { margin: 0; padding: 20px; font-family: system-ui, sans-serif; background: #f4f5f7; }
button {
font: inherit; padding: 9px 16px; border: 0; border-radius: 8px;
background: #0769ad; color: #fff; cursor: pointer;
}
.panel {
margin-top: 14px; padding: 14px 16px; border-radius: 10px;
background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
}
#clicks { color: #555; margin-left: 10px; }
</style>
</head>
<body>
<button id="toggle">Hide details</button><span id="clicks">0 clicks</span>
<div class="panel" id="panel">
<b>Details</b><br>This box slides up and down. jQuery does the animation.
</div>
<!-- 1. Load jQuery first (pinned version) -->
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<!-- 2. Then your own code, which uses $ -->
<script>
$(function () { // runs once the page is ready
let n = 0;
$('#toggle').on('click', function () {
$('#panel').slideToggle(200);
n++;
$('#clicks').text(n + (n === 1 ? ' click' : ' clicks'));
$(this).text($(this).text() === 'Hide details' ? 'Show details' : 'Hide details');
});
});
</script>
</body>
</html>
여기에는 빌드 단계, 패키지 관리자 또는 서버가 필요하지 않습니다. 파일은 브라우저에서 그대로 열립니다.
가장 작은 작업 페이지
모든 jQuery 페이지에는 다음 순서로 동일한 세 부분이 있습니다.
- jQuery를 불러오는 스크립트 태그입니다. 라이브러리를 로드하고
$를 정의합니다. - 그 아래에는 직접 작성한 코드를 담은 스크립트 태그를 둡니다. 이 코드는
$를 사용하므로 jQuery를 불러온 뒤에 실행되어야 합니다. $(function () { ... })코드 주변. 페이지가 준비되면 함수가 실행됩니다.
<button id="hello">Say hello</button>
<p id="out"></p>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
$(function () {
$('#hello').on('click', function () {
$('#out').text('Hello from jQuery');
});
});
</script>
<body> 끝에 두 태그를 모두 넣는 것이 가장 간단한 레이아웃입니다. jQuery API 문서에서는 준비된 핸들러로 $(handler) 형식을 권장합니다. 더 긴 $(document).ready(handler)는 여전히 작동하지만 jQuery 3.0부터 더 이상 사용되지 않는 것으로 표시됩니다.
사용할 스크립트 태그
releases.jquery.com의 jQuery 릴리스 페이지에는 jQuery Core 4.0.0이 현재 4.x 릴리스로, 3.7.1이 최신 3.x로 나열되어 있습니다. jQuery 홈 페이지에는 3.x가 이제 중요한 업데이트만 받을 것이라고 나와 있습니다.
모든 파일은 code.jquery.com에서 제공됩니다. 4.0.0에는 네 가지 주요 빌드가 있습니다.
| 파일 | 포함된 내용 |
|---|---|
jquery-4.0.0.js |
모든 것, 읽을 수 있는 소스 |
jquery-4.0.0.min.js |
모든 것이 축소되었습니다. 평소의 선택 |
jquery-4.0.0.slim.js |
Ajax 및 효과 모듈 없이 |
jquery-4.0.0.slim.min.js |
슬림하고 최소화된 |
URL의 버전 번호를 유지하세요. 고정된 파일은 동일하게 유지되므로 오늘 테스트하는 페이지는 내년에도 동일하게 작동합니다.
slim 빌드이 함정이다. 효과를 생략하므로 slideToggle, fadeIn 및 animate가 누락되고 호출하면 "함수가 아닙니다"가 발생합니다. 둘 다 필요하지 않다고 확신하지 않는 한 일반 .min.js를 사용하십시오.
무결성 속성
다운로드 페이지에는 jQuery CDN이 하위 리소스 무결성을 지원한다고 나와 있습니다. releases.jquery.com에서 버전을 클릭하면 해시가 포함된 완전한 태그가 제공됩니다.
<script src="https://code.jquery.com/jquery-4.0.0.min.js"
integrity="sha384-fgGyf7Mo7DURSOMnOy7ed+dkq5Job205Gnzu6QIg0BOHKaqt4D76Dt8VlDCzcMHV"
crossorigin="anonymous"></script>
브라우저는 다운로드한 파일을 해시와 비교하고 다르면 실행을 거부합니다. 이는 또한 한 버전에 복사된 해시가 다른 모든 버전을 차단한다는 의미이기도 합니다. URL만 복사하지 말고 전체 태그를 함께 복사하세요.
스크립트 순서: $가 정의되지 않은 이유
브라우저는 스크립트를 위에서 아래 순서로 실행합니다. 직접 작성한 코드가 먼저 나오면 jQuery가 로드되기 전에 $를 호출하므로 콘솔에 다음 오류가 표시됩니다.
Uncaught ReferenceError: $ is not defined
파일이 도착하지 않기 때문에 URL이 잘못된 경우에도 동일한 오류가 나타납니다. 브라우저의 개발자 도구를 열고 jQuery 파일이 로드된 네트워크 탭을 확인하세요. HTML JavaScript가 작동하지 않음은 스크립트가 침묵을 유지하는 다른 이유를 다룹니다.
$()가 당신에게 돌려주는 것
$('.note')는 CSS 선택기를 사용하여 jQuery 객체를 반환합니다. 이는 jQuery의 메서드가 첨부된 모든 일치 요소 집합입니다. 세트에서 메소드를 호출하면 세트의 모든 요소가 변경되므로 대부분의 코드에는 루프가 필요하지 않습니다.
캐치는 빈 세트입니다. 일치하는 요소가 없으면 jQuery 문서에서는 개체에 "요소가 없으며 .length 속성이 0입니다"라고 말합니다. 빈 집합의 메서드는 아무 작업도 수행하지 않으며 오류도 발생하지 않습니다.
행이 무시된 것 같으면 $('.note').length를 기록하고 오타가 있는지 확인하십시오.
일반적인 방법과 그 기능:
| jQuery | 기능 | 일반 자바스크립트 |
|---|---|---|
$('#id') |
요소 선택 | querySelectorAll |
.on('click', fn) |
이벤트 듣기 | addEventListener |
.text('Hi') |
텍스트 설정, HTML 없음 | textContent |
.val() |
입력 읽기 | .value |
.toggleClass('on') |
클래스 추가 또는 삭제 | classList.toggle |
.slideToggle() |
애니메이션 표시 및 숨기기 | CSS 전환 |
두 열 모두 단일 파일에서 작동합니다. 일반 버전의 경우 addEventListener 및 classList를 참조하세요.
나중에 추가된 항목에 대한 클릭
자주 묻는 jQuery 질문: 새 목록 항목은 이전 항목이 처리하는 클릭을 무시합니다. jQuery .on() 문서에 설명되어 있습니다. 직접 핸들러는 .on()가 실행될 때 존재해야 하는 "현재 선택된 요소에만 바인딩됩니다".
양쪽에 있는 항목을 클릭한 다음 항목을 추가하고 새 항목을 클릭합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Direct vs delegated events</title>
<style>
body { margin: 0; padding: 14px; font-family: system-ui, sans-serif; background: #f4f5f7; font-size: 14px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.col { background: #fff; border-radius: 10px; padding: 12px; box-shadow: 0 3px 10px rgba(0, 0, 0, .08); }
h3 { margin: 0 0 4px; font-size: 14px; }
code { font-size: 12px; background: #eef1f5; padding: 1px 4px; border-radius: 4px; }
ul { list-style: none; padding: 0; margin: 10px 0; }
li {
padding: 7px 9px; margin-bottom: 6px; border-radius: 6px;
background: #eef3f8; cursor: pointer; user-select: none;
}
li.done { background: #d4f5dc; text-decoration: line-through; }
button { font: inherit; padding: 8px 12px; border: 0; border-radius: 8px; background: #0769ad; color: #fff; cursor: pointer; }
</style>
</head>
<body>
<p style="margin:0 0 10px">Click items to mark them done. Then add an item and click the new one.</p>
<div class="cols">
<div class="col">
<h3>Direct</h3><code>$('li').on('click')</code>
<ul id="direct"><li>Item 1</li><li>Item 2</li></ul>
</div>
<div class="col">
<h3>Delegated</h3><code>on('click', 'li')</code>
<ul id="delegated"><li>Item 1</li><li>Item 2</li></ul>
</div>
</div>
<p><button id="add">Add an item to both lists</button></p>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
$(function () {
// Direct: binds only to the li elements that exist right now
$('#direct li').on('click', function () {
$(this).toggleClass('done');
});
// Delegated: the list listens, so items added later work too
$('#delegated').on('click', 'li', function () {
$(this).toggleClass('done');
});
let count = 2;
$('#add').on('click', function () {
count++;
$('#direct, #delegated').append('<li>Item ' + count + ' (new)</li>');
});
});
</script>
</body>
</html>
수정사항은 위임된 핸들러입니다. 항상 존재하는 상위 항목에 리스너를 연결하고 선택기를 두 번째 인수로 전달합니다.
// Works for li elements added at any time
$('#list').on('click', 'li', function () {
$(this).toggleClass('done');
});
핸들러 내에서 this는 선택기와 일치하는 요소입니다. 여기서는 클릭된 li입니다.
완성된 예: 읽기 목록
이 페이지에는 항목을 추가하는 양식, 항목을 표시하고 제거하기 위한 위임된 클릭, 필터, 카운터 및 효과 모듈의 페이드 등의 조각이 함께 들어 있습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Reading list with jQuery</title>
<style>
body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; background: #eceef1; }
.app { max-width: 460px; margin: 0 auto; background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, .1); }
h2 { margin: 0 0 12px; font-size: 18px; }
form { display: flex; gap: 8px; }
input { flex: 1; min-width: 0; font: inherit; padding: 8px 10px; border: 1px solid #cfd4dc; border-radius: 8px; }
button { font: inherit; padding: 8px 12px; border: 0; border-radius: 8px; background: #0769ad; color: #fff; cursor: pointer; }
.filters { margin: 12px 0 6px; display: flex; gap: 6px; }
.filters button { background: #eef1f5; color: #333; padding: 5px 10px; font-size: 13px; }
.filters button.on { background: #0769ad; color: #fff; }
ul { list-style: none; padding: 0; margin: 0; }
li { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid #eef0f3; }
li span { flex: 1; cursor: pointer; }
li.read span { color: #8a929e; text-decoration: line-through; }
li .del { background: none; color: #b42318; padding: 2px 8px; font-size: 18px; line-height: 1; }
#count { color: #666; font-size: 13px; margin-top: 10px; }
</style>
</head>
<body>
<div class="app">
<h2>Reading list</h2>
<form id="add">
<input id="title" placeholder="Add a book" autocomplete="off">
<button>Add</button>
</form>
<div class="filters">
<button type="button" data-show="all" class="on">All</button>
<button type="button" data-show="unread">Unread</button>
<button type="button" data-show="read">Read</button>
</div>
<ul id="list">
<li><span>The Pragmatic Programmer</span><button class="del" aria-label="Remove">×</button></li>
<li class="read"><span>Don't Make Me Think</span><button class="del" aria-label="Remove">×</button></li>
</ul>
<div id="count"></div>
</div>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"
integrity="sha384-fgGyf7Mo7DURSOMnOy7ed+dkq5Job205Gnzu6QIg0BOHKaqt4D76Dt8VlDCzcMHV"
crossorigin="anonymous"></script>
<script>
$(function () {
const $list = $('#list');
let show = 'all';
function update() {
$list.children().each(function () {
const read = $(this).hasClass('read');
$(this).toggle(show === 'all' || (show === 'read') === read);
});
const left = $list.children(':not(.read)').length;
$('#count').text(left + ' unread of ' + $list.children().length);
}
// Add: the form is handled in the page, nothing is sent anywhere
$('#add').on('submit', function (e) {
e.preventDefault();
const title = $('#title').val().trim();
if (!title) return;
const $li = $('<li><span></span><button class="del" aria-label="Remove">×</button></li>');
$li.find('span').text(title); // .text() so typed HTML is shown, not run
$li.hide().appendTo($list).fadeIn(200);
$('#title').val('').trigger('focus');
update();
});
// Delegated handlers: they also work for items added later
$list.on('click', 'span', function () {
$(this).parent().toggleClass('read');
update();
});
$list.on('click', '.del', function () {
$(this).parent().fadeOut(200, function () { $(this).remove(); update(); });
});
$('.filters').on('click', 'button', function () {
$('.filters button').removeClass('on');
show = $(this).addClass('on').data('show');
update();
});
update();
});
</script>
</body>
</html>
세 가지 세부 사항은 복사할 가치가 있습니다.
- 사용자 입력용
.text(). 입력된 HTML은 마크업이 아닌 텍스트로 표시됩니다. - 제출 시
e.preventDefault(). 양식이 페이지에서 처리되므로 브라우저가 다시 로드하거나 보내지 않습니다. - 하나의
update()함수를 사용합니다. 변경이 생길 때마다 이 함수를 호출하므로 필터와 개수 표시가 서로 어긋나지 않습니다.
Ajax와 단일 파일만으로는 할 수 없는 다른 일들
jQuery의 $.ajax 및 $.getJSON는 서버에서 데이터를 요청합니다. 코드는 짧습니다.
$.getJSON('https://api.example.com/items', function (items) {
// build the list from items
});
요청에 응답하고 페이지가 응답을 읽을 수 있도록 허용하는 서버가 필요합니다.
공유된 NOS 페이지는 다른 사이트에 대한 요청도 차단하므로 여기에 있는 라이브 예제는 페이지 내부에 데이터를 유지합니다. 붙여넣을 수 있는 데이터의 경우 스크립트 상단에 있는 JavaScript 배열이 동일한 작업을 수행합니다.
작동하지 않을 때
| 당신이 보는 것 | 원인 | 수정 |
|---|---|---|
$ is not defined |
jQuery가 로드되기 전에 스크립트가 실행됩니다. | 스크립트 위에 jQuery 태그를 넣으세요. |
$ is not defined, 태그 순서는 괜찮습니다 |
잘못된 URL, 파일이 로드되지 않았습니다. | 네트워크 탭에서 요청을 확인하세요. |
slideToggle is not a function |
슬림 빌드에는 효과가 없습니다. | jquery-4.0.0.min.js 사용 |
$.ajax is not a function |
슬림 빌드에는 Ajax가 없습니다. | 일반 빌드 사용 |
| 스크립트가 차단되었습니다. 무결성 오류입니다. | 해시와 파일이 일치하지 않습니다 | releases.jquery.com에서 전체 태그를 복사하세요. |
| 라인이 실행되지만 아무것도 변경되지 않습니다. | 선택기와 일치하는 항목이 없습니다. | .length를 기록하고 선택기를 확인하세요. |
| 새 항목은 클릭을 무시합니다. | 이전에 바인딩된 직접 핸들러 | 위임된 핸들러 사용 |
| head 안의 코드가 작동하지 않음 | 요소가 존재하기 전에 실행되었습니다. | $(function)로 포장하세요 |
링크로 공유하세요
버튼과 애니메이션이 있는 페이지는 설명하는 것보다 보여주기가 더 쉽습니다. 스크린샷을 클릭할 수 없으며 .html 첨부 파일이 전화기에서 코드로 열릴 수 있습니다.
작업 버전을 보내려면 페이지를 NOS 문서에 붙여넣고 공유 링크 만들기를 선택하세요. 링크할 HTML이 이를 안내합니다.
페이지는 작성된 대로 렌더링되고, code.jquery.com의 jQuery 스크립트가 로드되고 코드가 실행되므로, 페이지를 받는 사람은 계정 없이 직접 클릭할 수 있습니다. 나중에 코드를 변경하면 동일한 링크에 새 버전이 표시됩니다.
라이브러리가 없는 동일한 종류의 페이지에 대해 div 표시 및 숨기기는 일반 JavaScript로 수행됩니다.