선택된 요소 접근

getter, setter method

getter : 선택된 요소에 접근해 그 값을 읽어오기 위한 메소드. (아무런 인수를 전달하지 않고 return)

setter : 선택된 요소에 접근해 그 값을 설정하기 위한 메소드. (대입하고자 하는 값을 인수로 전달해 return)

예시)

$(function() {
    $("button").on("click", function() {
      var B = $("p").html(); // 1. <p>요소의 텍스트를 읽어오는 getter 메소드
      $("#A").html(B);     // 2. id가 "a"인 요소에 새로운 텍스트를 설정하는 setter 메소드
    });
});

결과) button을 click하면 id가 A인 요소 집합에서 각 요소에 B를 HTML 내용으로 설정. B: <p>요소 집합에서 첫 번째 요소의 HTML 콘텐츠

1번처럼 html() method에 인수를 전달하지 않고 호출하면 getter method.

2번처럼 html() method에 인수를 전달하고 호출하면 setter method. (새로운 값을 설정)

 

getter method는 선택된 요소가 여러 개 존재하면, '첫 번째 요소'의 값만 반환.

setter method는 선택된 '모든 요소'에 인수로 전달된 값을 설정.

method chaining

세미콜론(;)을 사용하지 않고도 곧바로 다른 jQuery method를 호출할 수 있다.

여러 개의 method가 연속으로 호출 되는 것.

예)

See the Pen by jongha (@gajong) on CodePen.

end()

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

예시를 보면 ul.first안 .foo를 선택하고 end()로 ul.first로 돌아간 후 .bar를 선택했다.

.end() | jQuery API Documentation