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
Le sélecteur jQuery est également utilisé pour trouver l'élément. Après avoir trouvé l'élément, nous pouvons utiliser certaines méthodes données pour modifier, supprimer ou même déplacer 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中文网(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'); //添加一个行为
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</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中文网(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>标题</h2>
<p>段落</p>
<p id="test">我变颜色了</p>
<button>点我</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中文网(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>点我</button>
</body>
</html>Exécutez le programme pour l'essayer
Plus d'instances de sélecteur
| 语法 | 描述 |
|---|
| $(this) | 当前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的元素 |
| $("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
| $("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的属性值的 href 属性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
section suivante