Comment utiliser le paquet jquery

Avant-propos

Dans le développement Web, JavaScript est devenu un outil nécessaire. Et la bibliothèque jQuery est sans aucun doute l’une des bibliothèques JavaScript les plus populaires. Il fournit une API simple et facile à utiliser qui peut nous aider à exploiter plus efficacement DOM, Ajax, le traitement des événements, etc. Cet article explique comment utiliser jQuery, adapté aux débutants.

1. Installez jQuery

Avant de commencer, nous devons d'abord installer jQuery.

1. Téléchargez jQuery sur le site officiel

Nous pouvons télécharger la dernière version du fichier jQuery.zip ou jQuery.min.js sur le site officiel de jQuery. Site Web de téléchargement : https://jquery.com/download/

2. Utilisez un CDN (Content Delivery Network)

L'utilisation d'un CDN peut obtenir le fichier jQuery plus efficacement et ne nécessite pas de le stocker localement.

Voici deux CDN jQuery couramment utilisés :

<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. Utilisez jQuery pour sélectionner des éléments

jQuery utilise la syntaxe du sélecteur pour sélectionner des éléments et fournit une API pratique et facile à utiliser pour faire fonctionner ces éléments.

1. Sélecteur de base

Vous pouvez utiliser les sélecteurs de base prédéfinis suivants pour sélectionner des éléments HTML :

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

Par exemple :

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

2. Sélecteur hiérarchique

Vous pouvez utiliser des sélecteurs hiérarchiques pour sélectionner avec des relations spécifiques Éléments de :

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

Par exemple :

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

3. Sélecteur de filtre

Le sélecteur de filtre filtre en fonction de l'élément sélectionné. Voici quelques exemples de sélecteurs de filtres :

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

Par exemple :

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

3. jQuery exploite les éléments DOM

Nous pouvons modifier, ajouter ou supprimer des éléments de page via jQuery.

1. Nouvel élément

Vous pouvez utiliser la méthode suivante pour créer un nouvel élément HTML :

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

Par exemple :

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

2. Supprimer un élément

Vous pouvez utiliser la méthode remove() pour supprimer un élément :

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

Par exemple :

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

3. Change elements

jQuery dispose d'une série de méthodes pour modifier les attributs et le contenu des éléments, parmi lesquelles les méthodes attr() et text() sont les plus couramment utilisées.

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

Par exemple :

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

4. Traverser les éléments

jQuery dispose des méthodes suivantes pour parcourir les éléments :

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

Par exemple :

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

5. Gestion des événements

Vous pouvez utiliser les méthodes suivantes pour lier les gestionnaires d'événements :

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

Par exemple :

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

6. Ajax

jQuery utilise AJAX (JavaScript asynchrone et XML) pour mettre à jour dynamiquement le contenu de la page Web sans recharger la page entière.

jQuery peut utiliser la fonction $.ajax() ou $.get() pour envoyer des requêtes et la fonction $.parseJSON() ou $.getJSON() pour traiter les données JSON du serveur.

Par exemple :

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

Conclusion

Cet article présente les bases de jQuery, notamment l'installation, la sélection d'éléments, la manipulation des éléments DOM, le parcours des éléments, la gestion des événements et AJAX. Bien entendu, il existe de nombreuses utilisations avancées de jQuery qui nécessitent une étude et une compréhension approfondies.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!