HTML에서 jquery를 사용하는 방법-프런트엔드 Q&A-php.cn

HTML에서 jquery를 사용하는 방법

PHPz

풀어 주다： 2023-04-26 10:49:38

원래의

3078명이 탐색했습니다.

HTML에서 jQuery를 사용하는 방법

jQuery는 효율적인 JavaScript 코드를 빠르게 작성하는 데 도움이 되는 사용하기 쉬운 API를 제공하므로 개발자의 작업을 단순화하는 인기 있는 JavaScript 라이브러리입니다. 이 문서에서는 HTML과 함께 jQuery를 사용하는 방법을 설명합니다.

HTML에 jQuery를 도입하세요

jQuery 라이브러리를 다른 곳에서 사용하려면 먼저 HTML에 도입해야 합니다. 일반적으로 HTML 헤드에 다음 코드를 추가합니다.

<head>
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

로그인 후 복사

위 코드에서는 공용 jQuery CDN을 사용한다고 가정합니다. 로컬 jQuery 파일을 사용하는 경우 경로를 로컬 파일 경로로 바꿉니다.

jQuery 사용하기

jQuery를 참조한 후 여기에 포함된 메서드와 함수를 사용할 수 있습니다. 다음은 가장 일반적으로 사용되는 jQuery 방법 중 일부입니다.

요소 선택기

jQuery는 CSS와 동일한 요소 선택기를 사용하므로 HTML 문서에서 요소를 쉽게 선택할 수 있습니다. 예를 들어 모든 p 요소를 선택하려면 다음 코드를 사용합니다.

$("p")

로그인 후 복사

ID가 myDiv인 요소를 선택하려면 다음 코드를 사용합니다.

$("#myDiv")

로그인 후 복사

myClass 클래스가 있는 모든 요소를 선택하려면 다음 코드를 사용합니다.

$(".myClass")

로그인 후 복사

Event

jQuery를 처리하면 HTML 요소에 이벤트 리스너를 쉽게 바인딩할 수 있습니다. 예를 들어, 버튼 클릭 시 코드를 실행하려면 다음 코드를 사용하세요.

$("button").click(function() {
  // 这里是代码逻辑
});

로그인 후 복사

이 코드는 페이지의 모든 버튼을 찾아 버튼 클릭 시 지정된 코드 로직을 실행합니다.

DOM 조작

jQuery는 다양한 실용적인 DOM 조작 기능을 제공합니다. 예를 들어 페이지에 요소를 추가하려면 다음 코드를 사용하세요.

$("body").append("<p>Hello World!</p>");

로그인 후 복사

이 코드는 페이지에 새 p 요소를 추가하고 "Hello World!"라는 텍스트를 추가합니다.

일반적으로 사용되는 기타 DOM 작업은 다음과 같습니다:

요소 제거: $("p").remove();$("p").remove();
隐藏元素：$("p").hide();
更改元素内容：$("p").text("new text");

$("p").hide( );

요소 내용 변경: `$("p").text("new text");`

Ajax

jQuery는 Ajax 호출을 단순화하는 방법을 제공합니다. jQuery를 사용하여 Ajax 요청을 실행하려면 다음 코드를 사용하세요.

$.ajax({
  url: "myurl",
  success: function(result) {
    // 这里是返回数据的逻辑
  }
});

로그인 후 복사

이 코드는 Ajax 요청을 지정된 URL로 보내고 성공 시 지정된 코드 로직을 실행합니다.

결론🎜🎜이 기사에서는 HTML에서 일반적인 jQuery 메서드를 사용하는 방법을 다루었습니다. 이제 막 jQuery를 시작했다면 이 방법만으로도 간단한 코드 작성을 시작하기에 충분할 것입니다. 또한 사용 가능한 메서드와 기능에 대해 자세히 알아보려면 jQuery API 설명서를 확인하는 것이 좋습니다. 🎜

위 내용은 HTML에서 jquery를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!