SeouliteLab

jQuery를 사용한 p태그 다루기 예제 본문

카테고리 없음

jQuery를 사용한 p태그 다루기 예제

Seoulite Lab 2024. 3. 26. 14:12

소개:
jQuery를 활용하여 HTML 문서 내의 p태그를 다루는 방법을 알아봅니다. 특정 버튼을 클릭할 때 p태그의 내용을 변경하는 예제를 통해 jQuery의 기본적인 사용법을 익힐 수 있습니다.

p태그 다루기:
jQuery를 사용하여 p태그의 내용을 변경하려면 해당 p태그의 선택자를 이용하여 요소를 선택하고, text() 또는 html() 메서드를 사용하여 내용을 변경합니다.

설정:
HTML 파일에서 jQuery 라이브러리를 로드해야 합니다. 이를 위해 CDN을 사용하거나 로컬에 파일을 포함할 수 있습니다.

예제: p태그 클릭 시 내용 변경

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p태그 다루기</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <p id="paragraph">p태그 클릭!</p>
    <button id="changeContentBtn">내용 변경</button>

    <script>
        $(document).ready(function(){
            $('#changeContentBtn').click(function(){
                $('#paragraph').text('p태그 클릭!');
            });
        });
    </script>
</body>
</html>

출력 결과:

p태그 클릭!

설명:
위 예제에서는 jQuery를 사용하여 '내용 변경' 버튼이 클릭되면 p태그의 내용이 'p태그 클릭!'으로 변경됩니다. jQuery의 $(document).ready() 함수를 사용하여 문서가 로드되면 버튼 클릭 이벤트를 처리하도록 설정했습니다. 클릭 이벤트 핸들러에서는 선택한 p태그의 내용을 text() 메서드를 사용하여 변경하였습니다.

해시태그: jQuery, JavaScript, 웹개발, HTML, p태그

제목: jQuery를 활용한 p태그 내용 변경 예제

소개:
이번 예제에서는 jQuery를 사용하여 HTML 문서 내의 p태그의 내용을 버튼 클릭 시 변경하는 방법을 알아봅니다. 이를 통해 jQuery의 기본적인 사용법과 이벤트 처리에 대해 이해할 수 있습니다.

p태그 내용 변경:
jQuery를 사용하여 p태그의 내용을 변경하기 위해서는 해당 p태그의 선택자를 사용하여 해당 요소를 선택한 후, text() 메서드를 사용하여 내용을 변경합니다.

설정:
HTML 파일 내에서 jQuery 라이브러리를 로드해야 합니다. 일반적으로 CDN을 통해 라이브러리를 로드하거나 로컬에 포함시킬 수 있습니다.

예제: p태그 내용 변경하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p태그 내용 변경 예제</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <p id="paragraph">p태그 클릭!</p>
    <button id="changeBtn">p태그 변경</button>

    <script>
        $(document).ready(function(){
            $('#changeBtn').click(function(){
                $('#paragraph').text('p태그 클릭!');
            });
        });
    </script>
</body>
</html>

출력 결과:

p태그 클릭!

설명:
위의 예제에서는 jQuery를 사용하여 'p태그 변경' 버튼을 클릭하면 p태그 내용이 'p태그 클릭!'으로 변경됩니다. $(document).ready() 함수를 사용하여 문서가 로드되면 버튼의 클릭 이벤트를 처리하도록 설정합니다. 클릭 이벤트 핸들러에서는 선택한 p태그의 내용을 text() 메서드를 사용하여 변경합니다.

저작자표시 비영리 변경금지