jQuery-개요

jQuery 란 무엇입니까?

jQuery는 2006 년 John Resig가 멋진 모토로 만든 빠르고 간결한 JavaScript 라이브러리입니다. Write less, do more. jQuery는 신속한 웹 개발을 위해 HTML 문서 탐색, 이벤트 처리, 애니메이션 및 Ajax 상호 작용을 단순화합니다. jQuery는 적은 코드를 작성하여 다양한 작업을 단순화하도록 설계된 JavaScript 툴킷입니다. 다음은 jQuery가 지원하는 중요한 핵심 기능 목록입니다.

DOM manipulation − jQuery를 사용하면 브라우저 간 오픈 소스 선택기 엔진을 사용하여 DOM 요소를 쉽게 선택하고 협상하고 콘텐츠를 수정할 수 있습니다. Sizzle.
Event handling − jQuery는 이벤트 핸들러로 HTML 코드 자체를 복잡하게 만들 필요없이 사용자가 링크를 클릭하는 것과 같은 다양한 이벤트를 캡처 할 수있는 우아한 방법을 제공합니다.
AJAX Support − jQuery는 AJAX 기술을 사용하여 반응적이고 기능이 풍부한 사이트를 개발하는 데 많은 도움이됩니다.
Animations − jQuery는 웹 사이트에서 사용할 수있는 많은 내장 애니메이션 효과를 제공합니다.
Lightweight − jQuery는 크기가 약 19KB (최소화 및 gzipped) 인 매우 가벼운 라이브러리입니다.
Cross Browser Support − jQuery는 브라우저 간 지원이 가능하며 IE 6.0+, FF 2.0+, Safari 3.0+, Chrome 및 Opera 9.0+에서 잘 작동합니다.
Latest Technology − jQuery는 CSS3 선택기와 기본 XPath 구문을 지원합니다.

jQuery를 사용하는 방법?

jQuery를 사용하는 방법에는 두 가지가 있습니다.

Local Installation − 로컬 컴퓨터에 jQuery 라이브러리를 다운로드하여 HTML 코드에 포함 할 수 있습니다.
CDN Based Version − CDN (Content Delivery Network)에서 직접 HTML 코드에 jQuery 라이브러리를 포함 할 수 있습니다.

로컬 설치

다음으로 이동 https://jquery.com/download/ 사용 가능한 최신 버전을 다운로드하십시오.
이제 다운로드 jquery-2.1.3.min.js 웹 사이트의 디렉토리에있는 파일, 예 : / jquery.

예

이제 다음과 같이 HTML 파일에 jquery 라이브러리를 포함 할 수 있습니다.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

이것은 다음 결과를 생성합니다-

CDN 기반 버전

CDN (Content Delivery Network)에서 직접 jQuery 라이브러리를 HTML 코드에 포함 할 수 있습니다. Google과 Microsoft는 최신 버전의 콘텐츠를 제공합니다.

이 튜토리얼에서는 Google CDN 버전의 라이브러리를 사용하고 있습니다.

예

이제 Google CDN의 jQuery 라이브러리를 사용하여 위의 예를 다시 작성해 보겠습니다.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

이것은 다음 결과를 생성합니다-

jQuery 라이브러리 함수를 호출하는 방법?

거의 모든 것과 마찬가지로 jQuery를 사용하여 DOM (문서 개체 모델)을 읽거나 조작 할 때 DOM이 준비되는 즉시 이벤트 등을 추가해야합니다.

페이지에서 이벤트가 작동하도록하려면 $ (document) .ready () 함수 내에서 이벤트를 호출해야합니다. DOM이로드 되 자마자 페이지 내용이로드되기 전에 그 안에있는 모든 것이로드됩니다.

이를 위해 다음과 같이 문서에 대한 준비 이벤트를 등록합니다.

$(document).ready(function() {
   // do stuff when DOM is ready
});

jQuery 라이브러리 함수를 호출하려면 아래와 같이 HTML 스크립트 태그를 사용하십시오.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

사용자 지정 스크립트를 사용하는 방법?

사용자 정의 JavaScript 파일에 사용자 정의 코드를 작성하는 것이 좋습니다. custom.js, 다음과 같이-

/* Filename: custom.js */
$(document).ready(function() {

   $("div").click(function() {
      alert("Hello, world!");
   });
});

이제 우리는 custom.js 다음과 같이 HTML 파일의 파일-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" src = "/jquery/custom.js">
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-