[jQuery] 선택 요소에 접근

복습

https://shins99.tistory.com/81

[jQuery] 제이쿼리 선택자

---

getter 메서드와 setter 메서드

- 선택자에 의해 선택된 요소의 값을 읽거나 설정하기 위해선 제이쿼리 메서드를 통해 해당 요소에 접근해야 함

 

- getter 메서드는 선택된 요소에 접근하여 그 값을 읽어오기 위한 메서드

(아무런 인수를 전달하지 않고 호출)

 

- 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("두 번째 아이템을 선택했어요!!");
    });
});

 

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

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

예제
$(function() {
    $("button").on("click", function() {
        $("#list")      // id가 "list"인 요소의 자손 요소 중에서
①          .find("li") // <li>요소를 모두 선택한 후에,
②          .eq(1).html("두 번째 아이템을 선택했어요!!")  // 그 중에서 두 번째 요소의 값을 설정함.
③          .end()      // 다시 id가 "list"인 요소의 자손 요소 중에서 <li>요소를 모두 선택한 후에,
 
④          .eq(2).html("세 번째 아이템도 선택했어요!!"); // 그 중에서 세 번째 요소의 값을 설정함.
    });
});

 

①번 .find() 메서드로 요소 선택

②번  .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>요소의 값을 반환하거나 설정함.