HTML에서 jquery를 사용하는 방법
- PHPz원래의
- 2023-04-26 10:21:243166검색
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");
AjaxjQuery는 Ajax 호출을 단순화하는 방법을 제공합니다. jQuery를 사용하여 Ajax 요청을 실행하려면 다음 코드를 사용하세요.
$.ajax({
url: "myurl",
success: function(result) {
// 这里是返回数据的逻辑
}
});이 코드는 Ajax 요청을 지정된 URL로 보내고 성공 시 지정된 코드 로직을 실행합니다. 결론🎜🎜이 기사에서는 HTML에서 일반적인 jQuery 메서드를 사용하는 방법을 다루었습니다. 이제 막 jQuery를 시작했다면 이 방법만으로도 간단한 코드 작성을 시작하기에 충분할 것입니다. 또한 사용 가능한 메서드와 기능에 대해 자세히 알아보려면 jQuery API 설명서를 확인하는 것이 좋습니다. 🎜위 내용은 HTML에서 jquery를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!