recherche

Maison >interface Web >js tutoriel >Explication détaillée de l'utilisation du sélecteur jQuery examples_jquery

Explication détaillée de l'utilisation du sélecteur jQuery examples_jquery

WBOY
WBOYoriginal
2016-05-16 15:25:181399parcourir

Les exemples de cet article décrivent l'utilisation du sélecteur jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

jQuery utilise deux méthodes pour sélectionner les éléments HTML. La première utilise les sélecteurs CSS et Xpath pour se combiner pour former une chaîne qui est envoyée au constructeur de jQuery (telle que : $("div > ul a")) ; La méthode consiste à utiliser plusieurs méthodes de l'objet jQuery. Ces deux méthodes peuvent également être utilisées en combinaison.

Il existe de nombreuses façons de sélectionner à l'aide des sélecteurs CSS et XPath. Pour les sélecteurs CSS détaillés, veuillez vous référer aux articles pertinents sur ce site.

Tout d'abord, regardons comment obtenir l'élément via son identifiant : $( "#id" ). Ajoutez # devant le nom pour indiquer qu'il s'agit d'un identifiant. Attention à ne pas perdre les guillemets.

Ajoutez un élément span avec l'identifiant msg à la page et affichez helloworld dans l'élément span. Cela peut être réalisé comme suit : 

<html>
<head>
  <title>Hello</title>
  <script src="jquery-1.2.5.js" type="text/javascript"></script>
   <script type="text/javascript">
    $( function() {
     $("#msg").html("Hello, world."); } );
   </script>
  </head>
<body>
  <span id="msg"/>
</body>
</html>

Remarque : #id doit être mis entre guillemets et la fonction html avec des paramètres est utilisée pour attribuer une valeur au innerHTML de l'élément.

Exemple suivant :

Par exemple, nous avons une liste dont l'ID est orderedlist, puis le jQuery pour obtenir la référence de cette liste est $("#orderedlist"), et ajoutez un attribut de classe $("#orderedlist") avec une valeur de red. addClass("red"), la fonction addClass est utilisée pour ajouter des paramètres CSS aux éléments. Obtenez la référence du dernier li de la liste, $( "#orderedlist li:last" ).

L'exemple suivant modifie le contenu du dernier li en bonjour tout le monde.

<html>
<head>
  <title>Hello</title>
  <script src="jquery-1.2.5.js" type="text/javascript"></script>
  <script type="text/javascript">
    $( function() {
     alert("wait");
     $( "#orderedlist li:last" ).html("hello, world.");
    } );
  </script>
</head>
<body>
  <ol id="orderedlist">
   <li>First element</li>
   <li>Second element</li>
   <li>Third element</li>
  </ol>
</body>
</html>

J'espère que cet article sera utile à tous ceux qui programment jQuery.

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：Méthode de mise en œuvre simple des compétences de clonage de tableau javascript_javascriptArticle suivant：Méthode de mise en œuvre simple des compétences de clonage de tableau javascript_javascript

Articles Liés

Voir plus