jQuery 튜토리얼
jQuery 시작하기
수색…
비고
jQuery는 DOM 작업, 이벤트 처리, AJAX 및 애니메이션을 단순화하는 JavaScript 라이브러리입니다. 그것은 또한 기본 DOM 및 자바 스크립트 엔진에서 많은 브라우저 호환성 문제를 처리합니다.
jQuery의 각 버전은 압축 된 (압축 된) 형식과 압축되지 않은 형식 모두에서 https://code.jquery.com/jquery/ 에서 다운로드 할 수 있습니다.
버전
| 번역 | 노트 | 출시일 |
|---|---|---|
| 1.0 | 첫 번째 안정적인 릴리스 | 2006-08-26 |
| 1.1 | 2007-01-14 | |
| 1.2 | 2007-09-10 | |
| 1.3 | 시즐 이 코어에 도입되었습니다. | 2009-01-14 |
| 1.4 | 2010-01-14 | |
| 1.5 | 지연 콜백 관리, Ajax 모듈 재 작성 | 2011 년 1 월 31 일 |
| 1.6 | attr() 및 val() 메소드에서 상당한 성능 향상 | 2011-05-03 |
| 1.7 | 새 이벤트 API : on() 및 off() . | 2011-11-03 |
| 1.8 | 지글 지글 다시, 향상된 애니메이션과 $(html, props) 유연성을. | 2012-08-09 |
| 1.9 | 사용되지 않는 인터페이스 및 코드 정리 제거 | 2013-01-15 |
| 1.10 | 1.9 및 2.0 베타주기에서보고 된 통합 버그 수정 및 차이점 | 2013-05-24 |
| 1.11 | 2014-01-24 | |
| 1.12 | 2016-01-08 | |
| 2.0 | 성능 향상 및 크기 감소를위한 IE 6-8 지원 중단 | 2013-04-18 |
| 2.1 | 2014-01-24 | |
| 2.2 | 2016-01-08 | |
| 3.0 | 일부 jQuery 사용자 선택자를위한 엄청난 속도 향상 | 2016-06-09 |
| 3.1 | 더 이상의 사일런트 오류 없음 | 2016-07-07 |
jQuery 네임 스페이스 ( "jQuery"및 "$")
jQuery 는 모든 jQuery 코드 작성의 출발점이다. 함수 jQuery(...) 또는 변수 jQuery.foo 로 사용할 수 있습니다.
$ 는 jQuery 의 별칭이고 두 개는 일반적으로 서로 교환 할 수 있습니다 ( jQuery.noConflict(); 가 사용 된 경우 제외 - 이름 공간 충돌 방지 참조).
이 HTML 스 니펫이 있다고 가정하면 -
<div id="demo_div" class="demo"></div>
이 div에 텍스트 내용을 추가하려면 jQuery를 사용하는 것이 좋습니다. 이를 위해 jQuery text() 함수를 사용할 수 있습니다. 이것은 jQuery 또는 $ 사용하여 작성할 수 있습니다. 즉 -
jQuery("#demo_div").text("Demo Text!");
또는 -
$("#demo_div").text("Demo Text!");
둘 다 동일한 최종 HTML을 만듭니다.
<div id="demo_div" class="demo">Demo Text!</div>
$ 는 jQuery 보다 간결하므로 일반적으로 jQuery 코드를 작성하는 데 선호되는 방법이다.
jQuery는 CSS 선택기를 사용하며 위 예제에서 ID 선택기가 사용되었습니다. jQuery의 선택기에 대한 자세한 내용은 선택기의 유형을 참조하십시오.
시작하기
다음 내용으로 hello.html 파일을 만듭니다.
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<div>
<p id="hello">Some random text</p>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function() {
$('#hello').text('Hello, World!');
});
</script>
</body>
</html>
이 파일을 웹 브라우저에서 엽니 다. 결과적으로 Hello, World! 라는 텍스트가있는 페이지가 표시됩니다 Hello, World!
코드 설명
jQuery CDN 에서 jQuery 라이브러리를로드한다.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>이것은
$전역 변수,jQuery함수와 네임 스페이스의 별칭을 소개합니다.jQuery를 포함 할 때 가장 흔히 저지르는 실수 중 하나는 다른 스크립트 나 라이브러리를 사용하거나 사용하기 전에 라이브러리를로드하지 못하는 것입니다.
jQuery에 의해 DOM ( Document Object Model )이 "준비" 될 때 실행될 함수를 지정합니다.
// When the `document` is `ready`, execute this function `...` $(document).ready(function() { ... }); // A commonly used shorthand version (behaves the same as the above) $(function() { ... });
DOM이 준비되면 jQuery는 위에 표시된 콜백 함수를 실행한다. 우리 함수의 내부에는 두 가지 중요한 일을하는 하나의 호출 만 있습니다.
id속성이hello( 선택기#hello) 인 요소를 가져옵니다. 전달 인자로 selector를 사용하는 것은 jQuery의 기능과 명명의 핵심입니다. 전체 라이브러리는 근본적으로 document.querySelectorAll MDN 을 확장하여 발전했습니다.선택한 요소 내부의
text()를Hello, World!.# ↓ - Pass a `selector` to `$` jQuery, returns our element $('#hello').text('Hello, World!'); # ↑ - Set the Text on the element
자세한 내용은 jQuery - Documentation 페이지를 참조하십시오.
HTML 페이지의 머리 부분에 스크립트 태그 포함
공식 CDN 에서 jQuery 를로드하려면 jQuery 웹 사이트 로 이동하십시오. 다양한 버전 및 형식 목록을 사용할 수 있습니다.
자,로드하려는 jQuery 버전의 소스를 복사하십시오. jQuery 2.X 를로드하려면 다음과 같은 내용을 보여줄 비 압축 또는 축소 태그를 클릭하십시오.
전체 코드를 복사하거나 복사 아이콘을 클릭하여 HTML의 <head> 또는 <body> 에 붙여 넣으십시오.
가장 좋은 방법은 async 속성을 사용하여 head 태그에 외부 JavaScript 라이브러리를로드하는 것입니다. 다음은 데모입니다.
<!DOCTYPE html>
<html>
<head>
<title>Loading jquery-2.2.4</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" async></script>
</head>
<body>
<p>This page is loaded with jquery.</p>
</body>
</html>
async 속성을 사용할 때 javascript 라이브러리는 비동기 적으로로드되어 사용 가능한 즉시 실행되므로 의식이 있어야합니다. 두 번째 라이브러리가 첫 번째 라이브러리에 종속되어있는 경우 두 번째 라이브러리가로드되고 첫 번째 라이브러리보다 먼저 실행되면이 경우 오류가 발생하여 응용 프로그램이 중단 될 수 있습니다.
네임 스페이스 충돌 방지
jQuery 이외의 라이브러리에서도 별칭으로 $ 를 사용할 수 있습니다. 이로 인해 해당 라이브러리와 jQuery간에 간섭이 발생할 수 있습니다.
다른 라이브러리와 함께 사용하기 위해 $ 를 릴리즈하려면 :
jQuery.noConflict();
이 함수를 호출 한 후 $ 는 더 이상 jQuery 의 별칭이 아닙니다. 그러나 여전히 변수 jQuery 자체를 사용하여 jQuery 함수에 액세스 할 수 있습니다.
jQuery('#hello').text('Hello, World!');
선택적으로 다른 변수를 jQuery의 별칭으로 지정할 수 있습니다.
var jqy = jQuery.noConflict();
jqy('#hello').text('Hello, World!');
반대로 다른 라이브러리가 jQuery를 방해하지 못하도록하려면 즉시 호출 된 함수식 (IIFE)에 jQuery 코드를 래핑하고 jQuery 를 인수로 전달할 수 있습니다.
(function($) {
$(document).ready(function() {
$('#hello').text('Hello, World!');
});
})(jQuery);
이 IIFE 내부에서 $ 는 jQuery의 별칭입니다.
jQuery의 $ 별칭 을 보호하고 DOM이 준비되었는지 확인하는 또 다른 간단한 방법 은 다음과 같습니다.
jQuery(function( $ ) { // DOM is ready
// You're now free to use $ alias
$('#hello').text('Hello, World!');
});
요약,
-
jQuery.noConflict():$변수 동안 더 이상, jQuery를을 의미jQuery한다. -
var jQuery2 = jQuery.noConflict()-$는 더 이상jQuery나타내지 않지만, 변수jQuery는 변수jQuery2하고 변수jQuery2합니다.
이제는 세 번째 시나리오가 있습니다 . jQuery2 에서만 jQuery를 사용할 수있게 jQuery2 어떻게 jQuery2 합니까? 용도,
var jQuery2 = jQuery.noConflict(true)
따라서 jQuery 참조하는 $ 또는 jQuery 도 없습니다.
이 기능은 여러 버전의 jQuery를 같은 페이지에로드 할 때 유용합니다.
<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script>
var jQuery1 = jQuery.noConflict(true);
</script>
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script>
// Here, jQuery1 refers to jQuery 1.12.4 while, $ and jQuery refers to jQuery 3.1.0.
</script>
https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
jQuery를 가지고 있지 않은 페이지에서 콘솔을 통해 jQuery로드하기.
때로는 jQuery 를 사용하지 않는 페이지에서 작업해야하지만 대부분의 개발자는 jQuery 편리하게 사용합니다.
이러한 상황에서는 다음을 실행하여 Chrome Developer Tools 콘솔 ( F12 )을 사용하여로드 된 페이지에 수동으로 jQuery 를 추가 할 수 있습니다.
var j = document.createElement('script');
j.onload = function(){ jQuery.noConflict(); };
j.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(j);
원하는 버전이 위와 다를 수 있습니다 ( 1.12.4 ). 여기에서 필요한 버전에 대한 링크를 얻을 수 있습니다 .
jQuery 객체
jQuery가 호출 될 때마다 $() 또는 jQuery() 를 사용하여 내부적으로 jQuery 의 new 인스턴스를 작성합니다. 이것은 새로운 인스턴스를 보여주는 소스 코드 입니다 :
// Define a local copy of jQuery
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.fn.init( selector, context );
}
내부적으로 jQuery는 프로토 타입을 .fn 으로 참조하며 jQuery 객체를 내부적으로 인스턴스화하는 데 사용되는 스타일은 호출자가 new 를 명시 적으로 사용하지 않고도 해당 프로토 타입을 노출 할 수있게합니다.
인스턴스 (jQuery API (예 : .each , children , filter 등)가 노출되는 방식)를 설정하는 것 외에도 내부적으로 jQuery는 셀렉터의 결과와 일치하는 배열과 같은 구조를 만들 것이다. nothing, undefined , null 또는 이와 비슷한 것이 인수로 전달되었습니다). 단일 항목의 경우이 배열과 같은 구조는 해당 항목 만 보유합니다.
간단한 데모는 id가있는 요소를 찾은 다음 jQuery 객체에 액세스하여 기본 DOM 요소를 반환하는 것입니다 (여러 요소가 일치하거나 존재할 때도 작동합니다).
var $div = $("#myDiv");//populate the jQuery object with the result of the id selector
var div = $div[0];//access array-like structure of jQuery object to get the DOM Element
네임 스페이스로 된 jQuery 플러그인로드하기
일반적으로 플러그인을로드 할 때는 항상 jQuery 뒤에 플러그인 을 포함해야합니다.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="some-plugin.min.js"></script>
당신이 jQuery를 하나 이상의 버전을 사용해야하는 경우, 다음 설정하는 코드를 다음에 jQuery를 필요한 버전의 후 플러그인 (들)을로드 할 수 있는지 확인합니다 jQuery.noConflict(true) ; 다음 버전의 jQuery 및 관련 플러그인을로드하십시오.
<script src="https://code.jquery.com/jquery-1.7.0.min.js"></script>
<script src="plugin-needs-1.7.min.js"></script>
<script>
// save reference to jQuery v1.7.0
var $oldjq = jQuery.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="newer-plugin.min.js"></script>
이제 플러그인을 초기화 할 때 연관된 jQuery 버전을 사용해야한다.
<script>
// newer jQuery document ready
jQuery(function($){
// "$" refers to the newer version of jQuery
// inside of this function
// initialize newer plugin
$('#new').newerPlugin();
});
// older jQuery document ready
$oldjq(function($){
// "$" refers to the older version of jQuery
// inside of this function
// initialize plugin needing older jQuery
$('#old').olderPlugin();
});
</script>
하나의 문서 준비 함수를 사용하여 두 플러그인을 모두 초기화 할 수는 있지만, 문서 준비 함수 내부의 여분의 jQuery 코드에 대한 혼란과 문제를 피하려면 참조를 분리하여 보관하는 것이 좋습니다.