jQuery 입문 | 요소의 선택 | 선택된 요소에 접근(getter, setter)

getter 메소드와 setter 메소드

선택자에 의해 선택된 요소의 값을 읽거나 설정하기 위해서는 jQuery 메소드를 통해 해당 요소에 접근할 수 있다.

getter 메소드는 선택된 요소에 접근하여 그 값을 읽어오기 위한 메소드이다.
getter 메소드는 아무런 인수를 전달하지 않고 호출한다.

setter 메소드는 선택된 요소에 접근하여 그 값을 설정하기 위한 메소드이다.
setter 메소드는 대입하고자 하는 값을 인수로 전달하여 호출한다.

다음 예제는 <h1>요소에 접근하여 그 값을 읽어들인 후, 아이디가 “text"인 요소의 값을 해당 값으로 설정하는 예제이다.

var newText = $("#hello").html();
$("#newText").html(newText);

코드 실행

위 예제의 첫번째 라인의 .html() 메소드 호출에는 전달되는 인수가 없어서, 해당 HTML 요소에서 값을 읽어오는 getter 메소드로 사용된다.
그에 비해 두번째 라인의 .html() 메소드 호출에는 전달되는 인수가 있어서, 해당 HTML 요소에 새로운 문장을 설정하는 setter 메소드로 사용된다.

대표적인 getter 메소드와 setter 메소드

요소에 접근하여 요소의 값을 읽거나 설정할 수 있도록 해주는 대표적인 getter 메소드와 setter 메소드는 다음과 같다.

메소드 체이닝(method chaining)

getter 메소드는 선택된 요소의 값을 읽어서 그 값을 반환한다.
만약 선택된 요소가 여러 개 존재하면, getter 메소드는 가장 ‘첫 번째 요소’의 값만을 반환할 것이다.

하지만 setter 메소드는 선택된 ‘모든 요소’에 인수로 전달된 값을 설정한다.
그리고 선택된 모든 요소에 접근할 수 있는 또 다른 jQuery 객체를 반환한다.

이렇게 반환된 jQuery 객체를 이용하면 메소드를 호출할 때마다 세미콜론(;)을 사용하지 않고도, 곧바로 이어서 다른 jQuery 메소드를 호출할 수 있다.
이런 방식으로 여러 개의 메소드가 연속으로 호출되는 것을 **메소드 체이닝(method chaining)**이라고 한다.

다음 예제는 선택된 요소에 .find(), .eq(), .append() 메소드를 연속으로 호출하는 예제이다.

$("ul").find("li").eq(1).append(" - 추천 메뉴입니다.");

<ul> 요소에서 <li>를 찾아, 인덱스가 1인 요소에 문자열이 추가한다.

<ul>
  <li>에스프레소</li>
  <li>아메리카노</li>
  <li>카페라떼</li>
</ul>

코드 실행

.eq() 메소드는 선택한 요소 중에서 지정된 인덱스에 해당하는 요소를 선택하는 메소드이다.

메소드 체이닝 도중에 .end() 메소드를 사용하면 바로 이전에 선택했던 요소의 집합을 다시 선택할 수 있다.

$("ul").find("li").eq(1).append(" - 추천 메뉴입니다.")
  .end().eq(2).append(" - 추천 메뉴입니다.");

<ul> 요소에서 <li>를 찾아, 인덱스가 1인 요소에 문자열이 추가하고, .end() 메소드를 사용하여 append() 메소드 이전으로 돌아서 다시 인덱스가 2인 요소를 선택하여 문자열을 추가한다.

코드 실행

.width() 메소드와 .height() 메소드

jQuery에서는 선택한 요소의 너비 및 높이를 반환(getter)하거나 설정(setter)하기 위한 .width() 메소드와 .height() 메소드를 제공한다.

// setter
$("img").width(300);
$("img").height(300);

// getter
var imgWidth = $("img").width();
var imgHeight = $("img").height();
$("p").html("가로 길이:" + imgWidth + ", 높이 :" + imgHeight);

코드 실행

위 예제에서는 첫번째 .width() 메소드와 .height() 메소드에서는 인수를 전달하여 너비와 높이 값을 설정하기 위한 setter 메소드로 사용하고 있다. 두번째 .width() 메소드와 .height() 메소드에서는 getter 메소드로 사용하고 있다.

.attr() 메소드

.attr() 메소드는 선택한 요소의 특정 속성값을 반환하거나 설정하기 위해 사용한다.

// setter
$("img").attr("width", "300");

// getter
var imgWidth = $("img").attr("width");
$("p").html("변경된 이미지 너비:" + imgWidth);

코드 실행

위 예제에서는 첫번째 .attr() 메소드에서는 인수를 두개를 전달하여, 해당 HTML 요소에 첫 번째 인수로 전달받은 이름의 속성값으로 두 번째 인수로 전달받은 값을 설정하는 setter 메소드로 사용하고 있다.
두번째 .attr() 메소드에는 인수를 하나만 전달하여, 해당 HTML 요소에서 인수로 전달받은 이름의 속성값을 읽어오는 getter 메소드로 사용하고 있다.