Explication détaillée de l'utilisation dans jquery

jQuery est l'une des bibliothèques JavaScript les plus utilisées et est désormais devenue l'une des compétences essentielles pour le développement front-end. Cet article présentera en détail l'utilisation de la bibliothèque jQuery, dans le but d'aider les lecteurs à mieux comprendre les concepts de base, la syntaxe et les méthodes courantes de jQuery.

1. Introduction à jQuery

jQuery est une bibliothèque JavaScript rapide et concise qui encapsule les fonctionnalités principales de JavaScript. Il fournit une API facile à utiliser qui simplifie la traversée des documents HTML, la gestion des événements, les effets d'animation, l'interaction AJAX et d'autres opérations, permettant ainsi aux développeurs d'écrire des applications Web plus efficacement.

Voyons comment utiliser jQuery dans une application Web.

2. Présentez jQuery

Pour utiliser jQuery, nous devons l'introduire dans l'application Web. Il existe deux manières d'introduire jQuery :

1. Téléchargez le fichier jQuery (recommandé)

Nous pouvons télécharger le fichier jQuery sur le site officiel de jQuery, puis l'introduire dans la page HTML comme suit :

<script src="jquery.js"></script>

Dans 0e1ef1233f0e94076c8a890f3a96bbad标签之前引入以上代码，即可将jQuery库引入到网页中。注意，文件名称可以根据你下载的版本而有所不同。

2. 通过CDN引入jQuery

另一种引入jQuery的方式是使用CDN（内容分发网络），你只需要在HTML页面中进行如下引入：

<script src="https://cdn.jsdelivr.net/jquery/3.5.0/jquery.min.js"></script>

这样就可以从CDN中引入最新版本的jQuery文件，而不需要下载并自己维护该文件。

三、jQuery语法

jQuery库中的所有功能都是通过jQuery()函数实现的。这个函数也称为 $ 函数，可以将选择器传递给它，以获取指定元素的jQuery对象，如下所示：

$(selector).action()

• $ 符号定义jQuery
• selector 是要操作的HTML元素
• action() 是要执行的动作，比如 addClass()、fadeOut()、animate() 等

四、jQuery选择器

jQuery选择器使我们能够根据元素的标记名、类、属性和属性值等内容来选择DOM元素。与传统的JavaScript DOM选择器不同，jQuery选择器不区分大小写。

下面是一些常见的jQuery选择器：

Présentation de jQuery via CDNUne autre façon d'introduire jQuery est d'utiliser un CDN (Content Delivery Network). Il vous suffit de l'introduire dans la page HTML comme suit : rrreee

选择器	描述
*	选择所有元素
#id	选择具有指定id的元素
.class	选择具有指定class的元素
element	选择所有指定元素类型的元素
element.class	选择指定元素class属性中包含指定值的元素
element,element	选择所有指定元素类型的所有指定元素类型的元素
:first	选择文档中第一个指定的元素
:last	选择文档中最后一个指定的元素
:even	选择文档中所有偶数位置的指定元素
:odd	选择文档中所有奇数位置的指定元素
:eq(index)	选择指定位置的指定元素（从第0个开始）
:gt(no)	选择指定位置之后的指定元素
:lt(no)	选择指定位置之前的指定元素
:header	选择所有标题元素（h1 ~ h6）
:not(selector)	选择不符合指定选择器的元素
:contains(text)	选择包含指定文本的元素
:empty	选择不包含子元素和文本的元素
:hidden	选择所有隐藏的元素
:visible

C'est. récupérez la dernière version des fichiers jQuery à partir du CDN, sans avoir à télécharger et à maintenir le fichier vous-même. 🎜🎜3. Syntaxe jQuery🎜🎜Toutes les fonctions de la bibliothèque jQuery sont implémentées via la fonction jQuery(). Cette fonction est également appelée fonction $, et vous pouvez lui passer un sélecteur pour obtenir l'objet jQuery de l'élément spécifié, comme ceci : 🎜rrreee

🎜$ symbole Définir jQuery🎜🎜selector est l'élément HTML à utiliser 🎜🎜action() est l'action à effectuer, comme addClass(), fadeOut(), animate(), etc. 🎜

🎜4. Sélecteur jQuery🎜🎜Le sélecteur jQuery nous permet de sélectionner des éléments DOM en fonction du nom de la balise, de la classe, de l'attribut et de la valeur de l'attribut. Contrairement aux sélecteurs DOM JavaScript traditionnels, les sélecteurs jQuery ne sont pas sensibles à la casse. 🎜🎜Voici quelques sélecteurs jQuery courants : 🎜🎜🎜 *🎜🎜Sélectionnez tous les éléments🎜🎜🎜#id🎜🎜Sélectionnez les éléments avec l'identifiant spécifié🎜🎜🎜.class🎜🎜 Sélectionnez les éléments avec la classe spécifiée🎜🎜🎜element🎜🎜Sélectionnez tous les éléments du type d'élément spécifié🎜🎜🎜element.class🎜🎜 Sélectionnez le éléments dont l'attribut de classe de l'élément spécifié contient la valeur spécifiée🎜🎜🎜element,element🎜🎜Sélectionnez tous les éléments du type d'élément spécifié parmi tous les types d'éléments spécifiés🎜🎜🎜 :first🎜🎜Sélectionnez le premier élément spécifié dans le document🎜🎜🎜:last🎜🎜Sélectionnez le dernier élément spécifié dans le document🎜🎜🎜:even🎜🎜Sélectionnez tous les éléments spécifiés aux positions paires dans le document🎜🎜🎜:odd🎜🎜Sélectionnez tous les éléments spécifiés aux positions impaires dans le document🎜🎜🎜 :eq(index)🎜🎜Sélectionnez l'élément spécifié à la position spécifiée (en commençant par le 0ème)🎜🎜🎜:gt(no) 🎜🎜Sélectionnez la position spécifiée L'élément spécifié après 🎜🎜🎜:lt(no)🎜🎜Sélectionnez l'élément spécifié avant la position spécifiée 🎜🎜🎜:header🎜🎜Sélectionner tous les éléments de titre (h1 ~ h6)🎜🎜<tr>🎜<code>:not(selector)🎜🎜Sélectionner les éléments qui ne correspondent pas au sélecteur spécifié🎜🎜🎜:contains(text)🎜🎜Sélectionnez les éléments qui contiennent le texte spécifié🎜🎜🎜:empty🎜🎜Sélectionnez les éléments qui ne contiennent pas d'éléments enfants ni de texte🎜🎜🎜:hidden code>🎜🎜Sélectionnez tous les éléments cachés🎜🎜<tr>🎜<code>:visible🎜🎜Sélectionnez tous les éléments visibles🎜🎜🎜🎜

5. Événements jQuery

Les événements jQuery sont le moyen le plus pratique pour nous d'exploiter les éléments HTML. Voici quelques événements jQuery courants :

Sélecteur	Description

Événement	Description
click()click()	鼠标点击事件
dblclick()	鼠标双击事件
mouseenter()	鼠标移入事件
mouseleave()	鼠标移出事件
mousedown()	按下鼠标按钮事件
mouseup()	松开鼠标按钮事件
keydown()	按下键盘按钮事件
keyup()	松开键盘按钮事件
focus()	元素获取焦点事件
blur()	元素失去焦点事件
submit()	提交表单事件
load()	加载页面事件
resize()	调整页面大小事件
scroll()	页面滚动事件
change()	元素内容改变事件

六、jQuery效果

jQuery提供了一组强大的效果方法，可以让我们轻松地添加动画效果、改变元素内容、元素位置、元素大小等等。下面是一些常见的jQuery效果：

效果	描述
hide()	隐藏指定的元素
show()	显示指定的元素
toggle()	隐藏显示元素的状态
fadeIn()	淡入指定的元素，基于透明度
fadeOut()	淡出指定的元素，基于透明度
fadeToggle()	隐藏显示元素的状态，基于透明度
slideDown()	向下滑动显示指定的元素
slideUp()	向上滑动隐藏指定的元素
slideToggle()	展开或收缩元素
animate()	创建自定义动画
stop()	停止动画
scrollTop()	将滚动条向上移动到指定元素的顶部
scrollLeft()	将滚动条向左移动到指定元素的左侧
css(property)	获取指定CSS属性的值
css(property, value)	设置CSS属性的值
width()	获取元素的宽度
height()	获取元素的高度

七、jQuery AJAX

AJAX是一种异步JavaScript和XML技术，使我们能够通过JavaScript使用HTTP请求和响应数据，无需重新加载整个页面即可更新部分页面。

jQuery提供了一组强大的AJAX方法，使我们可以轻松地使用AJAX技术。下面是一些常见的jQuery AJAX方法：

Événement de clic de sourisdblclick() code >

AJAX方法	描述
$.ajax()	使用HTTP请求从远程服务器获取数据
$.get()	使用HTTP GET请求从远程服务器获取数据
$.post()	使用HTTP POST请求从远程服务器获取数据
$.getJSON()	获取JSON格式的数据
$.ajaxSetup()	设置全局AJAX设置
$.ajaxError()	处理AJAX错误
$.ajaxComplete()	处理AJAX请求的完成事件
$.ajaxStart()	处理AJAX开始时的事件
$.ajaxSend()	处理AJAX请求发送前的事件
$.ajaxSuccess()	处理AJAX请求成功的事件
$.ajaxStop()	处理AJAX结束时的事件
$.ajaxSetup()

Événement de double-clic de souris

🎜mouseenter()🎜🎜Événement d'entrée de souris🎜🎜🎜🎜mouseleave()🎜🎜Événement de sortie de souris🎜🎜 🎜🎜mousedown()🎜🎜Événement de bouton de souris enfoncé🎜🎜🎜🎜mouseup()🎜🎜Événement de bouton de souris relâché🎜🎜🎜🎜keydown() code >🎜🎜Événement sur le bouton du clavier enfoncé🎜🎜🎜🎜keyup()🎜🎜Événement sur le bouton du clavier relâché🎜🎜🎜🎜focus()🎜🎜L'élément obtient un événement de focus🎜 🎜 🎜🎜blur()🎜🎜L'élément perd le focus événement🎜🎜🎜🎜submit()🎜🎜Soumettre l'événement de formulaire🎜🎜🎜🎜load() code >🎜🎜Événement de chargement de la page🎜🎜🎜🎜<code>resize()🎜🎜Événement de redimensionnement de la page🎜🎜🎜🎜scroll()🎜🎜Événement de défilement de page🎜🎜🎜🎜 change()🎜🎜Événement de changement de contenu d'élément🎜🎜🎜🎜🎜 6. Effets jQuery🎜🎜jQuery fournit un ensemble de méthodes d'effet puissantes qui nous permettent d'ajouter facilement des effets d'animation, de modifier le contenu d'un élément, la position d'un élément, un élément. taille, etc Voici quelques effets jQuery courants : 🎜🎜🎜🎜🎜Effect🎜🎜Description🎜🎜🎜🎜🎜🎜hide()🎜🎜Masquer l'élément spécifié🎜🎜🎜🎜show()🎜🎜Afficher l'élément spécifié🎜🎜🎜🎜<code>toggle()🎜🎜Masquer l'état de l'élément affiché🎜🎜🎜🎜fadeIn()🎜🎜Fade in the élément spécifié, basé sur la transparence🎜🎜🎜🎜fadeOut()🎜🎜Fondu l'élément spécifié, basé sur la transparence🎜🎜🎜🎜fadeToggle()🎜🎜masquer l'état de l'élément affiché, en fonction de la transparence 🎜🎜🎜🎜slideDown()🎜🎜Glissez vers le bas pour afficher l'élément spécifié🎜🎜🎜🎜slideUp()🎜🎜Glissez vers le haut masquer l'élément spécifié🎜🎜🎜🎜slideToggle()🎜🎜Développer ou réduire les éléments🎜🎜🎜🎜animate()🎜🎜Créer des animations personnalisées🎜🎜🎜🎜 stop()🎜 🎜Arrêter l'animation🎜🎜🎜🎜scrollTop()🎜🎜Déplacer la barre de défilement vers le haut de l'élément spécifié🎜🎜🎜🎜scrollLeft()🎜🎜Déplacer la barre de défilement vers la gauche Déplacer vers la gauche de l'élément spécifié🎜🎜🎜🎜<code>css(property)🎜🎜Obtenir la valeur de la propriété CSS spécifiée🎜🎜🎜🎜 css(property, value)🎜🎜Settings La valeur de la propriété CSS 🎜🎜🎜🎜width()🎜🎜Obtient la largeur de l'élément🎜🎜🎜🎜height()🎜🎜Obtient la hauteur de l'élément🎜🎜🎜🎜🎜VII , jQuery AJAX🎜🎜AJAX est une technologie JavaScript et XML asynchrone qui nous permet d'utiliser des requêtes HTTP et des données de réponse via JavaScript pour mettre à jour des pièces de la page sans recharger la page entière. 🎜🎜jQuery fournit un ensemble puissant de méthodes AJAX qui nous permettent d'utiliser facilement la technologie AJAX. Voici quelques méthodes jQuery AJAX courantes : 🎜🎜🎜🎜🎜Méthode AJAX 🎜🎜 Description 🎜🎜🎜🎜🎜🎜 🎜$.get()🎜🎜Obtenir des données à partir d'un serveur distant à l'aide d'une requête HTTP GET🎜🎜 🎜🎜$.post()🎜🎜Obtenez des données d'un serveur distant à l'aide de la requête HTTP POST Data🎜🎜🎜🎜$.getJSON()🎜🎜Obtenez des données au format JSON🎜 🎜🎜🎜$.ajaxSetup()🎜🎜Définir les paramètres AJAX globaux🎜🎜🎜🎜 $.ajaxError()🎜🎜Gérer les erreurs AJAX🎜🎜🎜🎜$ .ajaxComplete()🎜🎜Gère l'événement d'achèvement de la requête AJAX🎜🎜🎜🎜$ ajaxStart()🎜🎜Gère les événements au démarrage d'AJAX🎜🎜🎜🎜$.ajaxSend. ()🎜🎜Gère les événements avant l'envoi des requêtes AJAX🎜🎜🎜🎜$.ajaxSuccess ()🎜🎜Gère l'événement lorsque la requête AJAX est réussie🎜🎜🎜🎜$. ajaxStop()🎜🎜Gérer l'événement à la fin d'AJAX🎜🎜🎜🎜$.ajaxSetup() 🎜🎜Définir les paramètres AJAX globaux🎜🎜🎜🎜🎜 8. Résumé🎜🎜Cet article présente l'utilisation de la bibliothèque jQuery en détail, y compris ses concepts de base, sa syntaxe et ses méthodes communes. Grâce à ces connaissances, les développeurs peuvent écrire des applications Web plus efficacement. jQuery est actuellement l'une des bibliothèques JavaScript les plus populaires et les plus concises. Elle fournit de nombreuses API puissantes pour JavaScript, facilitant ainsi la compréhension, la gestion et l'extension du développement JavaScript. En utilisant la bibliothèque jQuery, les développeurs peuvent facilement effectuer des tâches complexes, gérer divers événements DOM, effectuer divers effets et opérations AJAX, ce qui contribue à améliorer l'expérience utilisateur, la fiabilité et la vitesse de réponse des applications Web. 🎜

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!