Maison > Article > interface Web > jquery a plusieurs sélecteurs de base
jquery a plusieurs sélecteurs de base
- 青灯夜游original
- 2022-05-07 20:09:193007parcourir
Il existe 5 sélecteurs de base : 1. Sélecteur d'ID, correspondance des éléments en fonction de l'ID, syntaxe "$("#id value""); 2. Sélecteur d'élément, correspondance des éléments en fonction du nom de l'élément, syntaxe "$(" nom des éléments ")"; 3. Sélecteur de classe, correspond aux éléments selon la classe, syntaxe "$(".class name"" 4. Sélecteur générique "*", correspond à tous les éléments, etc.
L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.2, ordinateur Dell G3.
Le sélecteur de base est le sélecteur le plus utilisé dans jQuery jquery dispose de 5 sélecteurs de base :
| Sélecteur | Description de la fonction | |
|---|---|---|
Sélecteur d'ID #id <.> | Faire correspondre un élément en fonction de l'ID donné | 根据给定的ID匹配一个元素 |
元素(标签)选择器 element
|
根据给定的元素名匹配所有元素 | |
类选择器 .class
|
根据给定的类匹配元素 | |
通配符 * 选择器 |
匹配所有元素 | |
并集选择器 selector1，selector2,...,selectorN
|
将每一个选择器匹配到元素合并后一起返回 |
1、#id 选择器：
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器
举例：使用 #id 选择器选择 id="myDiv1"的元素，将其隐藏。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("button").click(function(){
$("#myDiv1").hide();
});
});
</script>
</head>
<body>
<button type="button">点击</button>
<p>p元素1</p>
<p>p元素2</p>
<div id="myDiv1">Hello</div>
</body>
</html>
2、元素选择器:
jQuery 元素选择器基于元素名选取元素。
举例：使用元素选择器选择所有
元素，将其隐藏。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<button type="button">点击</button>
<p>p元素1</p>
<p>p元素2</p>
<div id="myDiv1">Hello</div>
</body>
</html>3、.class 选择器：
jQuery 类选择器可以通过指定的 class 查找元素。
举例：使用类选择器选择Class=“myClass1”的元素，将其隐藏。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("button").click(function(){
$(".myClass1").hide();
});
});
</script>
</head>
<body>
<button type="button">点击</button>
<p>p元素1</p>
<p>p元素2</p>
<div id="myDiv1">Hello</div>
<div Class="myClass1">你好</div>
</body>
</html>
4、通配符选择器*
Sélecteur d'élément (tag) element
.classWildcard * Sélecteur 
matcher tous les éléments
Sélecteur d'union selector1, selector2,...,selectorNwill Les éléments correspondant à chaque sélecteur sont fusionnés et renvoyés ensemble
1. Sélecteur #id :
Le sélecteur #id jQuery sélectionne l'élément spécifié via l'attribut id de l'élément HTML.
Par exemple : utilisez le sélecteur #id pour sélectionner l'élément avec id="myDiv1" et cachez-le. <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("*").css("color", "red");
});
});
</script>
</head>
<body>
<button type="button">点击</button>
<p>p元素1</p>
<p>p元素2</p>
<div id="myDiv1">Hello</div>
<div Class="myClass1">你好</div>
</body>
</html>
🎜
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("p,span").css("color", "red");
});
});
</script>
</head>
<body>
<button type="button">点击</button>
<p>p元素</p>
<span>span元素2</span>
<div id="myDiv1">Hello</div>
<div Class="myClass1">你好</div>
</body>
</html>🎜
🎜🎜 🎜3. Sélecteur .class : 🎜🎜🎜Le sélecteur de classe jQuery peut trouver des éléments via la classe spécifiée. 🎜🎜 Exemple : utilisez le sélecteur de classe pour sélectionner l'élément avec Class="myClass1" et masquez-le. 🎜rrreee🎜🎜🎜 🎜4. Sélecteur de caractères génériques *🎜🎜🎜🎜Le sélecteur de caractères génériques jQuery peut être utilisé pour sélectionner tous les éléments, ou tous les éléments sous un certain élément 🎜🎜 Exemple : ajouter des styles à tous les éléments, rendre la police rouge ; 🎜rrreee🎜🎜🎜🎜🎜5. Sélecteur d'union🎜🎜🎜Lorsque plusieurs éléments ont les mêmes attributs de style, ils peuvent appeler une instruction ensemble et les éléments sont séparés par des virgules. Les sélecteurs de groupe regroupent les éléments de même style. Chaque sélecteur est séparé par une virgule ",". Cette virgule indique au navigateur que la règle contient plusieurs sélecteurs différents, alors la signification exprimée est complètement différente. la virgule devient le sélecteur de descendant dont nous avons parlé plus tôt. Vous devez y faire attention lorsque vous l'utilisez. 🎜🎜Exemple : définissez la couleur de police des éléments p et span sur rouge🎜rrreee🎜🎜🎜🎜[Apprentissage recommandé : 🎜Tutoriel vidéo jQuery🎜, 🎜Vidéo frontale Web🎜]🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!