JQuery day3

JQuery getter, setter 메소드

JQuery getter, setter 메소드

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

setter : 선택된 요소에 접근하여 값을 설정하기 위한 메소드

두 메소드 이름이 같으나 getter 메소드는 인수를 전달하기 않고 setter 메소드는 대입하고자는 값을 인수로 전달한다.

종류	설명
html()	해당 요소의 HTML 컨텐츠를 반환하거나 설정(innerHTML과 같은 기능)
text()	해당 요소의 텍스트 컨텐츠를 반환하거나 설정(innerText와 같은 기능)
width()	선택한 요소 중에서 첫번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정하기
height()	선택한 요소 중에서 첫번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정
attr()	해당 요소의 명시된 속성의 속성값을 반환하거나 설정
position()	선택한 요소 중에서 첫번째 요소에 대해 특정 위치에 존재하는 객체를 반환하거나 설정
val()	form 요소의 값을 반환하나거나 설정

<h2>getter, setter</h2>
<p>버튼을 누르면 p태그에 새로운 텍스트를 설정합니다</p>
<button>설정</button>
<p id="text"></p>

<script>
$(function(){
    $('button').on('click', function(){
        const newText = $('h2').html(); // getter : h2 태그의 html 내용을 받아온다.
        $('#text').html(newText); // setter : p 태그의 html 내용에 h2태그의 내용을 넣는다.
    });
});
</script>

이벤트가 작동하지 않았을 때)

이벤트가 작동된 후)