sélecteur jQuery
Les sélecteurs jQuery vous permettent d'opérer sur des groupes d'éléments HTML ou des éléments individuels.
Sélecteurs jQuery
Les sélecteurs jQuery vous permettent d'opérer sur des groupes d'éléments HTML ou sur des éléments individuels.
Les sélecteurs jQuery « recherchent » (ou sélectionnent) des éléments HTML en fonction de l'identifiant, de la classe, du type, des attributs, des valeurs d'attribut de l'élément, etc. Il est basé sur des sélecteurs CSS existants, en plus de certains sélecteurs personnalisés.
Tous les sélecteurs dans jQuery commencent par un signe dollar : $().
Sélecteur d'éléments
Le sélecteur d'éléments jQuery sélectionne les éléments en fonction de leur nom.
Sélectionnez tous les éléments <p> de la page :
Instance
Une fois que l'utilisateur clique sur le bouton, tous les éléments <p> sont masqués :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'exemple" pour voir l'exemple en ligne
#id selector
jQuery #id selector sélectionne l'élément spécifié via l'attribut id de l'élément HTML.
L'identifiant de l'élément dans la page doit être unique, donc si vous souhaitez sélectionner l'élément unique dans la page, vous devez passer le sélecteur #id.
La syntaxe de sélection des éléments par identifiant est la suivante :
Exemple
Lorsque l'utilisateur clique sur le bouton, l'élément avec l'attribut id="test" sera masqué :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'exemple" pour afficher l'exemple en ligne
.sélecteur de classe
Le sélecteur de classe jQuery peut rechercher des éléments par la classe spécifiée.
La syntaxe est la suivante :
Instance
L'utilisateur clique sur le bouton Tous les éléments avec l'attribut class="test" sont masqués :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Plus d'exemples
| 语法 | 描述 | 实例 |
|---|---|---|
| $("*") | 选取所有元素 | 在线实例 |
| $(this) | 选取当前 HTML 元素 | 在线实例 |
| $("p.intro") | 选取 class 为 intro 的 <p> 元素 | 在线实例 |
| $("p:first") | 选取第一个 <p> 元素 | 在线实例 |
| $("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 | 在线实例 |
| $("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素 | 在线实例 |
| $("[href]") | 选取带有 href 属性的元素 | 在线实例 |
| $("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 | 在线实例 |
| $("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 | 在线实例 |
| $(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 | 在线实例 |
| $("tr:even") | 选取偶数位置的 <tr> 元素 | 在线实例 |
| $("tr:odd") | 选取奇数位置的 <tr> 元素 | 在线实例 |
Utilisation des fonctions jQuery dans des fichiers autonomes
Si votre site Web contient de nombreuses pages et que vous souhaitez que vos fonctions jQuery soient faciles à maintenir, alors veuillez mettre votre fonction jQuery dans un fichier .js séparé.
Lorsque nous démontrons jQuery dans le didacticiel, nous ajoutons la fonction directement dans la section <head> Il serait cependant préférable de les mettre dans un fichier à part, comme ceci (en référençant le fichier via l'attribut src) :
Instance
< ;script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="my_jquery_functions.js " ></script>
</head>
