[jQuery] jQuery 선택자와 DOM 조작

jQuery는 CSS 선택자를 활용하여 DOM(Document Object Model) 요소를 선택하고, 선택한 요소를 다루는데 매우 편리한 메서드들을 제공합니다. 이를 통해 웹 개발자들은 더 쉽게 원하는 요소를 선택하고 조작할 수 있습니다.

---

jQuery 선택자

jQuery는 $() 함수를 사용하여 CSS 선택자를 전달하여 DOM 요소를 선택합니다. 이를 통해 다양한 방법으로 요소를 선택할 수 있습니다.

요소 선택자
특정 태그의 모든 요소를 선택합니다.

let allParagraphs = $('p'); // 모든 <p> 요소를 선택

클래스 선택자
특정 클래스를 가진 요소들을 선택합니다.

let highlightedItems = $('.highlight'); // class="highlight"를 가진 요소들을 선택

ID 선택자
특정 ID를 가진 요소를 선택합니다.

let headerElement = $('#header'); // id="header"인 요소를 선택

복합 선택자
복합 선택자를 사용하여 여러 조건을 조합하여 요소를 선택할 수 있습니다.

let complexSelector = $('.container p.highlight'); // class="container" 안에 있는 class="highlight"를 가진 <p> 요소를 선택

---

DOM 조작

jQuery를 사용하여 선택한 요소의 내용, 속성, 스타일 등을 손쉽게 조작할 수 있습니다.

내용 변경
text() 메서드를 사용하여 선택한 요소의 텍스트 내용을 변경할 수 있습니다.

$('h1').text('New Heading'); // <h1> 요소의 텍스트 내용을 변경

HTML 변경
html() 메서드를 사용하여 선택한 요소의 HTML 내용을 변경할 수 있습니다.

$('.content').html('<p>This is new content.</p>'); // class="content" 요소의 HTML 내용을 변경

속성 변경
attr() 메서드를 사용하여 선택한 요소의 속성 값을 변경할 수 있습니다.

$('img').attr('src', 'new-image.jpg'); // <img> 요소의 src 속성 값을 변경

스타일 변경
css() 메서드를 사용하여 선택한 요소의 스타일을 변경할 수 있습니다.

$('.box').css('background-color', 'red'); // class="box" 요소의 배경색을 빨간색으로 변경

클래스 추가/제거/토글
addClass(), removeClass(), toggleClass() 메서드를 사용하여 클래스를 추가, 제거 또는 토글할 수 있습니다.

$('.element').addClass('active'); // class="element" 요소에 'active' 클래스를 추가
$('.element').removeClass('inactive'); // class="element" 요소에서 'inactive' 클래스를 제거
$('.element').toggleClass('selected'); // class="element" 요소의 'selected' 클래스를 토글 (있으면 제거, 없으면 추가)

---

jQuery 선택자와 DOM 조작을 활용하면 웹 개발에서 요소를 쉽게 선택하고 조작할 수 있습니다. 웹 페이지의 동적인 처리와 상호작용에 jQuery를 효과적으로 사용하여 사용자 경험을 개선하고, 코드의 가독성을 높일 수 있습니다. jQuery를 적절히 활용하여 더욱 편리한 웹 프론트엔드 개발을 경험해보세요!