Ausführliche Erklärung zur Verwendung des jQuery-Klassennamenselektors (.class)

Dieses Mal werde ich Ihnen ausführlich erklären, wie Sie den jQuery-Klassennamenselektor (.class) verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung des jQuery-Klassennamenselektors (.class). ist ein praktischer Fall. Stehen Sie auf und werfen Sie einen Blick darauf.

1. Einführung

Der Klassennamenselektor findet passende DOM-Elemente anhand des Namens der CSS-Klasse, die dem Element gehört.

Auf einer Seite kann ein Element mehrere CSS-Klassen haben, und eine CSS-Klasse kann mit mehreren Elementen übereinstimmen. Wenn ein Element einen passenden Klassennamen enthält, kann dieser über den Klassennamenselektor ausgewählt werden.

Die Auswahl des Klassennamens ist für die meisten Menschen leicht zu verstehen. Der CSS-Klassenname kann als Kursname verstanden werden, und die Studenten können ihn verstehen Wählen Sie mehrere Kurse aus, und ein Kurs kann von mehreren Studenten gewählt werden.

Die Beziehung zwischen CSS-Klassen und Elementen kann eine Viele-zu-Viele-Beziehung, eine Eins-zu-Viele-Beziehung oder eine Viele-zu-Eins-Beziehung sein. Einfach ausgedrückt findet der Klassennamenselektor passende Elemente basierend auf dem CSS-Klassennamen des Elements.

Der Klassennamenselektor wird wie folgt verwendet:

$(".class");

wobei Klasse der CSS-Klassenname ist, der zum Abfragen des Elements verwendet wird.

Um beispielsweise Elemente mit dem CSS-Klassennamen word_orange abzufragen, können Sie den folgenden jQuery-Code verwenden:

$("word_orange");

2. Anwendung

Fügen Sie auf der Seite zunächst zwei

-Tags hinzu und legen Sie die CSS-Klasse für eines davon fest. Wählen Sie dann das

-Tag mit der CSS-Klasse aus, die über die Klassennamenauswahl von jQuery festgelegt wurde seine CSS-Stile.

3. Code

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<p class="myClass">注意观察我的样式</p>
<p>我的样式是默认的</p>
<script type="text/javascript">
$(document).ready(
function()
{
  var myClass = $(".myClass");   //选取DOM元素
  myClass.css("background-color","#C50210");  //为选取的DOM元素设置背景颜色
  myClass.css("color","#FFF");  //为选取的DOM元素设置文字颜色
});
</script>

4. Laufeffekt

Bedienungsanweisungen

Im obigen Code ist CSS nur für eine der

-Tags festgelegt name, aber da es im Programm keine CSS-Klasse namens myClass gibt, hat diese Klasse keine Attribute. Der Klassennamenselektor

gibt einen jQuery-Verpackungssatz mit dem Namen myClass zurück. Mit der Methode css() kann der CSS-Attributwert für das entsprechende p-Element festgelegt werden dunkelrot und die Textfarbe ist auf Weiß eingestellt. Der Klassennamenselektor

kann auch einen Satz von jQuery-Wrappern erhalten, da mehrere Elemente denselben CSS-Stil haben können.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Implementierung der Multiform-Validierung von dynamisch gebundenen Vue-Komponenten, untergeordneten und übergeordneten Komponenten

jQuery-Elementauswahl Detaillierte Erläuterung der Geräteanwendungsfälle

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung des jQuery-Klassennamenselektors (.class). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!