▶ JavaScript vs jQuery

JavaScript jQuery HTML

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

jQuery는 JavaScript 라이브러리로, HTML 문서의 요소를 쉽게 선택하고 조작할 수 있는 강력한 도구입니다. jQuery를 사용하면 DOM(Document Object Model) 조작을 간편하게 수행할 수 있으며, 사용자와의 상호작용을 개선할 수 있습니다. 이 가이드는 jQuery를 사용하여 HTML을 조작하는 방법과 관련된 주요 기능을 설명합니다.

1. jQuery 소개

jQuery는 웹 개발에서 DOM 조작, 이벤트 처리, AJAX 요청 등을 간편하게 할 수 있도록 도와주는 라이브러리입니다. jQuery를 사용하면 복잡한 JavaScript 코드를 짧고 간결하게 작성할 수 있습니다.

1.1. jQuery 포함하기

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

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

2. jQuery를 사용한 HTML 조작

jQuery를 사용하여 HTML 요소를 선택하고 수정하는 방법은 다음과 같습니다.

2.1. HTML 요소 선택

jQuery 선택자를 사용하여 HTML 요소를 선택할 수 있습니다.

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

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

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

2.2. HTML 내용 변경

jQuery를 사용하여 선택한 요소의 HTML 내용을 변경할 수 있습니다.

2.2.1. text() 메서드

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

2.2.2. html() 메서드

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

2.3. CSS 스타일 변경

jQuery를 사용하여 요소의 CSS 스타일을 변경할 수 있습니다.

$('.myClass').css('color', 'blue'); // 클래스가 "myClass"인 요소의 텍스트 색상을 파란색으로 변경

2.4. 클래스 추가 및 제거

jQuery는 클래스 추가 및 제거를 위한 메서드를 제공합니다.

2.4.1. addClass()

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

2.4.2. removeClass()

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

3. 요소 추가 및 삭제

jQuery를 사용하여 HTML 요소를 동적으로 추가하거나 삭제할 수 있습니다.

3.1. 요소 추가

3.1.1. append()

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

3.1.2. prepend()

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

3.2. 요소 삭제

3.2.1. remove()

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

3.2.2. empty()

$('ul').empty(); // <ul> 요소의 모든 자식 요소 삭제

4. 이벤트 처리

jQuery를 사용하여 사용자 이벤트(클릭, 마우스 오버 등)를 처리할 수 있습니다.

4.1. 클릭 이벤트

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

4.2. 이벤트 리스너 추가

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

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

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로 동적 웹 페이지 만들기

아래는 jQuery를 사용하여 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 HTML 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 HTML의 통합은 웹 페이지를 동적으로 조작하는 데 중요한 역할을 합니다. jQuery를 사용하면 HTML 요소를 쉽게 선택하고 수정할 수 있으며, 이벤트를 처리하고 AJAX 요청을 통해 서버와 상호작용할 수 있습니다.

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

HTML 내용 변경: text(),

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

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

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

코딩 스쿨 JavaScript