Introduction à l'utilisation de base des éléments de balise jQuery

Introduction à l'utilisation de base des éléments de balise jQuery

Avec le développement continu de la technologie de développement front-end, jQuery, en tant qu'excellente bibliothèque JavaScript, est largement utilisé dans le développement Web. Parmi eux, l’élément label est l’un des composants importants de jQuery. Cet article présentera l'utilisation de base des éléments de balise jQuery et joindra des exemples de code spécifiques.

1. Présentez la bibliothèque jQuery
Pour utiliser jQuery, vous devez d'abord introduire la bibliothèque jQuery dans la page HTML. Il peut être importé via un lien CDN ou le fichier de la bibliothèque jQuery peut être téléchargé localement.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. Utilisation de base

1. Selector
   Dans jQuery, vous pouvez sélectionner des éléments sur la page via des sélecteurs afin d'opérer sur eux.

   // 通过标签名选择元素
   $('p')
   
   // 通过类名选择元素
   $('.class-name')
   
   // 通过id选择元素
   $('#id-name')

2. Obtention et définition du contenu HTML
   Vous pouvez utiliser la méthode .text() pour obtenir et définir le contenu textuel de l'élément label, et la méthode .html() pour obtenir et définir le contenu HTML de l'élément label .

   // 获取文本内容
   $('p').text()
   
   // 设置文本内容
   $('p').text('新的文本内容')
   
   // 获取HTML内容
   $('div').html()
   
   // 设置HTML内容
   $('div').html('<p>新的段落</p>')

3. Ajouter et supprimer des éléments
   Vous pouvez utiliser la méthode .append() pour ajouter de nouveaux éléments enfants à l'élément label et la méthode .remove() pour supprimer l'élément label.

   // 添加子元素
   $('ul').append('<li>新的列表项</li>')
   
   // 删除元素
   $('p').remove()

4. Masquer et afficher des éléments
   Vous pouvez utiliser la méthode .hide() pour masquer l'élément label et la méthode .show() pour afficher l'élément label.

   // 隐藏元素
   $('img').hide()
   
   // 显示元素
   $('img').show()

5. Ajouter et supprimer des noms de classe
   Vous pouvez utiliser la méthode .addClass() pour ajouter un nom de classe à un élément d'étiquette et la méthode .removeClass() pour supprimer un nom de classe.

   // 添加类名
   $('div').addClass('new-class')
   
   // 移除类名
   $('div').removeClass('old-class')

6. Gestion des événements
   Vous pouvez utiliser la méthode .on() pour lier les fonctions de gestion des événements aux éléments d'étiquetage.

   // 点击事件
   $('button').on('click', function(){
    alert('按钮被点击了')
   })

Ce qui précède est une introduction à l'utilisation de base des éléments de balise jQuery. Grâce au sélecteur pour sélectionner des éléments, obtenir le contenu des paramètres, ajouter et supprimer des éléments, masquer des éléments d'affichage, ajouter et supprimer des noms de classe et le traitement des événements, vous peut réaliser des interactions riches et colorées. J'espère que cet article pourra aider les lecteurs à mieux comprendre et utiliser la fonction d'élément de balise dans la bibliothèque jQuery.

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!