Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der drei Methoden des CSS-Stils für jQuery-Bedienelemente
Detaillierte Erläuterung der drei Methoden des CSS-Stils für jQuery-Bedienelemente
- 高洛峰Original
- 2017-03-13 10:15:301407Durchsuche
jQuery bietet drei Methoden zum Ändern des Stils von Seitenelementen. Obwohl sie herkömmlichen Methoden ähneln, sparen sie viel Code.
Wir verwenden häufig Javascript, um den Stil von zu ändern das Seitenelement. Eine Möglichkeit besteht darin, die CSS-Klasse(Klasse) des Seitenelements zu ändern. In herkömmlichem Javascript tun wir dies normalerweise durch die Verarbeitung des Klassennamenattributs von HTML Dom und jQuery zur Implementierung dieser Funktion bereitgestellt, obwohl sie den herkömmlichen Methoden ähneln, sparen sie viel Code. Immer noch derselbe Satz – „jQuery macht JavaScript-Code prägnant!“
1. CSS-Klasse hinzufügen
$("#target").addClass("newClass"); /#target bezieht sich auf die ID des Elements, das gestylt werden muss
//newClass bezieht sich auf den Namen der CSS-Klasse
2. RemoveClass() – entfernt die CSS-Klasse
$("#target " ).removeClass("oldClass");
//#target bezieht sich auf die ID des Elements, dessen CSS-Klasse entfernt werden muss
//oldClass bezieht sich auf den Namen der CSS-Klasse
3. toggleClass() – Eine CSS-Klasse hinzufügen oder entfernen: Wenn die CSS-Klasse bereits vorhanden ist, wird sie entfernt; wenn die CSS-Klasse nicht vorhanden ist, wird sie hinzugefügt.
$("#target").toggleClass("newClass")
//Wenn für das Element mit der ID „target“ ein CSS-Stil definiert ist, wird dieser entfernt
//Im Gegenteil, CSS Der Klasse „newClass“ wird diese ID zugewiesen.
In tatsächlichen Anwendungen definieren wir häufig zuerst diese CSS-Klassen und ändern dann den Seitenelementstil durch Auslösen von Javascript-Ereignissen (z. B. durch Klicken auf einen Link). Darüber hinaus stellt jQuery auch eine Methode hasClass("className") bereit, um festzustellen, ob einem Element eine CSS-Klasse zugewiesen wurde.
Unten finden Sie ein vollständiges Beispiel.
<!DOCTYPE HTML>
<head>
<title>图片闪烁</title>
<style type="text/css">
@-webkit-keyframes twinkling{ /*透明度由0到1*/
0%{
opacity:0; /*透明度为0*/
}
100%{
opacity:1; /*透明度为1*/
}
}
.up{
-webkit-animation: twinkling 1s infinite ease-in-out;
}
</style>
</head>
<body>
<p id="soccer" class="up">
哈哈
</p>
<br/>
<input type="button" onclick='btnClick()'>
<script src="./jQuery/jquery-1.8.3.js" type="text/javascript"></script>
<script>
function btnClick(){
//$("#soccer").removeClass("up");
$("#soccer").toggleClass("up");
//$("p:first").removeClass("intro");
}
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der drei Methoden des CSS-Stils für jQuery-Bedienelemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!