How to use jquery package

Preface

In web development, JavaScript has become a necessary tool. And the jQuery library is undoubtedly one of the most popular JavaScript libraries. It provides a simple and easy-to-use API that can help us operate DOM, Ajax, event processing, etc. more efficiently. This article will introduce how to use jQuery, suitable for beginners.

1. Install jQuery

Before we begin, we need to install jQuery first.

1. Download jQuery on the official website

We can download the latest version of jQuery.zip or jQuery.min.js file on the jQuery official website. Download website: https://jquery.com/download/

2. Use CDN (Content Delivery Network)

Using CDN can obtain jQuery files more efficiently and without Need to store it locally.

The following are two commonly used jQuery CDNs:

<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. Use jQuery to select elements

jQuery uses selector syntax to select elements and provides easy-to-use API to operate these elements.

1. Basic selectors

You can use the following predefined basic selectors to select HTML elements:

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

For example:

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

2. Hierarchical selector

You can use the hierarchical selector to select elements with specific relationships:

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

For example:

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

3. Filter selector

Filter selector filters based on selected elements. The following are some examples of filter selectors:

:first                    选择序列中的第一个元素。
:last                     选择序列中的最后一个元素。
:even                     选择序列中索引为偶数（从 0 开始）的元素。
:odd                      选择序列中索引为奇数（从 0 开始）的元素。
:eq(index)                选择序列中索引指定为 index 的元素。
:gt(no)                   选择索引大于 no 的元素。
:lt(no)                   选择索引小于 no 的元素。

For example:

$("li:first")  //选取列表中的第一个 <li> 元素
$("li:last")   //选取列表中的最后一个 <li> 元素
$("li:even")   //选取列表中的偶数 <li> 元素
$("li:eq(1)")  //选取列表中第二个 <li> 元素

3. jQuery operates DOM elements

We can modify, add or remove page elements through jQuery.

1. New elements

You can use the following methods to create new HTML elements:

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

For example:

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

2. Delete element

You can use the remove() method to delete an element:

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

For example:

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

3. Change element

jQuery has a series of methods for modifying the attributes and content of elements, among which the attr() and text() methods are the most commonly used.

$("element").attr("attribute", "value")    改变元素的属性。
$("element").html(content)                 更改元素的内容。
$("element").text(content)                 更改元素的文本内容。

For example:

$("img").attr("src", "new_src.jpg");  //更改图片的 src 属性
$("<p>").text("Hello World!");       //创建一个新的 <p> 元素，以文本 Hello World! 作为其内容

4. Traversing elements

jQuery has the following methods of traversing elements:

next()                  返回下一个兄弟元素。
prev()                  返回前一个兄弟元素。
parent()                返回当前元素的直接父元素。
parents()               返回当前元素的所有先辈元素。
find()                  查找匹配选择器的后代元素。

For example:

$("p").next()     //返回第一个 <p> 元素的下一个兄弟元素
$("p").parent()   //返回第一个 <p> 元素的直接父元素
$("p").parents()  //返回第一个 <p> 元素的所有先辈元素

5. Event handling

You can use the following methods to bind event handlers:

click()                 当元素被点击时运行的函数。
mouseover()             当指针移动到元素上时运行的函数。
keydown()               当键盘上按下键时运行的函数。
submit()                当提交表单时运行的函数。
ready()                 当文档被加载时运行的函数。

For example:

$("button").click(function(){
    alert("Button Clicked!");
});

6. Ajax

jQuery uses AJAX ( Asynchronous JavaScript and XML) to dynamically update content on a web page without reloading the entire page.

jQuery can use the $.ajax() or $.get() function to send requests, and the $.parseJSON() or $.getJSON() function to process JSON data from the server.

For example:

$.ajax({
    url: "demo.txt",
    success: function(result){
        $("div").html(result);
    }
});

Conclusion

This article introduces the basics of jQuery, including installation, selecting elements, manipulating DOM elements, traversing elements, event handling, and AJAX. Of course, there are many advanced uses of jQuery that require in-depth study and understanding.

The above is the detailed content of How to use jquery package. For more information, please follow other related articles on the PHP Chinese website!