jQuery 함수의 두 번째 인자 context 지정에 관하여

jQuery를 쓰면서 정말 감탄하는 것이 여러 가지가 있는데 그중 하나가 context 지정이다. jQuery의 코어 함수인 jQuery() 함수에서 두 번째 인자인 context는 첫 번째 인자인 검색표현식의 실행 대상이 된다. 두 번째 인자를 지정하지 않으면 jQuery는 Document 전체에서 검색하게 된다. 이것은 Document의 크기가 크면 Element를 찾을 때 검색 속도가 느릴 수 있다. 이것을 대비하기 위해 두 번째 인자가 있는 것이다.

phpschool.com의 Q&A 게시판에 jQuery 사용에 관한 질문이 있었는데 다들 context를 지정하는 방법을 사용하지 않고 상당히 복잡하게 코딩하고 있었습니다. 질문 내용의 핵심은 “특정 클래스 속의 첫 번째 이미지를 어떻게 찾는가?”입니다.

위와 같은 HTML이 있을 때 클래스 이름이 “test”인 Element에 마우스가 올라 갈 때 그 속에 있는 첫 번째 이미지의 border를 바꾸고 싶다면 아래와 같이 jQuery를 사용하면 됩니다.

$('.test').hover(function(){
 $('img:eq(0)', this).attr('border','1px solid red');
});

위 코드는, “test” 클래스를 찾고 hover() 함수를 이용해 mouseover 이벤트를 등록합니다. mouseover 이벤트가 발생하면 이벤트가 발생한 Element(즉, this)에서 첫 번째 이미지 Element를 선택합니다. 그리고 선택된 이미지의 border 속성을 변경합니다. 아래와 같이 first selector를 사용할 수도 있습니다.

$('.test').hover(function(){
 $('img:first', this).attr('border','1px solid red');
});

이처럼 jQuery() 함수의 두 번째 인자를 잘 지정해 주면 실행 속도도 빨라지고 간결한 코드를 만들 수 있습니다.

Advertisements

Published by: benant

WEB PROGRAMMER. PHP, ASP, XML, Javascript, VBScript, PL/SQL, MySQL, Oracle. scrollads.co.kr 새로운 모바일 광고 서비스. trenue.com 시스탬 트래이딩 서비스. blogman.co.kr 블로그 운영 관리 서비스. creget.co.kr 해외 상품 구매대행. 핫딜 정보 제공 서비스. fgshop.co.kr - 독립형 쇼핑몰 솔루션.

Categories Web태그댓글 한 개

One thought on “jQuery 함수의 두 번째 인자 context 지정에 관하여”

  1. 위의 코드는
    $(“img:eq(0)”,this).attr(“style”, “border:solid 1px red”);
    혹은
    $(“img:eq(0)”,this).css(“border”, “solid 1px red”);
    로 바꿔야 겠네요..
    속성지정이 잘못된 듯..

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중