Jquery 패키지를 사용하는 방법

머리말

웹 개발에 있어서 JavaScript는 필수 도구가 되었습니다. 그리고 jQuery 라이브러리는 의심할 여지 없이 가장 인기 있는 JavaScript 라이브러리 중 하나입니다. DOM, Ajax, 이벤트 처리 등을 보다 효율적으로 운영하는 데 도움이 되는 간단하고 사용하기 쉬운 API를 제공합니다. 이 글에서는 초보자에게 적합한 jQuery를 사용하는 방법을 소개합니다.

1. jQuery 설치

시작하기 전에 먼저 jQuery를 설치해야 합니다.

1. 공식 홈페이지에서 jQuery를 다운로드하세요

jQuery 공식 홈페이지에서 최신 버전의 jQuery.zip이나 jQuery.min.js 파일을 다운로드 받으실 수 있습니다. 다운로드 웹사이트: https://jquery.com/download/

2. CDN(Content Delivery Network) 사용

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를 제공합니다.

1. 기본 선택기

다음과 같은 미리 정의된 기본 선택기를 사용하여 HTML 요소를 선택할 수 있습니다.

$("element")              匹配所有给定元素。
$(".class")               匹配所有给定类名的元素。
$("#id")                  匹配所有给定 id 的元素。

예:

$("p")   //匹配所有的 <p> 标签
$(".intro")  //所有类名为 "intro" 的元素
$("#demo")   //id 为 demo 的元素

2. 계층적 선택기

계층적 선택기를 사용하여 특정 관계로 선택할 수 있는 요소:

$("parent>child")         匹配父元素下的子元素。
$("prev + next")          匹配紧接在 prev 元素之后的 next 元素。
$("prev ~ siblings")      匹配 prev 元素之后的所有同级 siblings 元素。

예:

$("div>p")  //匹配 <div> 中所有 <p> 元素
$("h1+p")   //所有 <h1> 元素后直接跟着的 <p> 元素
$("h1~p")   //所有 <h1> 元素后的同级 <p> 元素

3. 필터 선택기

필터 선택기 선택한 요소를 기반으로 필터합니다. 다음은 필터 선택기의 몇 가지 예입니다.

: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를 통해 페이지 요소를 수정, 추가 또는 제거할 수 있습니다.

1. 새 요소

다음 메서드를 사용하여 새 HTML 요소를 만들 수 있습니다.

$(html)            从字符串中创建元素。
$("<element>")     创建元素。
$("<element>", {    创建设置元素属性的元素。
    html: "",
    css: "",
    id: ""
})

예:

$("p").after("<p>Hello World!</p>");  //在所有的 <p> 元素后添加一个 <p> 元素

2. 요소 삭제

remove() 메서드를 사용하여 요소를 삭제할 수 있습니다.

$("element").remove();              从页面中删除元素。

예:

$("p").remove();  //删除所有的 <p> 元素

3. Change elements

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!