Maison > Article > interface Web > méthodes d'extension jquery et méthodes d'instance

méthodes d'extension jquery et méthodes d'instance

WBOYoriginal: 2023-05-23 11:44:07394parcourir

Dans le développement front-end, jQuery est une bibliothèque JavaScript très populaire. Ses fonctionnalités puissantes et sa facilité d’utilisation incitent de nombreux développeurs à choisir de l’utiliser pour exploiter des pages Web. jQuery fournit une série de méthodes d'instance et de méthodes d'extension, qui peuvent offrir aux développeurs une expérience de programmation plus efficace et rendre le code plus concis. Cet article présentera les méthodes d'extension et les méthodes d'instance de jQuery, et fournira quelques exemples pour démontrer leur utilisation.

1. Méthodes d'instance de jQuery

Dans jQuery, les méthodes d'instance font référence à des méthodes qui peuvent être directement appelées par l'élément DOM sélectionné via le sélecteur. Voici quelques méthodes d'instance couramment utilisées :

Méthode .addClass()

Cette méthode peut ajouter un ou plusieurs noms de classe CSS à l'élément sélectionné, comme indiqué ci-dessous :

$('选中的元素').addClass('class1 class2');

.méthode .removeClass()

Cette méthode peut supprimer un ou plusieurs noms de classe CSS de l'élément sélectionné, comme indiqué ci-dessous :

Méthode

$('选中的元素').removeClass('class1 class2');

.attr()

Cette méthode peut obtenir ou définir la valeur d'attribut de l'élément sélectionné, comme indiqué ci-dessous ：

Méthode

// 获取属性值
$('选中的元素').attr('属性名')

// 设置属性值
$('选中的元素').attr('属性名', '属性值')

.css()

Cette méthode peut obtenir ou définir la valeur de style de l'élément sélectionné, comme indiqué ci-dessous :

Méthode

// 获取样式值
$('选中的元素').css('样式名')

// 设置样式值
$('选中的元素').css('样式名', '样式值')

.html()

Cette méthode peut obtenir ou définir le style valeur du contenu HTML de l'élément sélectionné, comme indiqué ci-dessous :

// 获取HTML内容
$('选中的元素').html()

// 设置HTML内容
$('选中的元素').html('HTML内容')

.on()

Cette méthode peut ajouter des écouteurs d'événements aux éléments sélectionnés, comme indiqué ci-dessous :

$('选中的元素').on('事件名', function(event) {
  // 处理事件
})

2. Méthode d'expansion jQuery

La La méthode d'expansion signifie que vous pouvez Les méthodes appelées directement sur l'objet jQuery ($) sont appelées fonctions jQuery (ou fonctions globales).

Méthode $.extend()

Cette méthode peut fusionner un ou plusieurs objets en un seul objet, comme indiqué ci-dessous :

$.extend(target, object1, object2)

où target est l'objet cible dans lequel fusionner, et object1, object2, etc. sont Objet source à fusionner.

Méthode $.ajax()

Cette méthode est utilisée pour envoyer des requêtes HTTP. Il permet d'obtenir des données de l'API backend de manière asynchrone, et peut gérer la fonction de rappel après succès ou échec, comme indiqué ci-dessous :

$.ajax({
  url: 'url',
  method: 'GET',
  data: 'data',
  dataType: 'json',
  success: function(response) {
    // 处理响应数据
  },
  error: function(jqXHR, textStatus, errorThrown) {
    // 处理请求错误
  }
})

Méthode $.getJSON()

Cette méthode est utilisée pour envoyer un GET demande, obtenez les données de réponse au format JSON. Par rapport à la méthode $.ajax(), la méthode $.getJSON() est plus simple et contient moins de code, comme indiqué ci-dessous :

$.getJSON('url', function(response) {
  // 处理响应数据
})

IV Exemple de démonstration

Un exemple est donné ci-dessous pour montrer comment utiliser les méthodes d'extension jQuery. et des méthodes d'instance pour gérer un exemple simple.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery实例和拓展方法演示</title>
</head>
<body>

  <!-- 示例DOM元素 -->
  <div id="example">
    <p>jQuery实例和拓展方法演示</p>
  </div>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>

    // 使用实例方法
    $('#example').addClass('test');
    $('#example').on('click', function() {
      alert('点击了example元素');
    });

    // 使用拓展方法
    var settings = {
      url: 'https://randomuser.me/api/',
      method: 'GET',
      dataType: 'json'
    };
    $.ajax(settings).done(function(response) {
      var $paragraph = $('<p>').text('随机用户：' + response.results[0].name.first);
      $('#example').append($paragraph);
    });

  </script>
</body>
</html>

Dans cet exemple, la méthode d'instance est d'abord utilisée pour ajouter une classe "test" à l'élément avec l'identifiant "exemple" et lier un événement de clic. Ensuite, utilisez la méthode d'extension pour envoyer une requête GET, obtenir les données d'un utilisateur aléatoire et les afficher sur la page.

Résumé

Cet article présente les concepts et l'utilisation des méthodes d'extension et des méthodes d'instance de jQuery, et fournit quelques exemples pour démontrer leur utilisation. Que nous utilisions des méthodes d'instance ou des méthodes d'extension, elles peuvent nous aider à effectuer les tâches de développement front-end plus rapidement et plus facilement et à améliorer l'efficacité du développement.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment parcourir les propriétés d'un objet dans jqueryArticle suivant：Comment parcourir les propriétés d'un objet dans jquery

Articles Liés

Voir plus