제이쿼리강좌 (1)

💻 Programming/웹프로그래밍

[jQuery] 1. jQuery 시작하기

jQuery란 무엇인가?

jQuery 는 빠르고 정확한 JavaScript Library 입니다. John Resig이라는 사람이 2006년에 만들었다고 하네요. Write less, do more. 이게 jQuery가 탄생한 이유입니다. 적은코드로 많은 일을 하는 것. 

jQuery 는 HTML 문서 traversing, event handling, animating, and Ajax interactions 을 단순화 시켜줍니다.

jQuery의 특징에는 다음과 같은 것들이 있습니다.

  • DOM 조작: Sizzle이라는 selector엔진을 이용해서 DOM 요소를 선택하거나, 검색하거나, 요소의 내용을 수정하는 작업을 용이하게 해줍니다. 

  • Event handling: HTML코드를 사용하지 않고 이벤트 처리를 할 수 있게 해줍니다. 

  • AJAX 지원 

  • 애니메이션 : 상당히 많은 애니메이션 효과를 제공합니다.

  • 가볍다 : 19KB 정도 밖에 안되는 매우 가벼운 라이브러리 입니다. ( Minified and gzipped ).

  • 다양한 브라우저 지원 : IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+

  • 최신 기술 지원 : CSS3 selectors 와 basic XPath 문법을 지원합니다.

jQuery 설치하기

jQuery 설치하는 것은 어렵지 않습니다. 

  1. 최신버전 다운로드하기 : download jQuery  

  2. 다운로드한 최신버전의 jquery-x.y.z.min.js 파일을 프로젝트 경로 내에 넣어주세요, e.g. /jquery.

파일명에 min.js로 끝나는 버전은 최소화된 버전으로 불필요한 빈 줄이나 단어를 제외한 버전이라고 합니다.

 

 

jQuery 라이브러리 사용하기

 jquery 라이브러리 include하는 방법은 다음과 같습니다. 

<html>
<head>
<title>The jQuery Example</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript">
      // you can add our javascript code here 
   </script>   
</head>
<body>
........
</body>
</html>

jQuery 라이브러리 함수 호출하기

As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.

If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

To do this, we register a ready event for the document as follows:

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

To call upon any jQuery library function, use HTML script tags as shown below:

<html>
<head>
<title>The jQuery Example</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   
   <script type="text/javascript" language="javascript">
   // <![CDATA[
   $(document).ready(function() {
      $("div").click(function() {
        alert("Hello world!");
      });
   });
   // ]]>
   </script>

</head>
<body>
<div id="newdiv">
Click on this to see a dialogue box.
</div>
</body>
</html>

 

 

사용자 정의 스크립트 사용하기

custom.js 파일에 내가 정의한 기능을 따로 정의합니다.

/* Filename: custom.js */
$(document).ready(function() {
  $("div").click(function() {
 alert("Hello world!");
  });
});

다른 페이지에서 custom.js 파일내에 정의된 기능을 실행하고자 할때에는 이 파일을 추가하면 됩니다

<html>
<head>
<title>The jQuery Example</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" 
   src="/jquery/custom.js"></script>
</head>
<body>
<div id="newdiv">
Click on this to see a dialogue box.
</div>
</body>
</html>

 

다른 라이브러리 동시 사용하기:

jQuery 를 다른 라이브러리와 함께 사용하게 되면 충돌가능성이 있을 수 있습니다. $ 기호를 다른 라이브러리에서도 사용할 수 있기 때문입니다.   

 

 $.noConflict() 메소드를 실행하면 $ 변수를 먼저 import한 라이브러리에 우선권을 넘기게 됩니다. jQuery에서 $는 단지 jQuery의 alias일 뿐이므로 $를 쓰지 않아도 전혀 문제될 것이 없습니다. 사용법을 한번 보시죠. 

// Import other library
// Import jQuery
$.noConflict();
// Code that uses other library's $ can follow here.

이 방법은 특히 .ready() 메소드의 기능과 쓰일때 강력하다고 하네요. jQuery의 $를 사용할 수 있게 해주기 때문이죠.  

사용법을 한번 보실까요? 

// Import other library
// Import jQuery
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
DOM Element

 

 

 

 

Reference : http://www.tutorialspoint.com/jquery/jquery-overview.htm

 

 

 

 

 

저작자표시 비영리 변경금지

'💻 Programming > 웹프로그래밍' 카테고리의 다른 글

AJAX란? - 이벤트 종류  (0) 2016.06.12
AJAX란? - 서버로부터 응답받기  (0) 2016.06.12
AJAX란? - 서버로 요청하기  (1) 2016.06.12
Ajax 란? - Ajax 시작하기  (1) 2016.06.12
[jQuery] 2. jQuery Basics ( 기본 )  (0) 2015.08.06

Category

Recent Posts

Recent Comments

관리자 | 글쓰기

티스토리툴바