Maison > Article > interface Web > Comment utiliser le sélecteur d'élément dans jQuery
Cette fois, je vais vous montrer comment utiliser le sélecteur d'élément dans jQuery, et quelles sont les précautions d'utilisation du sélecteur d'élément dans jQuery. Ce qui suit est un cas pratique, jetons un coup d'oeil.
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. ici ://tools.jb51.net/code/HtmlJsRun Test d'exécution en ligne) :
Instructions d'exécutionDans le code ci-dessus, le sélecteur d'élément 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]. éléments individuels. 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
$(document).ready()
renvoie un objet DOM, elle ne peut donc utiliser que des méthodes d'objet DOM. La méthode eq()
get()
commencent toutes deux à compter à partir de 0 par défaut. eq()
get()
. $("#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 :
Explication détaillée de l'utilisation des fonctions intégrées courantes dans JSComment utiliser vue composants pour le transfert de donnéesCe 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!