Die fantastische Jquery – gegenseitige Konvertierung zwischen Jquery- und DOM-Objekten und drei Operationen von DOM_jquery

Nur ​​jQuery-Objekte können verschiedene Funktionen der jQuery-Klassenbibliothek aufrufen. Ebenso können einige Eigenschaften und Methoden von Dom-Objekten in jQuery nicht aufgerufen werden, aber grundsätzlich umfassen die von der jQuery-Klassenbibliothek bereitgestellten Funktionen alle Dom-Operationen. Dazu müssen wir wissen, wie man jQuery-Objekte in und aus DOM konvertiert.

1. Das jQuery-Objekt ist ein Objekt, das durch Umschließen des DOM-Objekts durch jQuery generiert wird.

2. Konvertierung zwischen jQuery-Objekten und DOM-Objekten.

Guter Schreibstil:

Code kopieren Der Code lautet wie folgt:

var $input=$("input")

Das von jQuery erhaltene Objekt fügt $ vor der Variablen hinzu.

<1>JQUEry-Objekt in DOM-Objekt konvertieren, zwei Methoden: [index] und get(index)

a:var $cr=$("#cr") //jQuery-Objekt
var cr=$cr[0] //DOM-Objekt
b:var $cr=$("#cr") //jQuery-Objekt
var cr=$cr.get(0); //DOM-Objekt

<2>DOM-Objekt in jQuery-Objekt konvertieren

var cr=document.getElementById("cr"); //DOM-Objekt
var $cr=$(cr);

3. Konflikte mit anderen Bibliotheken lösen

jQuery.noConflict().
jQuery verwendet $ als eigene Verknüpfung.

4. Vorteile der Verwendung von jQuery

<1>Prägnantes Schreiben
<2>Unterstützung von CC1 bis CCS3
<3>Perfekter Verarbeitungsmechanismus

Führen Sie den obigen Code aus und der Browser meldet einen Fehler!
Aber wenn du es so schreibst:

Code kopieren Der Code lautet wie folgt:

$('#tt').css("color","red");

Der Browser meldet keinen Fehler, da kein solches Element vorhanden ist!

5.jQuery-Selektor

jQuery-Selektor ist die oberste Priorität von jQuery!

jQuery-Filterselektoren ähneln Pseudoklassenselektoren in CSS.

<1>Gerade und ungerade Selektoren

Gerade Zahl: $("tr:even")
Ungerade Zahl: $("tr:odd")

<2>CSS3-Pseudoklassenselektor für gerade und ungerade Zahlen

Code kopieren Der Code lautet wie folgt:

p:nth-child(odd)
{
Hintergrund:#ff0000;
}
p:nth-child(even)
{
Hintergrund:#0000ff;
}

<2>Formulartypauswahl

<3>Escape-Selektoren, um Fehler zu vermeiden

6.DOM-Operationsklassifizierung (1: DOM Core 2.HTML-DOM 3.CSS-DOM)

1.DOM Core

DOM Core ist nicht ausschließlich auf JavaScript beschränkt, jede Programmiersprache, die DOM unterstützt, kann es verwenden. Seine Verwendung beschränkt sich nicht auf die Verarbeitung von Webseiten. Es kann auch verwendet werden, um jedes Dokument zu verarbeiten, das in einer Auszeichnungssprache wie XML geschrieben ist.

2.HTML_DOM

Beim Schreiben von Skripten für HTML-Dateien mit JavaScript und DOM gibt es viele HTML-DOM-spezifische Attribute.
HTML_DOM bietet einige prägnantere Notationen zur Beschreibung der Attribute verschiedener HTML-Elemente.
Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

document.forms
element.src

Nur ​​für WEB

3.CSS_DOM

CSS_DOM ist eine Operation für CSS. Hauptsächlich, um verschiedene Eigenschaften des Stilobjekts abzurufen und festzulegen.
Durch Ändern verschiedener Eigenschaften des Stilobjekts. Verschiedene Effekte ändern.

Code kopieren Der Code lautet wie folgt:

element.style.color=“red“;

7. Knoten durchqueren

1.children()
2.next()
3.prev()
4.Geschwister()
5.closest()

8.jquey CSS

<1> Sie können die Transparenz verwenden, um die Transparenz festzulegen, und jQuery hat sich bereits um das Kompatibilitätsproblem gekümmert.

$("p").css("opacity","0.5");

<2>$("p").height(100) //Die Standardeinheit von 100 ist px. Wenn Sie andere Einheiten verwenden möchten, müssen Sie eine Zeichenfolge
verwenden

<3>offset()-Methode

Gibt den Versatz relativ zum Ansichtsfenster zurück

Code kopieren Der Code lautet wie folgt:

var offset=$("p").offset();
var left=offset.left;
var top=offset.top;

<4>position()

Code kopieren Der Code lautet wie folgt:

//Gibt den Offset relativ zum aktuellsten Positionsstil zurück.
var position=$("p").position();
var left=position.left;
var top=position.top;

<5>scrollTop() und scrollLeft()

Code kopieren Der Code lautet wie folgt:

//Gibt den Abstand vom oberen und linken Rand der Bildlaufleiste zurück.
var $p=$("p");
var top=$p.scrollTop();
var left=$p.scrollLeft();
//Sie können den Bildlauf auch auf eine bestimmte Position einstellen:
$("ab").scrollTop(300);

<6>pageX und pageY, ermitteln die Position der Maus auf der Seite

Code kopieren Der Code lautet wie folgt:

$(document).mousemove(function(e){
$("span").text("X: " e.pageX ", Y: " e.pageY);
});