Explication détaillée des cas d'utilisation du sélecteur d'éléments jQuery

Cette fois, je vous apporte une explication détaillée des cas d'utilisation de jQueryElement Selector Quelles sont les précautions d'utilisation du sélecteur d'éléments jQuery ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

L'exemple de cet article décrit l'utilisation simple du sélecteur d'élément (element) dans jQuery. Partagez-le avec tout le monde pour votre référence, comme suit :

1. Introduction

Le sélecteur d'élément correspond à l'élément correspondant en fonction du nom de l'élément. .

En termes simples, le sélecteur d'élément pointe vers le nom de balise de l'élément DOM, ce qui signifie que le sélecteur d'élément sélectionne en fonction du nom de balise de l'élément.

Le nom de balise de l'élément peut être compris comme le nom de l'élève. Il peut y avoir plusieurs élèves nommés « Liu Wei » dans une école, mais il ne peut y avoir qu'un seul élève nommé « Wu Yu », donc à travers l'élément Le sélecteur peut correspondre à plusieurs éléments ou à un seul élément.

Dans la plupart des cas, les sélecteurs d'éléments correspondent à un groupe d'éléments.

Le sélecteur d'élément s'utilise comme suit :

$("element");

Où element est le nom de balise de l'élément à interroger.

Par exemple, pour interroger tous les éléments p, vous pouvez utiliser le code jQuery suivant :

$("p");

Application

Ajoutez deux balises

et un bouton à la page, puis cliquez sur le bouton pour obtenir les deux balises

et modifier leur contenu.

3. Code

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<p>这里种植了一棵草莓</p>
<p>这里养殖了一条鱼</p>
<input type="button" value="若干年后" />
<script type="text/javascript">
$(document).ready(
function()
{
 $("input[type='button']").click(
  function()
  {                //为按钮绑定单击事件
   $("p").eq(0).html("这里长出了一片草莓"); //获取第一个p元素
   $("p").get(1).innerHTML="这里的鱼没有了"; //获取第二个p元素
  });
});
</script>

4. ://tools.jb51.net/code/HtmlJsRun Test d'exécution en ligne) :

Instructions d'exécutionDans le code ci-dessus, le sélecteur d'éléments est utilisé pour obtenir un ensemble de wrapper jQuery d'un ensemble de p éléments. Il s'agit d'un ensemble d'objets Object et est stocké dans [Object Object]. Les informations textuelles nécessitent un indexeur pour déterminer quel élément p sélectionner. Deux indexeurs différents

et

sont utilisés ici. eq()get()L'indexeur ici est similaire au numéro de maison de la pièce. La différence est que le numéro de maison commence à compter à partir de 1, tandis que l'indexeur commence à compter à partir de 0.

Dans cet exemple, deux méthodes sont utilisées pour définir le contenu textuel de l'élément. La méthode

est la méthode jQuery et la méthode innerHTML est la méthode objet DOM.

html()La méthode

est également utilisée ici. Lorsque l'élément de page est chargé, le programme sera automatiquement exécuté et l'événement de clic sera automatiquement lié au bouton. La méthode

$(document).ready()

renvoie un ensemble de wrapper jQuery, elle ne peut donc appeler que des méthodes jQuery, tandis que la méthode

renvoie un objet DOM, elle ne peut donc utiliser que des méthodes d'objet DOM. La méthode eq()get()

et la méthode

commencent toutes deux à compter à partir de 0 par défaut. eq()get()

équivaut à

. $("#test").get(0)$("#test")[0]Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Résumé des fonctions intégrées couramment utilisées dans JS

Explication détaillée des étapes d'utilisation v-model dans des composants personnalisés avec vue

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!