-
요소 접근 메소드프로그래밍/JQuery 2022. 10. 19. 22:37728x90
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>
기본 화면 
설정 버튼 클릭시 html()이 setter 메소드의 기능을 한다. 728x90'프로그래밍 > JQuery' 카테고리의 다른 글
JQuery로 DOM 다루기 - 요소 추가 (0) 2022.10.23 메소드 체이닝(Method Chaining) (0) 2022.10.22 선택자 (0) 2022.10.18 함수 (0) 2022.10.17 JQuery 들어가기 (0) 2022.10.15