Heim > Artikel > Was ist der Unterschied zwischen JQuery-Selektoren und CSS-Selektoren?

Was ist der Unterschied zwischen JQuery-Selektoren und CSS-Selektoren?

青灯夜游Original: 2020-11-13 15:03:495797Durchsuche

Unterschied: 1. Die Funktionen der beiden sind unterschiedlich. Nachdem der CSS-Selektor das Element gefunden hat, legt er den Stil des Elements fest, und der jQuery-Selektor fügt das Verhalten nach dem Finden des Elements hinzu. 3. Die Effizienz von CSS-Selektoren und jQuery-Selektoren ist unterschiedlich.

Wir wissen, dass jQuery-Selektoren und CSS-Selektoren sehr ähnlich geschrieben sind. Sie müssen nicht jedes Element durchlaufen, das die Selektoranforderungen erfüllt. Normalerweise wird der CSS-Selektor mit $("") umschlossen, um ein jQuery-Selektor zu werden, z. myID")

Klassenauswahl.myClass$(".myClass")Tag-Auswahlp$("p")Ebenenauswahl p > strong$("p>strong")css wird als Pseudoklassenselektor bezeichnetSiehe das Beispiel unten. CSS legt den Text jedes Absatzes auf 14 Pixel fest und die Farbe ist Rot. In jQuery ist der Text auf 16 Pixel eingestellt und die Farbe ist blau, da JQuery das Verhalten festlegt Nach dem Laden des DOM werden alle Absätze in Blau mit 16 Pixel großen Wörtern angezeigt.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
p { font-size: 14px; color:#F00 }
p:nth-child(3){color:#690}
</style>
<script src="jquery/jquery-1.11.3.js"></script>
<script>
$(document).ready(function() {
  $("p").css({"color":"#00f","font-size":"16px"});
  $("p:nth-child(3)").css({"font-size":"24px"});
});
</script>
</head>
<body>
  <p>第一段</p>
  <p>第二段</p>
  <p>第三段</p>
  <p>第四段</p>
</body>
</html>

Was ist also der Unterschied zwischen den beiden? 2. Der jQuery-Selektor bietet eine bessere browserübergreifende Kompatibilität. 3. Die Effizienz des Selektors. Effizienz des CSS-Selektors (#myid) 2. Tag-Selektor (p, h1, p)




jQuery wird als Filterselektor bezeichnet	p:nth-child(3)	$("p:nth-child (3)")

1. Nachdem der CSS-Selektor das Element gefunden hat, legt er den Stil des Elements fest und der jQuery-Selektor fügt das Verhalten hinzu, nachdem er das Element gefunden hat.

4 )

5, untergeordneter Selektor (ul > li)

6, Nachkommenselektor (li a)

7, Platzhalterselektor (*)

8, Attributselektor (a[ rel="external"])

9. Pseudoklassenselektor (a:hover, li:nth-child)

Die Effizienz der oben genannten neun Selektoren wird von hoch nach niedrig eingestuft, und der ID-Selektor ist die höchste Effizienz der Pseudoklassenselektoren ist am niedrigsten. Für eine ausführliche Einführung können Sie sich auch „Effiziente CSS-Selektoren schreiben“ ansehen (Adresse: http://csswizardry.com/2011/09/writing-efficient-css-selectors/).

Effizienz des jQuery-Selektors

1. Attributselektor $('#id')

2. '[attribute=value]') und Pseudoklassenselektor $(':hidden')

Weitere programmierbezogene Kenntnisse finden Sie unter:

Programmierkurs

! !

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen JQuery-Selektoren und CSS-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

Vorheriger Artikel：Was ist das Format jjjj-mm-tt?Nächster Artikel：Was ist das Format jjjj-mm-tt?

In Verbindung stehende Artikel

Mehr sehen