Heim  >  Artikel  >  Web-Frontend  >  jquery verfügt über mehrere grundlegende Selektoren

jquery verfügt über mehrere grundlegende Selektoren

青灯夜游
青灯夜游Original
2022-05-07 20:09:193120Durchsuche

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.

jquery verfügt über mehrere grundlegende Selektoren

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:

jquery verfügt über mehrere grundlegende Selektoren

#id
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>

jquery verfügt über mehrere grundlegende Selektoren

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>

jquery verfügt über mehrere grundlegende Selektoren

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>

jquery verfügt über mehrere grundlegende Selektoren

4、通配符选择器*
Element (Tag)-Selektor Element

Basierend auf dem angegebenen Der Elementname stimmt mit allen überein Elemente

Klassenselektor .classÜbereinstimmt Elemente basierend auf der angegebenen Klasse

Wildcard * Selektor jquery verfügt über mehrere grundlegende SelektorenAlle 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.

jquery verfügt über mehrere grundlegende SelektorenDie ID des Elements auf der Seite sollte eindeutig sein. Wenn Sie also ein eindeutiges Element auf der Seite auswählen möchten, müssen Sie den #id-Selektor verwenden.

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>
jquery verfügt über mehrere grundlegende Selektoren

2. Elementselektor: 🎜🎜🎜jQuery-Elementselektor wählt Elemente basierend auf ihren Namen aus. 🎜🎜Beispiel: Verwenden Sie die Elementauswahl, um alle

-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>
🎜jquery verfügt über mehrere grundlegende Selektoren🎜🎜 🎜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🎜jquery verfügt über mehrere grundlegende Selektoren🎜🎜 🎜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 ein

Das 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn