[Front end] jQuery 선택된 요소 접근 getter, setter

 

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

getter/setter 메서드

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

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

var const = $('#hello').html();
$('#newText').html(newText);

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

 

method chaining

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

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

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

<ul>
    <li>바나나</li>
    <li>레몬</li>
    <li>수박</li>
</ul>

$('ul').find('li').eq(1).append(' - 추천 과일입니다.').end().eq(2).append(' - 추천 과일입니다.');

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

 

width/height 메서드

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

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

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

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

 

attr 메서드

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

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

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

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