login register Sysop! about ME  
qrcode
    최초 작성일 :    2010년 04월 28일
  최종 수정일 :    2010년 04월 28일
  작성자 :    Taeyo
  편집자 :    Taeyo (김 태영)
  읽음수 :    37,469

강좌 목록으로 돌아가기

필자의 잡담~

이 강좌는 jQuery CookBook 편역서에 사전 챕터로 첨부하기 위해 작성된 글입니다.
그렇기에, 경어체를 사용하지 않고 있으니 양해를 부탁드립니다.
참고로, jQuery 1.4의 내용까지 녹여서 편역한 서적 "jQuery CookBook"은 5월 중에 출간 예정입니다.
감사합니다.

jQuery의 4번째 생일을 즈음하여, jQuery 팀은 새로운 버전인 1.4(1.4.2)를 발표하였다. 이전 버전인 1.3(1.3.2)에 비해 놀랄만한 성능의 향상이 있었으며, 기존 기능의 개선 및 새로운 기능의 추가가 이루어졌다. 하지만, 그 모든 변경 사항을 전부 알아야 할 필요는 없을 것이다. 자신이 jQuery를 어느 정도 수준으로 사용하느냐에 따라 알아야 할 내용도 다를 테니 말이다. 즉, 여러분이 jQuery를 주로 페이지 조작을 위해 사용하고 있다면, 플러그인 개발자나 라이브러리 개발자들이 알아야 할 수준의 내용까지 애써 알아야 필요는 없다는 것이다. 물론, 알아 두어서 나쁠 것은 없겠지만 경험적으로 그러한 내용은 필요할 때 찾아보는 것이 더 효율적이라고 생각한다.

그렇기에, 여기서 jQuery 1.4의 모든 변경사항을 세밀하게 다루지는 않을 것이다. 다만, 반드시 알아두어야 할 사항들을 중심으로 하여 전반적으로 내용을 훑어볼까 한다(그래도 꽤 내용이 많아서 2회에 걸쳐 강좌를 올릴 예정이다).

그리고, 한가지 더 강조할 것이 있다. 그것은 여러분이 jQuery 초보자라면 이번 강좌는 그다지 도움이 되지는 않을 것이라는 점이다. 즉, 초보자인 여러분은 굳이 최근에 새로 등장한 jQuery 1.4의 변경사항을 알아야 할 이유가 없다는 것이다. 여러분이 jQuery 1.0, 1.1, 1.2, 1.3에서 추가된 내용들을 모두 기억하지 않는 것처럼, 1.4에서 추가된 내용도 굳이 알고자 애쓸 필요는 없다. 모든 내용은 jQuery를 공부하다 보면 자연스레 알아질 것이니 말이다.

그럼에도 불구하고, 이번 강좌를 작성한 이유는 jQuery 1.3을 깊이 있게 다룬 독자들에게 조금이나마 도움이 되고자 해서이다(실은, jQuery CookBook에 1.4 내용을 추가하다가 강좌로도 제공하면 좋겠다 싶어서… 쿨럭). 그렇기에, jQuery에 대한 사전 지식이 없는 독자라면 태오 사이트의 jQuery 초급 강좌들을 살펴볼 것을 권장한다. 초심자에게 이번 장은 쓸데없이 어려운 이야기로 여겨질 수 있을 것이니 말이다.

완전한 전체 변경사항은 http://jquery14.com을 참고하기 바란다.

1. 기본 기능

빠른 요소 생성

1.4에서 새로 추가된 편리한 기능 중 눈에 띄는 첫 번째는 요소 생성을 보다 효율적으로 빠르게 할 수 있도록 생성 구문을 개선한 것이다. 예전에는 동적으로 단일 요소를 생성하려면 $("<div>")와 같은 구문을 통해 요소를 생성한 다음, 어트리뷰트 지정하거나 해야 했지만, 이제는 추가 매개변수로 개체를 전달할 수가 있게 되었기에, 그 개체를 통해서 어트리뷰트와 이벤트들을 지정할 수 있다. 즉, 다음과 같은 구문을 사용하여 요소를 생성하면서 동시에 어트리뷰트 지정 및 이벤트 등록까지 한번에 할 수 있다는 것이다.

$("<div>"
{
   id: 
"foo",
   css: {
      height: 
"50px",
      width: 
"50px",
      color: 
"blue",
      backgroundColor: 
"#eeeeee"
   
},
   click: 
function() {
      $(
this).css("backgroundColor""red");
   
}
}).appendTo(
"body");

eq(-n)과 get(-n) 지원

1.4부터는 eq()와 get() 메서드에 음수를 사용할 수 있다. 음수가 지정되면 그는 뒤에서부터 계산하여 개체를 반환하게 된다. 예를 들어, 다음의 두 구문은 각각 전체 td들 중 뒤에서 두 번째 개체와 요소를 반환할 것이다.

$("div").eq(-2);
$("div").get(-2);

새로운 메서드: first(), last()

이전 버전에서는 필터로는 :first와 :last가 존재했지만, first()나 last()와 같은 메서드는 제공되지 않았었다. 1.4에서는 이러한 메서드도 추가되었는데, 이 메서드들은 사실 내부적으로는 각각 .eq(0)과 .eq(-1)이다.

새로운 메서드: toArray()

jQuery 개체 집합에서 요소 배열을 얻어내기 위해서는 그 동안 get() 메서드를 사용해 왔을 것이다. 이제는 동일한 목적을 위해서 toArray() 메서드도 사용할 수 있다. 다만, get() 메서드는 인자로 숫자를 지정하여 배열 상의 특정 요소를 딱 집어서 가져올 수 있었지만, toArray() 메서드에는 인자를 지정할 수 없다. 이는 그 이름이 말해주듯이 오직 요소 배열을 얻어내기 위한 목적의 메서드이다.

jQuery() 메서드의 변경

$() 메서드 즉, jQuery() 메서드는 기존 1.3 버전까지만 해도 $(document)와 같은 의미였다. 하지만, 1.4에 들어와서, 이는 빈 개체를 반환하도록 변경되었다. 이는 빈 개체를 만든 다음, 그 안에 동적으로 요소를 추가하고자 하는 경우 유용하게 사용될 수 있다. 반면, 이러한 변경으로 인해서 기존에 자주 사용하던 $().ready() 구문도 자제할 것을 권장하고 있다. 사실, 아직까지 그 구문은 호환성을 위해서 예외적으로 기존처럼 $(document).ready()로서 동작하도록 지원해주고 있긴 하다. 하지만, 더 이상은 이러한 구문을 권장하지 않으며, 확실하게 $(document).ready()나 $(function(){…}) 구문을 사용하는 것을 권장한다.

2. 어트리뷰트 관련 기능들

.attr() 메서드의 개선

attr() 메서드의 설정 값으로 함수를 사용할 수 있을 뿐만 아니라, 그 함수의 인자를 통해서 어트리뷰트의 현재 값을 알아낼 수 있게 되었다. 다음의 코드 예제를 보면 이해하기가 쉬울 것이다.

$("#photo")
   .attr(
"alt"function(index, value) {
      
return "사랑하는 " value
   
});

만일, 소스에서 선택된 요소가 <img … alt="우리 아가" /> 였다고 가정한다면, 상기 코드를 통해서 이미지의 alt는 "사랑하는 우리 아가"로 변경될 것이다. 함수를 사용하여 값을 설정하는 것은 1.3에서부터 이미 지원되었던 부분이지만, 함수 내부에서 인자(value)를 통해 alt 어트리뷰트의 현재 값을 알 수 있다는 부분은 1.4에서 새롭게 개선된 부분이다.

.val() 메서드의 setter 함수 지원

attr() 메서드와는 달리 val() 메서드에 대해서는 기존에 setter 함수가 지원되지 않았다. 즉, val() 메서드의 인자로는 단일 값만을 지정할 수 있었을 뿐 함수를 사용할 수는 없었다는 이야기이다. 하지만, 1.4부터는 여기에도 함수를 사용할 수 있으며, attr() 메서드와 마찬가지로 함수의 인자를 통해서 함수 내부에서 요소의 현재 값도 알아낼 수 있게 되었다.

setter 함수의 지원

방금 설명한 것과 같이, 1.4부터는 attr() 및 val() 메서드에 대해서도 setter 함수가 지원되는데, 사실은 그 밖에도 수 많은 메서드들에 대해 setter 메서드가 지원되도록 확장되었다. 다음은 setter 함수가 지원되는 메서드들의 목록이다.

.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), .toggleClass()

그리고, 다음은 이러한 메서드들 중에서도, attr()이나 val() 메서드처럼 함수의 인자로 요소의 현재값을 제공하는 메서드들을 다시 정리한 것이다.

.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .offset(), .addClass(), .removeClass(), .toggleClass()

3. CSS 관련 기능들

성능 개선

가장 많이 사용되는 jQuery 메서드가 css 관련 메서드이다보니, 이 부분에 대한 성능적인 튜닝이 집중적으로 이루어졌으며, 그 결과, 1.4 버전에서는 이전과 비교하여 .css() 메서드의 성능이 2배 가량 증가하였으며, .addClass(), .removeClass(), .hasClass() 메서드는 3배 정도 성능이 향상되었다.


출처 : http://jquery14.com/day-01

.toggleClass() 메서드 개선

기존 toggleClass() 메서드는 인자로 1개의 css 클래스를 지정할 수 있었지만, 이제는 여러 개의 클래스를 지정할 수 있다. 여러 개의 클래스가 지정되면, 토글 시에 그 클래스들 모두를 합친 스타일이 적용될 것이다. 다음은 코드 예이다.

$("#myButton").click(function() {
   $(
"input").toggleClass("normal selected");
});

만일, 상기 클래스의 css 스타일이 다음과 같다면

.normal
{
    color
:green;
}
.selected
{
    background-color
:yellow;
}

이전의 toggleClass() 코드는 버튼이 한번 클릭되는 경우, normal 클래스와 selected 클래스가 함께 적용된 스타일(녹색 글자에 노란 배경색)이 적용될 것이며, 다시 클릭되는 경우 원래의 스타일로 되돌아 오게 될 것이다.

4. DATA 관련 기능

.data() 메서드 기능 개선

.data()라는 메서드는 모든 형식의 DOM 요소에 임의의 데이터를 저장하고 읽어올 수 있도록 돕는 유용한 메서드이다. 예를 들면, 다음과 같이 편하게 데이터를 저장하고 불러올 수 있었다.

$('body').data('foo'52);
// boby 요소에 foo라는 키로 52라는 값을 저장한다
$('body').data('bar', { myType: 'test', count: 40 });
// boby 요소에 bar라는 키로 개체를 저장한다

alert($('body').data('foo'));  // 52를 메시지박스에 출력한다
alert($('body').data());   // 키를 지정하지 않으면 에러가 난다(1.3의 경우)

다만, 1.3 버전까지는 데이터를 조회하는 경우, 키를 지정하지 않으면 에러가 발생하는 문제가 있었다. 1.4에 들어서서는 이 부분이 개선되었는데, 즉, 키를 지정하지 않는 .data() 호출은 현재 해당 요소에 저장된 전체 개체를 반환하도록 변경되었다.

그렇기에, 1.4를 사용한다면 상기 코드의 마지막 줄은 에러를 발생시키는 것이 아니라, 전체 저장값을 다음과 같은 json 개체로 반환하게 된다.

{foo: 52, bar: { myType: 'test', count: 40 }}

5. 탐색 관련 기능 추가

새로운 메서드: .has()

1.4 에서는 새롭게 :has() 필터와 동일한 역할을 하는 has() 메서드가 추가되었다. 메서드의 사용법은 일반적인 다른 탐색 메서드들과 동일하며, 인자로 셀렉터를 지정할 수 있다

새로운 메서드 : .nextUntil(), .prevUntil(), .parentsUntil()

새롭게 추가된 이들 메서드는 기존의 탐색 메서드인 .nextAll(), .prevAll(), .parents()와 많은 부분이유사하지만, 선택에 경계를 가질 수 있다는 점에서 약간은 다른 메서드이다. 즉, 기존의 .nextAll() 류의 메서드는 대상 요소 이후에 나오는 모든 형제 요소들을 선택하는 메서드였다면, 이번에 추가된 *Until() 메서드들은 대상 요소 이후 어디까지 선택해야 하는지를 지정할 수 있는 메서드라는 점이 차이이다. 말이 어렵게 느껴진다면, 예를 통해서 살펴보도록 하자.

만일, 다음과 같은 HTML을 가지고 있다고 가정해 보자

<body>
   
<p id="p1">p</p>
   
<div id="div1">div</div>
   
<p id="p2">p</p>
   
<p id="p3">p</p>
   
<div id="div2">div</div>
   
<p id="p4">p</p>
   
<div id="div3">div</div>
</body>

그리고, 다음과 같은 jQuery 구문을 사용한다고 해보자.

<script type="text/javascript">
    $(
"#div1").nextUntil("div").css("background-color", "red");
</script>

이는 div1이라는 아이디를 갖는 요소에서 시작하여 그 다음 "div" 요소까지를 범위로 하여, 그 사이에 들어있는 모든 형제 요소를 선택하게 되기에, p2와 p3 요소만이 빨간 배경색을 가지게 될 것이다.

만일, 상기 구문에서 nextUntil() 메서드가 아닌 nextAll()를 사용한다면, 그는 div1 이후에 나오는 모든 형제들 중에서 태그명이 div인 것만을 선택하게 되기에, div2와 div3의 배경색이 빨갛게 될 것이다. 메서드의 차이가 분명하게 느껴지지 않는가?

재미있는 것은 nextUntil()에게 인자를 지정하지 않으면, 그는 끝점에 대한 경계가 주어지지 않은 것으로 인식되어 nextAll()과 완전히 동일하게 동작하게 한다는 것이다.

.add 메서드의 개선

이제 add() 메서드도 컨텍스트를 가질 수 있게 변경되었다. 사실, 일반적으로는 컨텍스트를 지정할 일이 거의 없지만, 특별한 상황에서는 컨텍스트가 필요할 수도 있다. 예를 들면, Ajax 요청에 대한 응답으로 어떤 개체를 받아온 경우, 동적으로 그 개체에게 add() 메서드를 사용해서 요소를 추가해야 한다면, 컨텍스트가 유용할 수 있다.

.closest() 메서드의 개선

이제 closest() 메서드도 컨텍스트를 가질 수 있게 변경되었다. 선택된 요소와 가장 가까운 요소를 찾기 위한 메서드인 closest()에 컨텍스트를 지정한다면, 더욱 빠르게 원하는 요소를 찾아낼 수 있다.


authored by

  goni0607
  2010-04-28(10:25)
캐릭 이미지
감사히 잘 봤습니다~ ^^
  hskim618
  2010-04-28(11:44)
캐릭 이미지
잘 봤습니다.. 많이 좋아졌군요..
  osh2792
  2010-04-28(11:47)
감사합니다.^^
  itist
  2010-04-28(19:25)
캐릭 이미지
잘 봤습니다~~~
  nswonny4
  2010-04-29(09:37)
캐릭 이미지

너무 좋다...
책으로 나오면 바로 예약 콜 ~~!

  assem
  2010-05-04(09:04)
캐릭 이미지
좋다 ....
나오면 필구다 ...

  느림보
  2011-10-02(00:39)
캐릭 이미지
^^...
지금은 웹을 하고 있지 않지만 잘 봤습니다.

  def8890
  2012-01-19(14:40)
캐릭 이미지
몇일전에 jquery 공부를 위해 cook book 을 구매 했는데요 어제 이 사이트를 알고
부터 책은 안보고 이곳 강의만 보고 있습니다. 그러다가 방금 누가 편역했는데 알게
됬는데 신기하네요 ㅋ


 
 
.NET과 Java 동영상 기반의 교육사이트

로딩 중입니다...

서버 프레임워크 지원 : NeoDEEX
based on ASP.NET 3.5
Creative Commons License
{5}
{2} 읽음   :{3} ({4})