sélecteurs jQuery sont l'une des parties les plus importantes de la bibliothèque jQuery.
jQuery sélecteurs
sélecteurs jQuery vous permettent de sélectionner et de manipuler l'élément (s) HTML.
sélecteurs jQuery sont utilisés pour «trouver» (ou sélectionnez) éléments HTML en fonction de leur nom, id, classes, types, les attributs, les valeurs d'attributs et bien plus encore.It's based on the existing CSS Selectors , and in addition, it has some own custom selectors. Il est basé sur les existants sélecteurs CSS , et en plus, il a quelques sélecteurs personnalisés propres.
Tous les sélecteurs jQuery commencent avec le signe du dollar et entre parenthèses: $ ().
Le sélecteur d'élément
Le sélecteur d'élément jQuery sélectionne des éléments basés sur le nom de l'élément.
Vous pouvez sélectionner tous les éléments <p> sur une page comme ceci:
$("p")
Exemple
Lorsqu'un utilisateur clique sur un bouton, tous les éléments <p> seront cachés:
Exemple
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Essayez - le vous - même »Le sélecteur #id
Le sélecteur de #id jQuery utilise l'attribut id d'une balise HTML pour trouver l'élément spécifique.
Un id doit être unique dans une page, vous devez donc utiliser le sélecteur de #id lorsque vous souhaitez trouver un seul élément unique.
Pour trouver un élément avec un id spécifique, écrire un caractère dièse, suivi par l'identifiant de l'élément HTML:
$("#test")
Exemple
Lorsqu'un utilisateur clique sur un bouton, l'élément avec id = "test" sera caché:
Exemple
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Essayez - le vous - même »Le sélecteur .class
Le sélecteur de classe jQuery trouve des éléments avec une classe spécifique.
Pour trouver des éléments avec une classe spécifique, écrire un caractère de période, suivi du nom de la classe:
$(".test")
Exemple
Lorsqu'un utilisateur clique sur un bouton, les éléments avec class = "test" seront cachés:
Exemple
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Essayez - le vous - même »Autres exemples de jQuery sélecteurs
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | Try it |
| $(this) | Selects the current HTML element | Try it |
| $("p.intro") | Selects all <p> elements with class="intro" | Try it |
| $("p:first") | Selects the first <p> element | Try it |
| $("ul li:first") | Selects the first <li> element of the first <ul> | Try it |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | Try it |
| $("[href]") | Selects all elements with an href attribute | Try it |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | Try it |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | Try it |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | Try it |
| $("tr:even") | Selects all even <tr> elements | Try it |
| $("tr:odd") | Selects all odd <tr> elements | Try it |
Utilisez notre jQuery sélecteur Tester pour démontrer les différents sélecteurs.
Pour une référence complète de tous les sélecteurs jQuery, s'il vous plaît aller à notre sélecteurs de référence jQuery .
Fonctions dans un fichier séparé
Si votre site contient un grand nombre de pages, et vous voulez que vos fonctions jQuery pour être facile à entretenir, vous pouvez mettre vos fonctions jQuery dans un fichier .js séparé.
Lorsque nous démontrons jQuery dans ce tutoriel, les fonctions sont ajoutées directement dans la section <head>.However, sometimes it is preferable to place them in a separate file, like this (use the src attribute to refer to the .js file): Cependant, il est parfois préférable de les placer dans un fichier séparé, comme celui-ci (utiliser l'attribut src pour désigner le fichier .js):
Exemple
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 » Exercice 6»