UIX

jQuery 이해 6 - 메소드 특징 이해

jQuery의 Selector메소드, CSS메소드, Attribute메소드를 살펴봤다. jQuery 특징이 보이는가?

그럼 몇가지 특징을 찾아보자. (소개하는 예제들은 예제페이지로 이동한후 개발자도구 콘솔을 열어서 입력하면서 테스트 해보면 된다)

어떤 엘리먼트를 타겟으로 하는가?

// 모든 div안에 text를 집어넣는다
$('div').html("text")

// 모든 div가 아니라 $('div') 에서 가장 처음에 발견된 엘리먼트의 width를 구한다
$('div').width();

jQuery객체를 리턴하는가?

많은 메소드들이 jQuery 자기 자신을 리턴한다. 이렇게 되면 메소드체이닝이 가능하게 된다

//  bgcolor 를 변경하고 uix.kr 텍스트를 집어 넣어라!
$('#box').css("background-color","red").html("uix.kr")

css() 메소드에서 처음 선택했던 엘리먼트인 jQuery객체 $(‘#box’) 를 그대로 리턴한다. 그래서 바로 이어서 html() 이 사용가능해 지는 이유이다.

그럼 아래소스는 어떨까?

// width를 구하고 uix.kr 텍스트를 집어넣어라?
$('#box').width().html("uix.kr")

width() 메소드는 width값을 리턴하기에 메소드체이닝이 불가능하다. 위의 소스를 콘솔에서 실행하면 에러가 발생한다.

수많은 인자 타입들

메소드들에 많은 인자타입이 존재한다 (오버로딩)

//모든 div에 border 클래스를 추가
$("div").addClass("border")

//모든 div에 div-{index} 클래스 추가
$('div').addClass(function(index){   return "div-" + index  })

인자가 없을경우엔 getter 가 되고 있을경우엔 setter 가 되는 경우도 있다

$('#box').width(300) //300px 로 설정
$('#box').width() // width 구하기
blog comments powered by Disqus

Published

02 March 2012

Tags