머리말
웹 개발에 있어서 JavaScript는 필수 도구가 되었습니다. 그리고 jQuery 라이브러리는 의심할 여지 없이 가장 인기 있는 JavaScript 라이브러리 중 하나입니다. DOM, Ajax, 이벤트 처리 등을 보다 효율적으로 운영하는 데 도움이 되는 간단하고 사용하기 쉬운 API를 제공합니다. 이 글에서는 초보자에게 적합한 jQuery를 사용하는 방법을 소개합니다.
1. jQuery 설치
시작하기 전에 먼저 jQuery를 설치해야 합니다.
jQuery 공식 홈페이지에서 최신 버전의 jQuery.zip이나 jQuery.min.js 파일을 다운로드 받으실 수 있습니다. 다운로드 웹사이트: https://jquery.com/download/
CDN을 사용하면 jQuery 파일을 더 효율적으로 얻을 수 있으며 로컬에 저장할 필요가 없습니다.
다음은 일반적으로 사용되는 두 가지 jQuery CDN입니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
2. jQuery를 사용하여 요소 선택
jQuery는 선택기 구문을 사용하여 요소를 선택하고 이러한 요소를 작동하기 위한 편리하고 사용하기 쉬운 API를 제공합니다.
다음과 같은 미리 정의된 기본 선택기를 사용하여 HTML 요소를 선택할 수 있습니다.
$("element") 匹配所有给定元素。 $(".class") 匹配所有给定类名的元素。 $("#id") 匹配所有给定 id 的元素。
예:
$("p") //匹配所有的 <p> 标签 $(".intro") //所有类名为 "intro" 的元素 $("#demo") //id 为 demo 的元素
계층적 선택기를 사용하여 특정 관계로 선택할 수 있는 요소:
$("parent>child") 匹配父元素下的子元素。 $("prev + next") 匹配紧接在 prev 元素之后的 next 元素。 $("prev ~ siblings") 匹配 prev 元素之后的所有同级 siblings 元素。
예:
$("div>p") //匹配 <div> 中所有 <p> 元素 $("h1+p") //所有 <h1> 元素后直接跟着的 <p> 元素 $("h1~p") //所有 <h1> 元素后的同级 <p> 元素
필터 선택기 선택한 요소를 기반으로 필터합니다. 다음은 필터 선택기의 몇 가지 예입니다.
:first 选择序列中的第一个元素。 :last 选择序列中的最后一个元素。 :even 选择序列中索引为偶数(从 0 开始)的元素。 :odd 选择序列中索引为奇数(从 0 开始)的元素。 :eq(index) 选择序列中索引指定为 index 的元素。 :gt(no) 选择索引大于 no 的元素。 :lt(no) 选择索引小于 no 的元素。
예:
$("li:first") //选取列表中的第一个 <li> 元素 $("li:last") //选取列表中的最后一个 <li> 元素 $("li:even") //选取列表中的偶数 <li> 元素 $("li:eq(1)") //选取列表中第二个 <li> 元素
3. jQuery는 DOM 요소를 작동합니다.
jQuery를 통해 페이지 요소를 수정, 추가 또는 제거할 수 있습니다.
다음 메서드를 사용하여 새 HTML 요소를 만들 수 있습니다.
$(html) 从字符串中创建元素。 $("<element>") 创建元素。 $("<element>", { 创建设置元素属性的元素。 html: "", css: "", id: "" })
예:
$("p").after("<p>Hello World!</p>"); //在所有的 <p> 元素后添加一个 <p> 元素
remove() 메서드를 사용하여 요소를 삭제할 수 있습니다.
$("element").remove(); 从页面中删除元素。
예:
$("p").remove(); //删除所有的 <p> 元素
jQuery에는 요소의 속성과 내용을 수정하는 일련의 메소드가 있으며, 그중 attr() 및 text() 메소드가 가장 일반적으로 사용됩니다.
$("element").attr("attribute", "value") 改变元素的属性。 $("element").html(content) 更改元素的内容。 $("element").text(content) 更改元素的文本内容。
예:
$("img").attr("src", "new_src.jpg"); //更改图片的 src 属性 $("<p>").text("Hello World!"); //创建一个新的 <p> 元素,以文本 Hello World! 作为其内容
4. 요소 트래버스
jQuery에는 요소를 트래버스하는 다음과 같은 메서드가 있습니다.
next() 返回下一个兄弟元素。 prev() 返回前一个兄弟元素。 parent() 返回当前元素的直接父元素。 parents() 返回当前元素的所有先辈元素。 find() 查找匹配选择器的后代元素。
예:
$("p").next() //返回第一个 <p> 元素的下一个兄弟元素 $("p").parent() //返回第一个 <p> 元素的直接父元素 $("p").parents() //返回第一个 <p> 元素的所有先辈元素
5. 이벤트 처리
다음 메서드를 사용하여 이벤트 핸들러를 바인딩할 수 있습니다.
click() 当元素被点击时运行的函数。 mouseover() 当指针移动到元素上时运行的函数。 keydown() 当键盘上按下键时运行的函数。 submit() 当提交表单时运行的函数。 ready() 当文档被加载时运行的函数。
예:
$("button").click(function(){ alert("Button Clicked!"); });
6. Ajax
jQuery는 AJAX(비동기 JavaScript 및 XML)를 사용하여 전체 페이지를 다시 로드하지 않고 웹 페이지의 콘텐츠를 동적으로 업데이트합니다.
jQuery는 $.ajax() 또는 $.get() 함수를 사용하여 요청을 보내고 $.parseJSON() 또는 $.getJSON() 함수를 사용하여 서버에서 JSON 데이터를 처리할 수 있습니다.
예:
$.ajax({ url: "demo.txt", success: function(result){ $("div").html(result); } });
결론
이 기사에서는 설치, 요소 선택, DOM 요소 조작, 요소 순회, 이벤트 처리 및 AJAX를 포함한 jQuery의 기본 사항을 소개합니다. 물론, 심층적인 연구와 이해가 필요한 jQuery의 고급 용도가 많이 있습니다.
위 내용은 Jquery 패키지를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!