2010. 8. 5. 23:35
jQuery
jQuery는 페이지의 DOM요소를 쉽게 선택할 수 있게 해주는 매우 가벼운 라이브러리이다.
- 선택된 결과의 집합을 루프 돌면서 처리하기
var urls = [];
$("div#post a[href]").each(function (i){
urls[i] = $(this).attr('href)
}); alert(urls.join(",");
$().each() 는 루프 즉 jQuery의 for 문이다. - 선택집합을 특정 항목들로 줄이기
.eq() 로 해당 줄을 선택하여 .css("background-color","#CCCCC") 와 같이 지정하여
선택집합을 만들 수 있다.
jQuery('ul > li').eq(1).css('border-bottom', '1px solid #000000'); - 선택된 jQuery 개체를 원래의DOM 개체로 변환하기
jQuery로 페이지의 요소를 선택하면 원래의 DOM 개체가 아닌 jQuery 개체로 된 집합을 반환한다. 이는 jQuery 개체이기 때문에 선택된 집합에 대해 오직 jQuery 메서드만을 실행할수 있다.
선택된 집합에 대해 DO 메서드와 속성을 실행하기 위해서는 이를 원래의 DOM 개체로 변환해야 한다 .get() 메서드로 해결 가능하다. - 선택집합에서 항목의 인덱스 얻기
항목을 클기하는 겨우 해당 학목의 인덱스가 집합 내에서 몇번째인지 알기 위해서 .index() 를 사용 할 수 있다. index() 메서드에 전달도니 대상을 찾지 못하면 -1 을 반환한다. - 기존 배열로부터 고유한 배열 만들기
(function($){
$(document).ready(function(){
var arr = $.map( $('LI') , function(item , index){
while (index <3){
return $(item).html();
}return null;
} );
$(document.body).append("<span>The fisrt three authors are : " + arr.join(',') + "</span>");});})(jQuery); - 선택된 집합의 일부에 대해 동작 수행하기
선택 집합에서 일부를 걸래내기 위한 .slice() 메서드.
$('p').slice(1,3).wrap(<"<i></i>"); == 인덱스가 1~3이전까지 부분집합을 wrap 으로 감싸줌 - jQuery가 다른 라이브러리와 충돌하지 않도록 설정하기
jQuery.noConflict() 가 충돌을 막아줌 선언하게 되면 $변수를 가장 먼저 구현하고 있는 라이브러리에게 그에 대한 제어권을 양보한다. $을 양보한다음은 jQuery에 접근 할려면 무조건 jQuery 변수를 사용해야함
var j = jQuery.noConflict(); 로 하게 되면 j로 jQuery를 정의 하게 된다.
jQuery.noConflict();
(function($){})(jQuery); == 내부, 지역 변수로 jQuery가 $ 을 쓸수 있음 그러나 내부에선 다른 라이브러리가 $ 을 쓸수 없음. - 플러그인을 통해 기능 추가하기
스크립트를 .js 를 추가 해주고 $('.pics').cycle('fade'); 를 실행하게 되면
간단히 플러그인을 사용할 수 있다 - 사용된 질의 알아내기
jQuery를 확장하는 플러그인이나 메서드를 작성하는 경우 호출하는 동안에 그 안에서 해당 메서드가 재호출될 수 있기 때문에, 메서드에 정확히 어떤 선택집합과 컨텍스트가 사용되었는지를 알아야할 경우 : .selector , .context 를 함께 사용하여 원래 전달되었던 질의를 다시 만들어 낼수 있다.
* jQuery 관련 자료는 모두 O'REILLY 의 jQuery Cookbook 에서 발취하였습니다.
상업적 목적 또는 문제가 될 소지가 있는 곳에 사용하지 말아주세요