Where The Streets Have No Name

How JQuery Works 본문

Developement/Web

How JQuery Works

highheat 2008. 3. 31. 21:02



기초

이 문서는 JQuery를 시작하는데 도움을 주기 위한 기본적인 튜토리얼이다. 아직 테스트 페이지를 만들어두지 않았다면,
다음과 같은 HTML 페이지를 만드는 것에서부터 시작해보도록 하자. 

<html>

<head>

  <script type="text/javascript" src="path/to/jquery.js"></script>

  <script type="text/javascript">    

  // Your code goes here

  </script>

</head>

<body>

  <a href="http://jquery.com/">jQuery</a>

</body>

</html>

script 태그의 src 속성의 패스를 jquery.js 가 있는 곳을 가리키도록 해야 한다. 예를들어 jquery.js가 HTML 페이지와 같은
디렉토리에 있다면 다음과 같이 한다. 

<script type="text/javascript" src="jquery.js"></script>

jQuery 는 다운로드 페이지에서 받을 수 있다.

문서가 로드되었을 때 코드 실행하기

많은 javascript 프로그래머들이 하는 첫번째 일은 다음과 같이 코드를 추가하는 일이다. 

 window.onload = function(){ ... }

function 안에는 페이지가 로드 되자마자 실행하기를 원하는 코드가 들어간다. 하지만 그 코드는 페이지의 이미지(배너 광고를 포함
해서)가 로드될 때까지 실행되지 않을 것이다. 그렇다고 windows.onload를 사용하지 않으면, HTML의 'document'가 아직 로드되
지 않은 상태에서 코드가 실행될 수도 있기 때문에, 위와 같이 사용을 한다.

이 두 가지 문제를 해결하기 위해 jQuery는 ready event라고 불리는 다음과 같은 간단한 문장을 갖고 있다. 

$(document).ready(function(){  // Your code here});

이 코드는 'document'를 조작할 수 있을 때까지 기다리는데, 이것이 바로 우리가 원한 것이다. 그러므로 위의 코드를 테스트 페이
지의 script 부분에 갖다 붙이도록 하자.

Click 했을 때 무언가 실행되도록 하기

첫번째로 시도할 것은 링크가 클릭될 때마다 무언가 실행되도록 하는 것이다. ready 함수에 다음과 같이 추가하자. 

$("a").click(function(){  alert("방문해주셔서 감사!");});

HTML 파일을 저장하고 브라우저에서 다시 로드해보자. 페이지의 링크를 클릭하면 브라우저의 alert 창이 뜰 것이다. 그리고
jQuery 메인 페이지로 이동할 것이다.

클릭을 비롯한 대부분의 이벤트를 처리할 때 기본 동작(여기서는 jquery.com으로 이동하는 것)이 실행되는 것을 막을 수 있다.
event handler에서 false를 리턴하면 된다. 

$("a").click(function(){  alert("방문해주셔서 감사!");  return false;});

class 추가하기

또 한가지 많이 사용되는 것은, HTML 엘리먼트에 class 속성을 추가(혹은 제거)하는 것이다. 예를들어 다음과 같이 한다. 

$("a").addClass("test");

HTML에 다음과 같이 스타일을 추가한다. 

<style type="text/css">a.test { font-weight: bold; }</style>

그리고 위의 addClass를 호출하면, 모든 A 엘리먼트가 bold로 바뀔 것이다. class를 제거하고 싶으면 removeClass를 사용하면
된다.

특수 효과

jQuery에서는 웹 페이지를 정말 뛰어나게 만들기 위한 몇 가지 효과를 제공한다. 테스트 페이지에 추가하기 위해, 앞에서 나온
click 함수를 다음과 같이 바꿔보자. 

$("a").click(function(){  $(this).hide("slow");  return false;});

이제 링크를 클릭해보라. 천천히 사라질것이다.

Chainability (jQuery의 마술)

jQuery는 코드를 짧고 간단하게 만들기 위한 재미있는 컨셉을 사용한다. 객체 지향 프로그래망에 익숙한 사람이라면 쉽게 느껴질
것이다.

간단히 말하면, jQuery의 모든 메소드는 쿼리 객체 그 자체를 리턴한다. 따라서 '연결(chain)'해서 사용할 수 있다. 예를들면, 

$("a").addClass("test").show().html("foo");

각각의 메소드 (addClass, show, html)은 jQuery 객체를 리턴하므로, 현재의 엘리먼트 집합에 다른 메소드를 적용할 수 있다.

좀 더 나아가서, 선택된 엘리먼트 집합에 엘리먼트를 추가하거나 제거하는 등의 변형을 가한 다음, 원래의 엘리먼트들을 다시 선택
할 수도 있다. 예를들어, 

$("a").filter(".clickme").click(function() {

  alert("click!");

}).end().filter(".hideme").click(function() {

  $(this).hide();

});

jQuery로 선택된 엘리먼트의 집합을 변형할 수 있고 end() 메소드로 원래대로 돌려놓을 수 있는 메소드는 다음과 같다.

  • add()
  • children()
  • eq()
  • filter()
  • find()
  • gt()
  • lt()
  • next()
  • not()
  • parent()
  • parents()
  • siblings()

각 메소드에 대한 자세한 내용은 API 문서를 확인해 볼 것.

콜백, 함수 그리고 'this'

콜백은 다른 함수의 인자(argument)로 전달되어, 부모 함수가 완료된 다음 실행되는 함수이다.

또하나 중요한 점은 콜백을 적절하게 넘기는 방법에 대한 것이다. 이 부부은 내가 종종 정확한 문법에 대해 잊어버리는 부분이다.

인자가 없는 콜백

인자가 없는 콜백의 경우에는 다음과 같다. 

$.get('myhtmlpage.html', myCallBack);

두번째 파라미터는 단순히 함수 이름이라는 점에 주의할 것.

인자가 있는 콜백

"인자를 넘기고 싶으면 어떻게 하지?"라고 스스로에게 물을지도 모르겠다.

잘못된 방법 

$.get('myhtmlpage.html', myCallBack(param1, param2));

이 코드는 myCallBack(param1, parame)를 실행한 다음, 그 결과값을 두번째 파라미터로 넘긴다. 따라서 제대로 동작하지 않을
것이다.

제대로 된 방법 

$.get('myhtmlpage.html', function(){  myCallBack(param1, param2);});

'이름없는 함수' (anonymous function)을 넘기고, 그 안에서 인자와 함께 함수를 실행하면 된다. 이 방법은 제대로 동작하는데, 왜
냐하면 '이름없는 함수'를 실행하지 않고 전달하기 때문이다.

출처: http://technet.ui2.co.kr/wiki/index.php/JQuery:HowJQueryWorks

'Developement/Web' Related Articles more