프로그래밍/JQuery
요소 접근 메소드
하와이블루
2022. 10. 19. 22:37
728x90
Jquery에서 선택자로 선택된 요소에 접근하여 값은 대입하거나 값을 호출할 수 있는 메소드에 대해 알아보자.
getter / setter 메소드에서 getter 메소드는 선택된 요소에 접근하여 값을 읽어오기 위한 메소드로 아무런 인수를 전달하지 않고 호출한다. setter 메소드는 선택된 요소에 접근하여 값을 설정하기 위한 메소드로 대입하고자하는 인수로 전달하여 호출한다.
메소드 이름이 같으나 getter 메소드는 인수를 전달하기 않고 setter 메소드는 대입하고자는 값을 인수로 전달한다.
| 종류 | 설명 |
| html() | 해당 요소의 HTML 컨텐츠를 반환하거나 설정(innerHTML과 같은 기능) |
| text() | 해당 요소의 텍스트 컨텐츠를 반환하거나 설정(innerText와 같은 기능) |
| width() | 선택한 요소 중에서 첫번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정하기 |
| height() | 선택한 요소 중에서 첫번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정 |
| attr() | 해당 요소의 명시된 속성의 속성값을 반환하거나 설정 |
| position() | 선택한 요소 중에서 첫번째 요소에 대해 특정 위치에 존재하는 객체를 반환하거나 설정 |
| val() | form 요소의 값을 반환하나거나 설정 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>getter, setter</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(function(){
$('button').on('click', function(){
const newText = $('h2').html(); // getter
$('#text').html(newText); // setter
});
});
</script>
</head>
<body>
<h2>getter, setter</h2>
<p>버튼을 누르면 p태그에 새로운 텍스트를 설정합니다</p>
<button>설정</button>
<p id="text"></p>
</body>
</html>
728x90