JavaScript 파일은 페이지 로딩 속도 측면에서 페이지의 body가 닫히기 바로 전에 추가해 주는 것이 가장 좋은데, WordPress에 기본적으로 추가된 jQuery는 꼭대기 head 부분에 붙어 있다.

이놈을 맨 아랫부분에 추가하려면, 테마 파일에 있는 functions.php 파일을 열고 WordPress의 wp_register_script()와 wp_enqueue_script() function을 사용하는 다음과 같은 코드를 추가해 준다.

<?php
function my_scripts_enqueue() {
  wp_deregister_script('jquery');
  wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . '://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', false, NULL, true);
  wp_enqueue_script('jquery');
}    

if (!is_admin()) add_action('wp_enqueue_scripts', 'my_scripts_enqueue', 11);
?>

여기에 있는 wp_register_script() function의 parameter 중 네 번째와 다섯 번째가 중요한 요소인데, 각각 $ver과 $in_footer 변수를 의미한다.

$ver 변수는 보통 JavaScript 파일 경로의 마지막 부분에 query string처럼 붙으면서 JavaScript 파일이 갱신되었을 때 caching된 것의 사용을 막으려고 사용되는데, jQuery처럼 Google CDN에서 불러올 때는 오히려 방해되므로 NULL 값을 줘서 없애버린다. 그리고 $in_footer 값에 true를 주면 JavaScript가 body 맨 마지막 부분에 붙게 된다.

jQuery가 네 번째 생일을 맞아 새 버전(1.4)을 발표했다.

지금 당장 jQuery Minified 버전과 jQuery Regular 버전을 내려받아 둘러보고 자신의 사이트에 바로 적용시킬 수가 있다. 물론 Google에서 호스팅하고 있는 놈을 자신의 사이트에 직접 추가놓는 것이 여러모로 유리할 것이다.

참고로, WordPress에 새로운 버전의 jQuery를 추가할 때는 plugin들의 중복 loading을 막기위한 약간의 주의가 필요한데, 사용하고 있는 테마 디렉토리 밑에 있는 functions.php 파일에 다음과 같이 추가해 준다.

if( !is_admin()){
   wp_deregister_script('jquery');
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"), false, '1.4.0');
   wp_enqueue_script('jquery');
}

새 버전에서는 자주 쓰이는 method들의 function calls 횟수를 줄이면서 실행 속도가 무척 빨라졌다고 하니 반가운 일이다.

다음은 코드로 본 새로운 기능들 중 눈에 띄는 것들:

// Easy Setter Functions
$('a[target]').attr("title", function(i,title){
  return title + " (Opens in External Window)";
});

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

// Per-property Easing
$("#clickme").click(function() {
  $("div").animate({
    width: ["+=200px", "swing"],
    height: ["+=50px", "linear"],
  }, 2000, function() {
      $(this).after("<div>Animation complete.</div>");
  });
});

// Event Multi-binding
$("div.test").bind({
  click: function(){
    $(this).addClass("active");
  },
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});

더불어서, jQuery API도 자기만의 sub-domain에 자리잡게 되었다: http://api.jquery.com/
PDF 혹은 JPEG 형식의 jQuery 1.4 API Cheat Sheet과 jQuery 1.4 iPhone reference app도 챙겨놓고 볼 일.

추가 참고 문서: jQuery 1.4 Resources For Developers | W3Avenue

갱신: 과거 전통(?)에 어긋나지 않게 일주일여 만에 버그를 잡은 jQuery 1.4.1 버전이 발표되었다.

웹 접근성을 논할 때마다 하나의 권고 사항으로 얘기되는 것이 바로 그림을 설명하는 대체 텍스트(alternative text)를 꼭 입력해 주라는 말이 있다. 이 alt 속성으로서의 올바른 사용 유형이라면, 그림의 성격에 따라 글자 형태의 로고 파일의 경우에는 간단하게 읽히는대로 써주면 될 것이고, 사진일 경우 전달하고자 하는 내용이나 상황을 설명해 주면 될 것이다.

원래 이 alt 속성에 지정되어 있는 텍스트는 브라우저의 그림 파일 표시 기능을 꺼주지 않는 한 그림 밖으로 보여질 수가 없는 운명이다. 하지만, 그림 밑에 주석을 달고자 할 경우, 이 대체 텍스트가 그 자리에 안성맞춤이 될 수 있지 않을까? 그래서, jQuery를 이용한 간단한 구현 방법을 소개하고자 한다.

먼저, 글에 올려진 주석을 달고자 하는 img를 찾고나서, alt 속성에 있는 대체 텍스트를 구해야 한다.

var targetImg = $('.entry img');
var altText = targetImg.attr('alt');

차후 CSS로 스타일의 정의를 쉽게 하기 위해서 특정 class 값이 주어진 div으로 감싸주는 것이 편할 것이다. 그리고 나서, 그림 밑에 달릴 주석을 위한 공간을 마련해준다. 여기에는 다음과 같은 방법이 사용될 수 있다:

targetImg.wrap('<div class="img-with-description"></div>').after('<span class="img-description">' + altText+'</span>');

여기서 하나 고려해봐야 할 것이, 만약 그림이 글 내용 중에서 float되어 있는 상태라면, 이를 감싸고 있는 div도 같이 float되게 해주어야만 원래 의도한 그림 표시 스타일을 유지할 수 있다. 그래서, img의 float 속성과 너비값을 알아내야 한다.

var imgWidth = targetImg.width();
var floatProperty = targetImg.css('float');

이렇게 해서 얻어진 float 속성을 가지고 그대로 이 속성값을 감싸는 div에도 적용해 준다. 만약, float 속성이 'none'이라면 그림 파일은 중앙 정렬된 상태라고 가정할 수 있고, 따라서 감싸는 div도 margin 값으로 중앙 정렬해준다.

var descriptionImage = $('div.img-with-description');
if(floatProperty == 'none') // aligned center
    descriptionImage.width(imgWidth).css('margin', '0 auto');
else
    descriptionImage.width(imgWidth).css('float', floatProperty);

마지막으로, 감싸주는 div과 주석 부분을 위한 적당한 CSS를 정의해주면 되겠다.

이렇게 해서 완성된 코드는 아래의 페이지에서 확인할 수 있다:
img 속 alt 속성에 있는 내용을 그림 밑으로 끄집어내어 표시해주는 본보기 페이지

alt 속성의 색다른(alternative) 봄나들이 외출.

jQuery 1.3 버전 발표로 언제나 반가운 새로운 기능들과 성능 향상의 소식을 알려왔다.

발표 내용을 요약해 보면,

• 속도 빠르기로 소문난 CSS selector engine인 Sizzle의 채용으로 DOM querying과 관련된 전반적인 속도 향상. (이전 버전보다 거의 49% 속도 개선이 있었다고 함.)
• Event delegation을 위한 "live events" 기능을 지원. 이미 적용된 live event를 없애려면 die method를 써야 함.
• jQuery의 event 시스템을 W3C standards에 맞게 다시 손보면서, event handling이 훨씬 손쉬워졌으며 모든 브라우저들에서 부드럽게 돌아가도록 했다.
• HTML Injection 코드를 다시 작성해서, HTML injecting 작업이 더 빨라짐. (전반적으로 6배 정도의 속도 향상이 있었음.)
• offset method가 재작성되면서, 3배 더 빨라졌음.
• 더 이상 Browser/userAgent Sniffing 질을 그만두고, 대신 Feature Detection 기술을 사용하면서 앞으로 더 긴 미래를 대비하게 됨. 당분간 jQuery.browser 속성은 plugins 호환성을 위해 계속 남겨둔다고 한다.

더불어서, 새로운 모습의 jQuery 1.3 API browser도 소개되었는데, API 탐색이 훨씬 세련되고 간편해졌다. 여기에, AIR를 이용한 offline browser도 같이 제공.

언제나 느끼지만, jQuery와 같은 JavaScript 라이브러리가 없었다면, 황량한 무법천지에 떨구어진 맨살을 드러낸 웹 개발자들의 어깨에 얼마나 더 무거운 짐이 억세게 짓눌러졌을까를 상상해보며, 다시한번 jQuery 탄생 3주년을 축하하고 Software Freedom Conservancy의 일원으로서 앞으로도 든든하게 오랫동안 개발자 곁에 함께하기를 바란다.

웹 페이지에 jQuery를 추가할 때, 이왕이면 Google 서버에서 빠르게 전송해주는 놈을 애용하자.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

개인적으로 함께 작업하기 가장 편안한 JavaScript 라이브러리인 jQuery가 벌써 공개 2주년을 맞이하였다.
이를 기념해서 새로운 버전 1.2.2가 발표되었는데, 바뀐 주요 내용으로 몇몇 버그 수정과 함께 가장 많이 사용되는 DOM element를 jQuery 함수로 전달하는 과정이, 예를 들어 $(DOMElement), 3 배나 더 빨라졌다고 한다.

이 밖에도, .ready() 함수의 경우 Internet Explorer에서의 기능 구현이 개선되었고, 이젠 모든 브라우저가 DOM을 다 읽어들일 때까지 기다리는 것이 아니라 CSS까지 마저 읽어올 때까지 기다려 준단다. 이것은 보통 특정 요소의 스타일을 변경하고 싶을 떄, 어차피 웹 브라우저가 CSS 파일을 먼저 해석해야 하기 때문에 바뀐 변화인 듯.
그리고, .hover()는 이제 새로운 mouseenter와 mouseleave 이벤트로 분리되었다. 참고로, 이놈들은 하위 요소들에도 함께 적용되는 mouseover와 mouseout과는 차별되서, 해당 요소에만 적용된다.
또, 새로 추가된 Mouse Wheel plugin이 소개되었다. 사용 예:

$("div").bind("mousewheel", function(event, delta){
  if ( delta < 0 )
    $(this).append("up");
  else
    $(this).append("down");
});

:not() selector의 사용 용법도 다양해져서, 다음과 같은 작업도 가능해졌다:

$(".hover:not(li.active)")
$("li:not(.active,.hover,:contains(test))")

무척 복잡해 보이지만, 그 사용 목적은 아주 명확하고 세밀해졌다.

일반 jQuery Ajax 작업에도 변화가 있어서, 덤으로 서버에 Accept header 정보도 함께 전달하면서, 원하는 종류의 데이타를 선택적으로 불러올 수 있게 되었다.

매번 생각하지만, jQuery는 개발자들을 위한 두통 완화제일지도.