Une manière intelligente d'utiliser ce mot-clé dans jQuery

Utilisation flexible de ce mot-clé dans jQuery

Dans jQuery, le mot-clé this est un concept très important et flexible, qui est utilisé pour faire référence à l'élément DOM actuellement manipulé. En utilisant rationnellement ce mot-clé, nous pouvons facilement exploiter les éléments de la page et obtenir divers effets et fonctions interactifs. Cet article combinera des exemples de code spécifiques pour présenter l'utilisation flexible de ce mot-clé dans jQuery.

1. Cet exemple simple

Tout d'abord, regardons un exemple simple. Supposons que nous ayons un élément bouton lorsque vous cliquez sur le bouton, modifiez le contenu du texte du bouton en « Clicé ». Cela peut être réalisé de la manière suivante :

<button id="myButton">点击我</button>

<script>
$(document).ready(function(){
    $("#myButton").click(function(){
        $(this).text("已点击");
    });
});
</script>

Dans le code ci-dessus, en utilisant le mot-clé this, nous pouvons directement référencer l'élément de bouton actuellement cliqué et changer son contenu textuel en "Clicked".

2. Application de ceci dans le traitement des événements

Ce mot-clé est souvent utilisé dans le traitement des événements, qui peut facilement faire fonctionner l'élément qui déclenche l'événement. Par exemple, nous avons une liste contenant plusieurs boutons. Lorsque l'on clique sur le bouton, le contenu textuel du bouton est affiché :

<ul>
    <li><button>按钮1</button></li>
    <li><button>按钮2</button></li>
</ul>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(this).css("color", "red");
    });
});
</script>

Dans le code ci-dessus, lorsqu'un bouton est cliqué, l'élément de bouton actuellement cliqué est référencé via this. mot-clé , puis modifiez la couleur du texte du bouton en rouge.

3. Utilisez ceci dans la méthode each()

Dans jQuery, la méthode each() est utilisée pour parcourir la collection d'éléments correspondants et exécuter la fonction spécifiée sur chaque élément. Dans la méthode each(), le mot-clé this représente l'élément en cours de parcours. Par exemple, nous avons une liste et devons ajouter un numéro de série à chaque élément de la liste :

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

<script>
$(document).ready(function(){
    $("ul li").each(function(index){
        $(this).prepend(index + 1 + ". ");
    });
});
</script>

Dans le code ci-dessus, grâce à la méthode each() et à ce mot-clé, nous pouvons ajouter le numéro de série correspondant à chaque élément de la liste.

À travers les exemples ci-dessus, nous pouvons voir l'utilisation flexible de ce mot-clé dans jQuery. En utilisant le mot-clé this de manière appropriée, nous pouvons simplifier le code et gérer facilement les éléments DOM. J'espère que cet article vous aidera à comprendre et à maîtriser l'application de ce mot-clé dans 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!