jQuery) DOM 선택 및 조작

jQuery를 이용해 DOM 요소를 선택하고 조작하는 주요 함수들입니다.

• $() (선택자 함수)
  DOM 요소를 선택하여 조작합니다. CSS 선택자를 사용하여 다양한 요소를 선택할 수 있습니다.

// id가 'example'인 요소를 선택
$('#example').css('color', 'blue');

// 클래스가 'item'인 모든 요소를 선택
$('.item').hide();

 

.css()
선택한 요소의 CSS 스타일을 변경할 때 사용합니다.

$('#example').css('color', 'red');  // 색상 변경

 

.html() / .text()
요소의 HTML 내용 또는 텍스트 내용을 가져오거나 설정할 수 있습니다.

$('#example').html('<strong>강조된 텍스트</strong>');  // HTML 변경
$('#example').text('일반 텍스트로 변경');  // 텍스트 변경

 

.val()
<input>, <textarea>, <select> 요소의 값을 가져오거나 설정합니다.

var value = $('#inputField').val();  // 입력값 가져오기
$('#inputField').val('새로운 값');   // 입력값 설정

 

.addClass() / .removeClass() / .toggleClass()
요소에 클래스를 추가, 제거 또는 토글합니다.

$('#example').addClass('highlight');  // 클래스 추가
$('#example').removeClass('highlight');  // 클래스 제거
$('#example').toggleClass('highlight');  // 클래스 토글