jQuery를 사용하여 HTML 요소 내용을 수정하는 방법-프런트엔드 Q&A-php.cn

jQuery를 사용하여 HTML 요소 내용을 수정하는 방법

PHPz

풀어 주다： 2023-04-17 11:09:27

원래의

1368명이 탐색했습니다.

JQuery는 HTML 문서에서 요소를 쉽게 찾아 작업할 수 있도록 설계된 인기 있는 JavaScript 라이브러리입니다. 이 기사에서는 jQuery를 사용하여 HTML 요소(예: 요소)의 콘텐츠를 수정하는 방법에 대해 설명하며 이러한 수정은 사용자 클릭(예: 클릭)에 의해 수행됩니다.

1단계: 준비

jQuery 코드 작성을 시작하기 전에 HTML 페이지를 준비해야 합니다. 다음은 요소와 버튼을 포함하는 간단한 HTML 페이지 예제입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>jquery demo</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $(document).ready(function(){
        $("#clickButton").click(function(){
          $("span").text("你点击了按钮！");
        });
      });
    </script>
  </head>
  <body>

    <h1>JQuery事件点击修改span内容</h1>
    <p>点击下面的按钮!</p>

    <button id="clickButton">点击这里</button>

    <p>点这里看看下面<span>会变化</span>！</p>

  </body>
</html>

로그인 후 복사

이 예제에서는 jQuery 라이브러리를 도입하고 < 요소를 클릭합니다. 이 이벤트 리스너는 사용자가 버튼을 클릭할 때 실행되며 요소의 텍스트 내용을 "버튼을 클릭했습니다!"로 변경합니다. 이제 이 코드의 의미를 하나씩 설명하겠습니다.

2단계: jQuery 이벤트 바인딩

$(document).ready() 함수는 페이지가 준비되었을 때 코드를 실행하는 데 사용되는 jQuery의 특수 함수 중 하나입니다. 이는 $(document).ready() 함수 내부의 코드가 DOM 트리가 로드되자마자 실행된다는 것을 의미합니다. 따라서 이 블록에서 클릭 이벤트에 대한 함수를 바인딩해야 합니다.

$("#clickButton").click()을 사용하여 클릭 이벤트를 바인딩합니다. 이 이벤트는 사용자가 ID "clickButton"이라는 라벨이 붙은 버튼을 클릭할 때 트리거됩니다. 클래스 선택자나 태그 선택자를 사용하여 HTML 요소를 일치시킬 수도 있지만 이 경우에는 ID 선택자를 사용합니다.

click 이벤트 핸들러 내에서 $("span").text() 메소드를 사용하여 요소의 텍스트 내용을 "버튼을 클릭했습니다!"로 변경합니다. "버튼을 클릭했습니다!"라는 문자열 매개변수를 전달하여 <

3단계: 테스트 결과

이제 위 HTML 코드가 포함된 페이지를 열고 버튼을 클릭하면 아래와 같이 요소의 텍스트 내용이 변경된 것을 확인할 수 있습니다.

JQuery事件点击修改span内容

点击下面的按钮!

（点击按钮后）

点这里看看下面你点击了按钮！

로그인 후 복사

이 예에서는 매우 기본적인 jQuery 코드를 사용하고 있지만 이는 jQuery를 사용하여 HTML 페이지의 요소를 수정하는 방법을 이해하기 위한 좋은 시작점을 제공합니다. 필요한 경우 필요에 맞게 이 코드 예제를 확장할 수 있습니다.

위 내용은 jQuery를 사용하여 HTML 요소 내용을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!