So fügen Sie einem Element in jquery einen Klassennamen hinzu-Front-End-Fragen und Antworten-php.cn

So fügen Sie einem Element in jquery einen Klassennamen hinzu

青灯夜游

Freigeben： 2022-09-09 19:24:27

Original

5768 Leute haben es durchsucht

Zwei Methoden zum Hinzufügen: 1. Verwenden Sie addClass(), um einen oder mehrere Klassennamen zum ausgewählten Element hinzuzufügen. Die Syntax lautet „$(selector).addClass("Class Name List")", wenn Sie mehrere Klassen hinzufügen müssen Namen, Klassennamen müssen durch Leerzeichen getrennt werden. 2. Verwenden Sie toggleClass(), um dem ausgewählten Element einen Klassennamen mit der Syntax „$(selector).toggleClass(“class name“,true);“ hinzuzufügen.

So fügen Sie einem Element in jquery einen Klassennamen hinzu

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6.1-Version, Dell G3-Computer.

Zwei Möglichkeiten, mit jquery einem Element einen Klassennamen hinzuzufügen

Verwenden Sie addClass(), um einen Klassennamen hinzuzufügen
Verwenden Sie toggleClass(), um einen Klassennamen hinzuzufügen

1 . Verwenden Sie addClass(), um den Klassennamen hinzuzufügen. Die Methode addClass() fügt dem ausgewählten Element eine oder mehrere Klassen hinzu.

Diese Methode entfernt nicht das vorhandene Klassenattribut, sondern fügt nur ein oder mehrere Klassenattribute hinzu.

Tipps: Wenn Sie mehrere Klassen hinzufügen müssen, verwenden Sie bitte Leerzeichen, um die Klassennamen zu trennen.

$(selector).addClass(class)

Nach dem Login kopieren

ParameterBeschreibungKlasseerforderlich. Gibt einen oder mehrere Klassennamen an. Beispiel: Fügen Sie den Klassennamen „p2“ zum p-Element hinzu

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("p").addClass("p2");
				});
			});
		</script>
		<style>
			h1{
				color: coral;
			}
			.p1{
				background-color: yellow;
			}
			.p2{
				font-size: 120%;
				color: red;
			}
	</head>

	<body>
		
		</style>
		<h1>这是一个大标题</h1>
		<p class="p1">这是一个段落。</p>
		<p class="p1">这是另一个段落。</p>
		<button>给p元素增加类名p2</button>
	</body>

</html>

Nach dem Login kopieren

So fügen Sie einem Element in jquery einen Klassennamen hinzu 2. Verwenden Sie die Methode toggleClass(), um einen Klassennamen hinzuzufügen der ausgewählten Elemente Wechseln Sie zwischen mehreren Klassen.

Diese Methode prüft die angegebene Klasse in jedem Element. Fügt die Klasse hinzu, wenn sie nicht vorhanden ist, oder entfernt sie, wenn sie festgelegt ist. Dies wird als Toggle-Effekt bezeichnet.

$(selector).toggleClass(class,switch)

Nach dem Login kopieren

Allerdings können Sie über den Parameter „switch“ festlegen, dass nur Klassen entfernt oder nur hinzugefügt werden.

Schalter: Optionaler Parameter, boolescher Wert, gibt an, ob nur Klassen hinzugefügt (wahr) oder entfernt (falsch) werden.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("p").toggleClass("p2",true);
				});
			});
		</script>
		<style>
			h1{
				color: coral;
			}
			.p1{
				font-size: 120%;
				color: red;
			}
			.p2{
				background-color: yellow;
			}
	</head>

	<body>
		
		</style>
		<h1>这是一个大标题</h1>
		<p class="p1">这是一个段落。</p>
		<p class="p1">这是另一个段落。</p>
		<button>给p元素增加类名p2</button>
	</body>

</html>

Nach dem Login kopieren

【Empfohlenes Lernen:

Web-Frontend-Video So fügen Sie einem Element in jquery einen Klassennamen hinzu 】

Das obige ist der detaillierte Inhalt vonSo fügen Sie einem Element in jquery einen Klassennamen hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!