Dieser Artikel hilft Ihnen beim Einstieg und beim Verständnis der grundlegenden Vorgänge von JQuery

Dieser Artikel hilft Ihnen beim Einstieg und beim Verständnis der grundlegenden Vorgänge von JQuery

1. Schritte zur Verwendung von Jquery:

(1) Importieren Sie die JS-Bibliothek

<script src="js/jquery-1.11.3.min.js"></script>​
//js/jquery-1.11.3.min.js komprimierte Version (empfohlen)
//js/jquery-1.11.3.js Vollversion

(2) Seitenladevorgang

$(Dokument).bereit(Funktion(){
    Geschäftsbetrieb;
});​
//Nach der Optimierung:
$(Funktion(){
    Geschäftsbetrieb;
});

2. Konvertierung zwischen Jq-Objekten und js-Objekten

(1) js-Objekt -----> jq-Objekt

var js-Objekt = document.getElementById("id-Attributwert");
var $jq-Objekt = $(js-Objekt)

(2) jq-Objekt -----> js-Objekt

var js-Objekt = $jq Objekt.get(index);

3.jqs grundlegender Selektor

//(1)jq's ID-Selektor

$("#id Attributwert"). Bindungsereignismethode (function(){
    Geschäftsbetrieb;
});

//(2)jq's Klassenselektor

$("#.class Attributwert"). Bindungsereignismethode (function(){
    Geschäftsbetrieb;
});

//(3) Formularselektor

$("Ausgewähltes Eingabe-Tag [Tag mit angegebenen Attributen]"). Bindungsereignismethode (function(){
    Geschäftsbetrieb;
});

//(4)Elementselektor

$("element/tag").html("XXX");

4.jqs hierarchischer Selektor

//Nachkommenselektor $("übergeordneter Tag untergeordneter Tag")
​
//Unterelement-Selektor $("übergeordnetes Element > untergeordnetes Element")

5. Filterauswahl

$("label:first") // entspricht dem ersten Label $("label:even") // entspricht einer geraden Anzahl von Labels, beginnend bei 0 (0,2,4...)
$("label:odd") //entspricht einer ungeraden Anzahl von Elementen, beginnend bei 1 (1,3,5...)

6. Attributselektoren

[Attribut] //Passt auf Elemente mit dem aktuell angegebenen Attribut an [Attribut=Wert] //Passt auf Elemente mit einem angegebenen Attribut an, das einen bestimmten Wert hat [Attribut!=Wert] //Passt auf alle Elemente an, die das Attribut des angegebenen Elements nicht enthalten oder deren Attribut nicht einem bestimmten Wert entspricht [Attribut^=Wert] //Passt auf bestimmte Elemente an, die mit dem angegebenen Element beginnen [Attribut$=Wert] //Passt auf Elemente an, die mit dem angegebenen Element enden [Attribut*=Wert] //Passt auf Elemente mit angegebenen Attributen an, die bestimmte Werte enthalten ​​[Selektor1][Selektor2]...[SelektorN]
    //Erfüllt den Attributselektor. Elemente, die mehrere Attributbedingungen gleichzeitig erfüllen

7.jq Dokumentenverarbeitung

//Anhängen append(content) //Füge Inhalt an jedes passende Element an (empfohlen)
jq object.appendTo(comtent) //Den übereinstimmenden Inhalt an einen anderen angegebenen Elementsatz anhängen​
//Voranstellen prepend(content) //Jedes passende Element vor den Inhalt setzen prependTo(content) //Alle passenden Elemente einem anderen angegebenen Satz von Elementen voranstellen​
//insertafter(content|fn) //Füge Inhalt nach jedem passenden Element eininsertAfter(content) //Füge die passenden Elemente nach dem Inhalt einbefore(content) //Füge Inhalt vor jedem passenden Element eininsetBefore(content) //Füge jedes passende Element vor dem Inhalt ein

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:
  • Tutorial zu den Grundlagen von JavaScript und JQuery Framework
  • Beispiel für die Grundlagen der Verwendung eines jQuery-Selektors
  • jQuery-Grundlagen_Wichtige Wissenspunkte für den Einstieg
  • Tutorial zu den Grundlagen des jQuery-Selektors
  • JQuery Grundlagen Beispiel (1)
  • Lernhandbuch zu den jQuery-Grundlagen

<<:  Einige Indikatoren für exzellentes Web-Frontend-Design

>>:  Neue Einstellungen für Text und Schriftarten in CSS3

Artikel empfehlen

【HTML-Element】Detaillierte Erklärung des Tag-Textes

1. Verwenden Sie grundlegende Textelemente, um In...

Detaillierte Erklärung gängiger Docker-Befehle

1. Hilfe-Befehl 1. Aktuelle Docker-Version anzeig...

So verarbeiten Sie lokal dynamisch geladene Bilder in Vue

Finden Sie das Problem Heute bin ich auf ein Prob...

Der Button hat einen hässlichen grauen Rand. Wie kann ich ihn entfernen?

Ich habe den Dialog beim Schließen verwendet und e...

Detaillierte Erläuterung der MySQL-Cursor-Konzepte und -Verwendung

Dieser Artikel erläutert anhand von Beispielen da...

Tutorial zur Installation und Verwendung des Elasticsearch-Tools cerebro

Cerebro ist eine Weiterentwicklung des Elasticsea...

Grafisches Tutorial zur Installation und Konfiguration von CenOS6.7 mysql 8.0.22

CenOS6.7 installiert MySQL8.0.22 (empfohlene Samm...

So schreiben Sie HTML-Header in der Webentwicklung für mobile Geräte

Code kopieren Der Code lautet wie folgt: <Kopf...