▶ JavaScript vs jQuery

JavaScript jQuery DOM: jQuery를 사용한 DOM 조작

jQuery는 JavaScript 라이브러리로, Document Object Model (DOM)을 간편하게 조작할 수 있도록 도와줍니다. jQuery를 사용하면 HTML 요소를 쉽게 선택하고, 추가, 삭제 및 수정할 수 있으며, 이벤트를 처리할 수 있습니다. 이 가이드는 jQuery를 사용하여 DOM을 조작하는 방법과 관련된 주요 기능을 설명합니다.

1. jQuery와 DOM

*DOM (Document Object Model)**은 HTML 문서를 구조화된 객체 모델로 표현하는 방법입니다. jQuery를 사용하면 이 DOM을 쉽게 조작할 수 있습니다. jQuery는 CSS 선택자와 유사한 문법을 사용하여 DOM 요소를 선택하고 조작할 수 있는 기능을 제공합니다.

1.1. jQuery 포함하기

jQuery를 사용하려면, 먼저 HTML 문서에 jQuery 라이브러리를 포함해야 합니다. 다음은 jQuery를 포함하는 방법입니다.

<script src="<https://code.jquery.com/jquery-3.6.0.min.js>"></script>

2. DOM 요소 선택

jQuery를 사용하여 HTML 문서에서 DOM 요소를 선택하는 방법은 다양합니다. 가장 기본적인 방법은 다음과 같습니다.

2.1. 기본 선택자

ID 선택자: 특정 ID를 가진 요소 선택.

$('#myId'); // ID가 "myId"인 요소 선택

클래스 선택자: 특정 클래스를 가진 모든 요소 선택.

$('.myClass'); // 클래스가 "myClass"인 모든 요소 선택

태그 선택자: 특정 태그 이름을 가진 모든 요소 선택.

$('p'); // 모든 <p> 요소 선택

2.2. 복합 선택자

자식 선택자: 특정 요소의 직접 자식 요소 선택.

$('ul > li'); // 모든 <ul>의 직접 자식 <li> 요소 선택

후손 선택자: 특정 요소의 모든 후손 요소 선택.

$('div p'); // 모든 <div> 내의 <p> 요소 선택

3. DOM 요소 조작

jQuery는 선택한 DOM 요소를 쉽게 조작할 수 있는 다양한 메서드를 제공합니다.

3.1. HTML 내용 변경

text() 메서드: 요소의 텍스트 내용을 설정하거나 가져옵니다.

$('#myId').text('새로운 텍스트'); // ID가 "myId"인 요소의 텍스트 변경

html() 메서드: 요소의 HTML 내용을 설정하거나 가져옵니다.

$('.myClass').html('<strong>강조된 텍스트</strong>'); // 클래스가 "myClass"인 요소의 HTML 변경

3.2. CSS 스타일 변경

css() 메서드: 특정 CSS 속성을 설정하거나 가져옵니다.

$('#myElement').css('color', 'red'); // 텍스트 색상을 빨간색으로 설정

3.3. 클래스 추가 및 제거

addClass(): 요소에 CSS 클래스를 추가합니다.

$('#myElement').addClass('highlight'); // ID가 "myElement"인 요소에 "highlight" 추가

removeClass(): 요소에서 CSS 클래스를 제거합니다.

$('#myElement').removeClass('highlight'); // ID가 "myElement"인 요소에서 "highlight" 제거

toggleClass(): 특정 클래스를 추가하거나 제거합니다.

$('#myElement').toggleClass('highlight'); // "highlight" 클래스를 토글

3.4. DOM 요소 추가 및 삭제

append(): 선택한 요소의 끝에 새로운 요소를 추가합니다.

$('ul').append('<li>새로운 항목</li>'); // <ul>의 끝에 새로운 <li> 추가

prepend(): 선택한 요소의 시작에 새로운 요소를 추가합니다.

$('ul').prepend('<li>첫 번째 항목</li>'); // <ul>의 시작에 새로운 <li> 추가

remove(): 선택한 요소를 삭제합니다.

$('.myClass').remove(); // 클래스가 "myClass"인 모든 요소 삭제

3.5. DOM 요소 속성 조작

attr() 메서드: 요소의 속성을 설정하거나 가져옵니다.

$('#myImage').attr('src', 'new-image.png'); // 이미지 요소의 src 속성 변경

prop() 메서드: 요소의 프로퍼티를 설정하거나 가져옵니다.

$('#myCheckbox').prop('checked', true); // 체크박스를 체크 상태로 변경

4. 이벤트 처리

jQuery를 사용하여 DOM 요소에 이벤트 핸들러를 추가할 수 있습니다.

4.1. 클릭 이벤트

$('#myButton').click(function() {
    alert('버튼이 클릭되었습니다!'); // 버튼 클릭 시 알림 표시
});

4.2. 이벤트 리스너 추가

jQuery의 on() 메서드를 사용하여 다양한 이벤트에 대한 리스너를 추가할 수 있습니다.

$('#myButton').on('click', function() {
    console.log('버튼 클릭'); // 버튼 클릭 시 콘솔 로그
});

4.3. 여러 이벤트 처리

하나의 요소에 여러 이벤트를 처리할 수도 있습니다.

$('#myElement').on('mouseover mouseout', function() {
    $(this).toggleClass('hover'); // 마우스 오버 및 아웃 시 클래스 토글
});

5. AJAX를 사용한 데이터 처리

jQuery를 사용하여 AJAX를 통해 서버와 비동기적으로 데이터를 주고받을 수 있습니다. 이를 통해 클라이언트와 서버 간의 상호작용을 원활하게 할 수 있습니다.

5.1. GET 요청

$.get('process.php', function(data) {
    $('#result').html(data); // 서버에서 받은 데이터로 <div> 요소 업데이트
});

5.2. POST 요청

$.post('process.php', { name: 'Alice', age: 30 }, function(response) {
    console.log(response); // 서버 응답 처리
});

6. 전체 예제: jQuery로 DOM 조작하기

아래는 jQuery를 사용하여 DOM 요소를 조작하고 사용자 입력을 처리하는 전체 HTML 예제입니다.

6.1. HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery DOM Example</title>
    <script src="<https://code.jquery.com/jquery-3.6.0.min.js>"></script>
    <script>
        $(document).ready(function() {
            $('#addItemButton').click(function() {
                const newItem = $('#itemInput').val(); // 입력 값 가져오기
                if (newItem) {
                    $('ul').append(`<li>${newItem}</li>`); // 새로운 항목 추가
                    $('#itemInput').val(''); // 입력 필드 비우기
                }
            });

            // 항목 삭제
            $('ul').on('click', 'li', function() {
                $(this).remove(); // 클릭한 항목 삭제
            });
        });
    </script>
</head>
<body>
    <h1>Dynamic List with jQuery</h1>
    <input type="text" id="itemInput" placeholder="Add new item">
    <button id="addItemButton">Add Item</button>
    <ul></ul>
</body>
</html>

이 코드는 사용자가 입력한 항목을 리스트에 추가하고, 리스트 항목을 클릭하여 삭제할 수 있는 기능을 제공합니다.

7. 요약

JavaScript jQuery DOM의 통합은 웹 개발에서 매우 중요한 역할을 합니다. jQuery를 사용하면 HTML 요소를 쉽게 선택하고 수정할 수 있으며, 이벤트를 처리하고 AJAX 요청을 통해 서버와 상호작용할 수 있습니다.

DOM 요소 선택: jQuery 선택자를 사용하여 요소를 선택.

DOM 내용 변경: text(),

() 메서드를 사용하여 내용 수정.

CSS 스타일 변경:
```
() 메서드로 스타일 조정.
```
이벤트 처리: 버튼 클릭 이벤트 등을 통해 사용자 입력을 처리.
AJAX 활용: 서버와 비동기적으로 데이터 전송 및 수신.

jQuery를 활용하여 더욱 동적이고 인터랙티브한 웹 애플리케이션을 개발할 수 있습니다.

코딩 스쿨 JavaScript