Heim > Artikel > Web-Frontend > jquery verfügt über mehrere grundlegende Selektoren
jquery verfügt über mehrere grundlegende Selektoren
- 青灯夜游Original
- 2022-05-07 20:09:193140Durchsuche
Es gibt 5 grundlegende Selektoren: 1. ID-Selektor, passende Elemente basierend auf der ID, Syntax „$(“#id value“)“ 2. Element-Selektor, passende Elemente basierend auf dem Elementnamen, Syntax „$(“ Elementname ")"; 3. Klassenselektor, passt Elemente entsprechend der Klasse an, Syntax "$(".Klassenname")" 4. Wildcard-Selektor "*", passt alle Elemente an usw.
Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.
Der Basisselektor ist der am häufigsten verwendete Selektor in jQuery. jquery verfügt über 5 Grundselektoren:
| Selektor | Funktionsbeschreibung | |
|---|---|---|
ID-Selektor #id
|
Übereinstimmen eines Elements basierend auf der angegebenen ID | 根据给定的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、通配符选择器*
Element (Tag)-Selektor Element
.classWildcard * Selektor 
Alle Elemente abgleichen
Union-Selektor selector1, selector2,...,selectorNwill Jeder Selektor gleicht die Elemente ab und gibt sie zusammen zurück
1. #id-Selektor:
jQuery #id-Selektor wählt das angegebene Element über das id-Attribut des HTML-Elementelements aus.
Zum Beispiel: Verwenden Sie den #id-Selektor, um das Element auszuwählen id="myDiv1" und verstecke es. <!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>
-Elemente auszuwählen und auszublenden. 🎜
<!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. .class-Selektor: 🎜🎜🎜Der jQuery-Klassenselektor kann Elemente über die angegebene Klasse finden. 🎜🎜 Beispiel: Verwenden Sie den Klassenselektor, um das Element mit Class="myClass1" auszuwählen und auszublenden. 🎜rrreee🎜🎜🎜 🎜4. Platzhalter-Selektor *🎜🎜🎜🎜jQuery-Platzhalter-Selektor kann verwendet werden, um alle Elemente oder alle Elemente unter einem bestimmten Element auszuwählen; 🎜🎜 Beispiel: Stile zu allen Elementen hinzufügen, Schriftart rot machen 🎜rrreee🎜🎜🎜🎜🎜5. Union-Selektor🎜🎜🎜Wenn mehrere Elemente die gleichen Stilattribute haben, können sie zusammen eine Anweisung aufrufen und die Elemente werden durch Kommas getrennt. Gruppenselektoren gruppieren Elemente mit demselben Stil. Durch ein Komma wird dem Browser mitgeteilt, dass die Regel mehrere unterschiedliche Selektoren enthält Das Komma wird zum zuvor erwähnten Nachkommenselektor. Sie müssen bei der Verwendung vorsichtig sein. 🎜🎜Beispiel: Stellen Sie die Schriftfarbe von p- und span-Elementen auf Rot einDas obige ist der detaillierte Inhalt vonjquery verfügt über mehrere grundlegende Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!