선택된 요소에 접근
getter 메소드와 setter 메소드
선택자에 의해 선택된 요소의 값을 읽거나 설정하기 위해서는 제이쿼리 메소드를 통해 해당 요소에 접근해야만 합니다.
getter 메소드는 선택된 요소에 접근하여 그 값을 읽어오기 위한 메소드입니다.
이러한 getter 메소드는 아무런 인수를 전달하지 않고 호출합니다.
setter 메소드는 선택된 요소에 접근하여 그 값을 설정하기 위한 메소드입니다.
이러한 setter 메소드는 대입하고자 하는 값을 인수로 전달하여 호출합니다.
다음 예제는 <h1>요소에 접근하여 그 값을 읽어들인 후, 아이디가 "text"인 요소의 값을 해당 값으로 설정하는 예제입니다.
예제
$(function() {
$("button").on("click", function() {
① var newText = $("h1").html(); // <h1>요소의 텍스트를 읽어오는 getter 메소드
② $("#text").html(newText); // id가 "text"인 요소에 새로운 텍스트를 설정하는 setter 메소드
});
});
위 예제의 ①번 라인처럼 .html() 메소드에 인수를 전달하지 않고 호출하면, 해당 HTML 요소에서 값을 읽어오는 getter 메소드로 사용됩니다.
하지만 ②번 라인처럼 인수를 전달하고 호출하면, 해당 HTML 요소에 새로운 값을 설정하는 setter 메소드로 사용됩니다.
메소드 체이닝(method chaining)
getter 메소드는 선택된 요소의 값을 읽어서 그 값을 반환합니다.
만약 선택된 요소가 여러 개 존재하면, getter 메소드는 가장 '첫 번째 요소'의 값만을 반환할 것입니다.
하지만 setter 메소드는 선택된 '모든 요소'에 인수로 전달된 값을 설정합니다.
그리고 선택된 모든 요소에 접근할 수 있는 또 다른 제이쿼리 객체를 반환합니다.
이렇게 반환된 제이쿼리 객체를 이용하면 세미콜론(;)을 사용하지 않고도, 곧바로 다른 제이쿼리 메소드를 호출할 수 있습니다.
이런 방식으로 여러 개의 메소드가 연속으로 호출되는 것을 메소드 체이닝(method chaining)이라고 합니다.
다음 예제는 선택된 요소에 .find(), .eq(), .html() 메소드를 연속으로 호출하는 예제입니다.
예제
$(function() {
$("button").on("click", function() {
// id가 "list"인 요소의 자손 요소 중에서 <li>요소를 모두 선택한 후에,
// 그 중에서 두 번째 요소의 값을 설정함.
$("#list").find("li").eq(1).html("두 번째 아이템을 선택했어요!!");
});
});
메소드 체이닝 도중에 .end() 메소드를 사용하면 바로 이전에 선택했던 요소의 집합을 다시 선택할 수 있습니다.
예제
$(function() {
$("button").on("click", function() {
$("#list") // id가 "list"인 요소의 자손 요소 중에서
① .find("li") // <li>요소를 모두 선택한 후에,
② .eq(1).html("두 번째 아이템을 선택했어요!!") // 그 중에서 두 번째 요소의 값을 설정함.
③ .end() // 다시 id가 "list"인 요소의 자손 요소 중에서 <li>요소를 모두 선택한 후에,
④ .eq(2).html("세 번째 아이템도 선택했어요!!"); // 그 중에서 세 번째 요소의 값을 설정함.
});
});
위 예제의 ②번 라인에서는 .eq() 메소드를 사용하여 ①번 라인에서 .find() 메소드로 선택한 요소의 집합 중 두 번째 요소를 선택합니다.
그리고 ③번 라인에서 .end() 메소드를 사용하여 .eq() 메소드를 사용하기 이전 집합을 다시 선택하고 있습니다.
따라서 ④번 라인에서 또다시 .eq() 메소드를 사용하여 요소를 선택할 수 있게 됩니다.
.width() 메소드와 .height() 메소드
제이쿼리에서는 선택한 요소의 너비나 높이를 반환하거나 설정하기 위한 .width() 메소드와 .height() 메소드를 제공합니다.
예제
$(function() {
$("#getter").on("click", function() {
① var size = "너비는 " + $("#box").width() + "px이고, 높이는 "
+ $("#box").height() + "px입니다.<br>";
$("#text").html(size);
});
$("#setter").on("click", function() {
② w = $("#box").width();
③ h = $("#box").height();
④ $("#box").width(w/2).height(h/2);
⑤ var size = "너비는 " + $("#box").width() + "px이고, 높이는 "
⑥ + $("#box").height() + "px로 변경되었습니다.<br>";
$("#text").html(size);
});
});
위의 예제에서는 선택한 요소의 너비와 높이 값을 얻기 위해 ①번부터 ③번, ⑤번과 ⑥번 라인까지 .width() 메소드와 .height() 메소드를 getter 메소드로 사용하고 있습니다.
하지만 ④번 라인에서 .width() 메소드와 .height() 메소드는 인수를 전달받아 너비와 높이 값을 설정하기 위한 setter 메소드로 사용하고 있습니다.
.attr() 메소드
.attr() 메소드는 선택한 요소의 특정 속성값을 반환하거나 설정하기 위해 사용합니다.
예제
$(function() {
$("button").on("click", function() {
// <img>요소의 src 속성값을 읽어오는 getter 메소드
① var imgSrc = $("img").attr("src");
// <img>요소의 src 속성값을 새로운 값으로 설정하는 setter 메소드
② $("img").attr("src", "/examples/images/img_flag.png");
});
});
위 예제의 ①번 라인에서는 .attr() 메소드에 인수를 하나만 전달하여, 해당 HTML 요소에서 인수로 전달받은 이름의 속성값을 읽어오는 getter 메소드로 사용하고 있습니다.
하지만 ②번 라인에서는 인수를 두 개 전달하여, 해당 HTML 요소에 첫 번째 인수로 전달받은 이름의 속성값으로 두 번째 인수로전달받은 값을 설정하는 setter 메소드로 사용하고 있습니다.
대표적인 getter 메소드와 setter 메소드
요소에 접근하여 요소의 값을 읽거나 설정할 수 있도록 해주는 대표적인 getter 메소드와 setter 메소드는 다음과 같습니다.
| 메소드 | 설명 |
|---|---|
| .html() | 해당 요소의 HTML 콘텐츠를 반환하거나 설정함. |
| .text() | 해당 요소의 텍스트 콘텐츠를 반환하거나 설정함. |
| .width() | 선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정함. |
| .height() | 선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정함. |
| .attr() | 해당 요소의 명시된 속성의 속성값을 반환하거나 설정함. |
| .position() | 선택한 요소 중에서 첫 번째 요소에 대해 특정 위치에 존재하는 객체를 반환함. (getter 메소드) |
| .val() | <form>요소의 값을 반환하거나 설정함. |
