Comment obtenir la balise actuelle avec jquery

Dans le développement front-end, l'obtention dynamique de la balise actuelle est une opération très courante. En tant que membre du framework front-end, jQuery propose plusieurs façons d'obtenir la balise actuelle. Dans cet article, nous détaillerons comment jQuery obtient la balise actuelle.

I. Obtenir l'ID de l'élément actuel

Vous pouvez obtenir l'ID de l'élément actuel grâce au code suivant :

$(this).attr("id");

Par exemple, nous définissons un élément avec l'ID "my-id" dans le fichier HTML :

<div id="my-id">这是一个文本框</div>

Nous pouvons utiliser Le code jQuery suivant obtient l'ID de l'élément :

$("#my-id").click(function(){
    console.log($(this).attr("id"));
});

Lorsque l'utilisateur clique sur l'élément, jQuery obtient l'ID de l'élément actuel et l'affiche dans la fenêtre de la console.

II. Récupérer la classe de l'élément courant

Vous pouvez obtenir la classe de l'élément courant grâce au code suivant :

$(this).attr("class");

Par exemple, on définit un élément avec la classe "ma-classe" dans le fichier HTML :

<div class="my-class">这是一个文本框</div>

Nous pouvons utiliser Le code jQuery suivant obtient la classe de l'élément :

$(".my-class").click(function(){
    console.log($(this).attr("class"));
});

Lorsque l'utilisateur clique sur l'élément, jQuery obtiendra la classe de l'élément actuel et l'affichera dans la fenêtre de la console.

III. Récupérer les attributs personnalisés de l'élément actuel

Vous pouvez obtenir les attributs personnalisés de l'élément actuel grâce au code suivant :

$(this).attr("data-*");

Parmi eux, "*" représente le nom de l'attribut que nous avons nous-mêmes défini. Par exemple, nous définissons un élément avec un attribut personnalisé de "data-color" dans le fichier HTML :

<div data-color="red">这是一个文本框</div>

Nous pouvons utiliser le code jQuery suivant pour obtenir l'attribut personnalisé de l'élément :

$("div").click(function(){
    console.log($(this).attr("data-color"));
});

Lorsque l'utilisateur clique sur le element, jQuery Obtient les propriétés personnalisées de l'élément actuel et les affiche dans la fenêtre de la console.

IV. Obtenir le nom de balise de l'élément actuel

Vous pouvez obtenir le nom de balise de l'élément actuel via le code suivant :

$(this).prop("tagName");

Par exemple, nous définissons un élément avec le nom de balise "div" dans le fichier HTML. :

<div>这是一个文本框</div>

Nous pouvons utiliser le code jQuery suivant pour obtenir le nom de balise de l'élément :

$("div").click(function(){
    console.log($(this).prop("tagName"));
});

Lorsque l'utilisateur clique sur l'élément, jQuery obtiendra le nom de balise de l'élément actuel et l'affichera dans la fenêtre de la console.

V. Obtenir la valeur de l'élément actuel

Vous pouvez obtenir la valeur de l'élément actuel grâce au code suivant :

$(this).val();

Par exemple, nous définissons une zone de saisie dans le fichier HTML :

<input type="text" value="这是一个文本框" />

Nous pouvons utiliser le code jQuery suivant pour obtenir la zone de saisie La valeur de :

$("input").keyup(function(){
    console.log($(this).val());
});

Lorsque l'utilisateur entre du contenu dans la zone de saisie, jQuery obtiendra la valeur de l'élément actuel et l'affichera dans la fenêtre de la console.

VI. Obtenir la position de l'élément actuel dans le document

Vous pouvez obtenir la position de l'élément actuel dans le document grâce au code suivant :

$(this).offset().top;
$(this).offset().left;

Par exemple, nous définissons un élément dans le fichier HTML :

<div>这是一个文本框</div>

Nous pouvons utiliser le jQuery suivant. Le code obtient la position de l'élément dans le document :

$("div").click(function(){
    console.log($(this).offset().top);
    console.log($(this).offset().left);
});

Lorsque l'utilisateur clique sur l'élément, jQuery obtiendra la position de l'élément actuel dans le document et l'affichera dans la fenêtre de la console.

Dans cet article, nous présentons en détail comment jQuery obtient la balise actuelle du point de vue de l'obtention de l'ID, de la classe, des attributs personnalisés, du nom de la balise, de la valeur et de la position dans le document de l'élément actuel. En étudiant cet article, nous pouvons avoir une compréhension plus approfondie des connaissances liées à jQuery, renforcer les capacités de développement front-end et offrir plus de possibilités pour notre travail et notre pratique de projet.

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!