sélecteur jQuery
Le composant principal de jQuery est?: le moteur de sélection, qui hérite de la syntaxe CSS et peut sélectionner rapidement et précisément le nom de la balise, le nom de l'attribut, le statut, etc. des éléments DOM sans se soucier de la compatibilité du navigateur. >Ainsi, la plupart des sélecteurs jQuery que nous présentons ci-dessous sont similaires aux sélecteurs CSS que nous avons appris auparavant
Les sélecteurs CSS sont utilisés pour rechercher et localiser des éléments sur la page, et définir des styles. Accédez à l'élément <. ??>
Lors de l'utilisation du sélecteur jQuery, nous devons utiliser la fonction "$()" pour envelopper nos règles CSS, et les règles CSS sont passées en paramètres à l'objet jQuery et renvoyées Contient le jQuery objet de l'élément correspondant dans la page. Ensuite, nous pouvons effectuer des opérations comportementales sur le n?ud DOM obtenu.
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?:$("p")
Exemple
Une fois que l'utilisateur a cliqué sur le bouton, tous les <p> changeront de couleur?:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css('color','red'); //添加一個(gè)行為
});
});
</script>
</head>
<body>
<h2>這是一個(gè)標(biāo)題</h2>
<p>這是一個(gè)段落。</p>
<p>這是另一個(gè)段落。</p>
<button>點(diǎn)我</button>
</body>
</html>Exécutez le programme pour l'essayer#id selector
jQuery #id selector sélectionne l'élément spécifié via l'attribut id de l'élément HTML.
Remarque?: l'ID ne peut appara?tre qu'une seule fois sur la page. Nous demandons généralement aux développeurs de respecter et de maintenir cette règle. Mais si vous apparaissez trois fois dans la page et utilisez des styles CSS, alors ces trois éléments feront toujours l'effet. Mais si vous faites cela dans jQuery, vous rencontrerez des problèmes. Un seul identifiant prendra effet, nous devons donc en faire un. habitude de n'utiliser qu'un seul identifiant sur la page La syntaxe de sélection des éléments par identifiant est la suivante?:$("#test")
Instance
Lorsque l'utilisateur clique sur le bouton, l'élément avec l'attribut id="test" deviendra rouge?:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").css('color','red');
});
});
</script>
</head>
<body>
<h2>標(biāo)題</h2>
<p>段落</p>
<p id="test">我變顏色了</p>
<button>點(diǎn)我</button>
</body>
</html>Exécutez le programme pour l'essayer.class selector
Le sélecteur de classe jQuery peut trouver des éléments selon la classe spécifiée.
La syntaxe est la suivante :
$(".test")
Exemple
Une fois que l'utilisateur a cliqué sur le bouton, tous les éléments avec les attributs class="test" changeront de couleur?:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").css('color','blue');
});
});
</script>
</head>
<body>
<h2 class="test">class選擇器</h2>
<p class="test">class選擇器</p>
<button>點(diǎn)我</button>
</body>
</html>Exécutez le programme pour l'essayer
Plus d'instances de sélecteur
| 語(yǔ)法 | 描述 |
|---|---|
| $(this) | 當(dāng)前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的元素 |
| $("ul li:first") | 每個(gè) <ul> 的第一個(gè) <li> 元素 |
| $("[href$='.jpg']") | 所有帶有以 ".jpg" 結(jié)尾的屬性值的 href 屬性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
