jQuery 시작하기

Download jquery eBook

비고

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

시작하기

다음 내용으로 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>
 

JSBin의 라이브 데모

이 파일을 웹 브라우저에서 엽니 다. 결과적으로 Hello, World! 라는 텍스트가있는 페이지가 표시됩니다 Hello, World!

코드 설명

  1. jQuery CDN 에서 jQuery 라이브러리를로드한다.

    <!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>
     

    이것은 $ 전역 변수, jQuery 함수와 네임 스페이스의 별칭을 소개합니다.

    jQuery를 포함 할 때 가장 흔히 저지르는 실수 중 하나는 다른 스크립트 나 라이브러리를 사용하거나 사용하기 전에 라이브러리를로드하지 못하는 것입니다.

  1. jQuery에 의해 DOM ( Document Object Model )이 "준비" 될 때 실행될 함수를 지정합니다.

    <!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>
     
  1. DOM이 준비되면 jQuery는 위에 표시된 콜백 함수를 실행한다. 우리 함수의 내부에는 두 가지 중요한 일을하는 하나의 호출 만 있습니다.

    1. id 속성이 hello ( 선택기 #hello ) 인 요소를 가져옵니다. 전달 인자로 selector를 사용하는 것은 jQuery의 기능과 명명의 핵심입니다. 전체 라이브러리는 근본적으로 document.querySelectorAll MDN 을 확장하여 발전했습니다.

    2. 선택한 요소 내부의 text() Hello, World! .

      <!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>
       

자세한 내용은 jQuery - Documentation 페이지를 참조하십시오.

네임 스페이스 충돌 방지

jQuery 이외의 라이브러리에서도 별칭으로 $ 를 사용할 수 있습니다. 이로 인해 해당 라이브러리와 jQuery간에 간섭이 발생할 수 있습니다.

다른 라이브러리와 함께 사용하기 위해 $ 를 릴리즈하려면 :

jQuery.noConflict();
 

이 함수를 호출 한 후 $ 는 더 이상 jQuery 의 별칭이 아닙니다. 그러나 여전히 변수 jQuery 자체를 사용하여 jQuery 함수에 액세스 할 수 있습니다.

jQuery.noConflict();
 

선택적으로 다른 변수를 jQuery의 별칭으로 지정할 수 있습니다.

jQuery.noConflict();
 

반대로 다른 라이브러리가 jQuery를 방해하지 못하도록하려면 즉시 호출 된 함수식 (IIFE)에 jQuery 코드를 래핑하고 jQuery 를 인수로 전달할 수 있습니다.

jQuery.noConflict();
 

이 IIFE 내부에서 $ 는 jQuery의 별칭입니다.

jQuery의 $ 별칭보호하고 DOM이 준비되었는지 확인하는 또 다른 간단한 방법 다음과 같습니다.

jQuery.noConflict();
 

요약,

  • jQuery.noConflict() : $ 변수 동안 더 이상, jQuery를을 의미 jQuery 한다.
  • var jQuery2 = jQuery.noConflict() - $ 는 더 이상 jQuery 나타내지 않지만, 변수 jQuery 는 변수 jQuery2 하고 변수 jQuery2 합니다.

이제는 세 번째 시나리오가 있습니다 . jQuery2 에서만 jQuery를 사용할 수있게 jQuery2 어떻게 jQuery2 합니까? 용도,

var jQuery2 = jQuery.noConflict(true)

따라서 jQuery 참조하는 $ 또는 jQuery 도 없습니다.

이 기능은 여러 버전의 jQuery를 같은 페이지에로드 할 때 유용합니다.

jQuery.noConflict();
 

https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

HTML 페이지의 머리 부분에 스크립트 태그 포함

공식 CDN 에서 jQuery 를로드하려면 jQuery 웹 사이트 로 이동하십시오. 다양한 버전 및 형식 목록을 사용할 수 있습니다.

jQuery 버전 사용 가능한 jQuery CDN 페이지

자,로드하려는 jQuery 버전의 소스를 복사하십시오. jQuery 2.X 를로드하려면 다음과 같은 내용을 보여줄 비 압축 또는 축소 태그를 클릭하십시오.

jQuery 버전으로 팝업 된 스크립트 태그가 선택되었습니다.

전체 코드를 복사하거나 복사 아이콘을 클릭하여 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 는 모든 jQuery 코드 작성의 출발점이다. 함수 jQuery(...) 또는 변수 jQuery.foo 로 사용할 수 있습니다.

$jQuery 의 별칭이고 두 개는 일반적으로 서로 교환 할 수 있습니다 ( jQuery.noConflict(); 가 사용 된 경우 제외 - 이름 공간 충돌 방지 참조).

이 HTML 스 니펫이 있다고 가정하면 -

<div id="demo_div" class="demo"></div>
 

이 div에 텍스트 내용을 추가하려면 jQuery를 사용하는 것이 좋습니다. 이를 위해 jQuery text() 함수를 사용할 수 있습니다. 이것은 jQuery 또는 $ 사용하여 작성할 수 있습니다. 즉 -

<div id="demo_div" class="demo"></div>
 

또는 -

<div id="demo_div" class="demo"></div>
 

둘 다 동일한 최종 HTML을 만듭니다.

<div id="demo_div" class="demo"></div>
 

$jQuery 보다 간결하므로 일반적으로 jQuery 코드를 작성하는 데 선호되는 방법이다.

jQuery는 CSS 선택기를 사용하며 위 예제에서 ID 선택기가 사용되었습니다. jQuery의 선택기에 대한 자세한 내용은 선택기의 유형을 참조하십시오.

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 뒤에 플러그인 포함해야합니다.

<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-3.1.1.min.js"></script>
<script src="some-plugin.min.js"></script>
 

이제 플러그인을 초기화 할 때 연관된 jQuery 버전을 사용해야한다.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="some-plugin.min.js"></script>
 

하나의 문서 준비 함수를 사용하여 두 플러그인을 모두 초기화 할 수는 있지만, 문서 준비 함수 내부의 여분의 jQuery 코드에 대한 혼란과 문제를 피하려면 참조를 분리하여 보관하는 것이 좋습니다.

jQuery 객체

jQuery가 호출 될 때마다 $() 또는 jQuery() 를 사용하여 내부적으로 jQuerynew 인스턴스를 작성합니다. 이것은 새로운 인스턴스를 보여주는 소스 코드 입니다 :

// 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 요소를 반환하는 것입니다 (여러 요소가 일치하거나 존재할 때도 작동합니다).

// 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 );
}
 

Stats

1343 Contributors: 38
Friday, June 16, 2017
아래 라이선스: CC-BY-SA

와 제휴하지 않음 Stack Overflow
Rip Tutorial: info@zzzprojects.com

eBook 다운로드