Bagaimana untuk menggunakan pakej jquery

Kata Pengantar

Dalam pembangunan web, JavaScript telah menjadi alat yang diperlukan. Dan perpustakaan jQuery sudah pasti salah satu perpustakaan JavaScript yang paling popular. Ia menyediakan API yang ringkas dan mudah digunakan yang boleh membantu kami mengendalikan DOM, Ajax, pemprosesan acara, dsb. dengan lebih cekap. Artikel ini akan memperkenalkan cara menggunakan jQuery, sesuai untuk pemula.

1. Pasang jQuery

Sebelum kita mula, kita perlu memasang jQuery terlebih dahulu.

1. Muat turun jQuery di tapak web rasmi

Kami boleh memuat turun versi terkini fail jQuery.zip atau jQuery.min.js di tapak web rasmi jQuery. Muat turun tapak web: https://jquery.com/download/

2. Gunakan CDN (Rangkaian Penghantaran Kandungan)

Menggunakan CDN boleh mendapatkan fail jQuery dengan lebih cekap dan tanpa Perlu simpan secara tempatan.

Berikut ialah dua CDN jQuery yang biasa digunakan:

<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 Gunakan jQuery untuk memilih elemen

jQuery menggunakan sintaks pemilih untuk memilih elemen dan menyediakan API yang mudah digunakan. untuk mengendalikan elemen ini.

1. Pemilih Asas

Anda boleh menggunakan pemilih asas pratakrif berikut untuk memilih elemen HTML:

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

Contohnya:

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

2. Pemilih Hierarki

Anda boleh menggunakan pemilih hierarki untuk memilih elemen dengan perhubungan tertentu:

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

Contohnya:

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

3. Pemilih Penapis

Tapis penapis pemilih berdasarkan elemen yang dipilih. Berikut ialah beberapa contoh pemilih penapis:

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

Contohnya:

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

3 jQuery mengendalikan elemen DOM

Kami boleh mengubah suai, menambah atau mengalih keluar elemen halaman melalui jQuery.

1. Elemen baharu

Anda boleh menggunakan kaedah berikut untuk mencipta elemen HTML baharu:

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

Contohnya:

rreee

2. Padam elemen

Anda boleh menggunakan kaedah remove() untuk memadamkan elemen:

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

Contohnya:

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

3. Tukar elemen

jQuery mempunyai satu siri kaedah untuk mengubah suai atribut dan kandungan elemen, antaranya kaedah attr() dan text() adalah yang paling biasa digunakan.

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

Contohnya:

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

4. Elemen traversing

jQuery mempunyai kaedah melintasi elemen berikut:

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

Contohnya:

rreee

5. Pengendalian acara

Anda boleh menggunakan kaedah berikut untuk mengikat pengendali acara:

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

Contohnya:

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

6. Ajax

jQuery menggunakan AJAX ( Asynchronous JavaScript dan XML) untuk mengemas kini kandungan secara dinamik pada halaman web tanpa memuatkan semula keseluruhan halaman.

jQuery boleh menggunakan fungsi $.ajax() atau $.get() untuk menghantar permintaan dan fungsi $.parseJSON() atau $.getJSON() untuk memproses data JSON daripada pelayan.

Contohnya:

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

Kesimpulan

Artikel ini memperkenalkan asas jQuery, termasuk pemasangan, memilih elemen, memanipulasi elemen DOM, elemen melintasi, pengendalian acara dan AJAX. Sudah tentu, terdapat banyak kegunaan lanjutan jQuery yang memerlukan kajian dan pemahaman yang mendalam.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan pakej jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!