js implementiert eine einfache Methode zur Kapselung von jQuery und eine detaillierte Erklärung der Kettenoperationen

Inhaltsverzeichnis

1. Implementieren Sie die Methode $(".box1").click()
2. Implementieren Sie die Methode $("div").click()
3. Betrachten Sie drei Fälle von Parametern in $( )
4. Implementieren Sie die On-Methode in jq
5. Implementieren Sie Kettenoperationen
6. Implementieren Sie die eq-Methode in jq
7. Implementieren Sie die Endmethode in jq
8. Implementieren Sie CSS-Methoden in jq
Zusammenfassen

In diesem Artikel erkläre ich, wie man mit js eine einfache Methode zur Kapselung von jQuery implementiert.

Dieser Artikel implementiert mehrere jQuery-Methoden. Ich teile ihn in 8 kleine Ziele auf

Implementieren der Methode $(".box1").click()
Implementieren der Methode $("div").click()
Betrachten Sie drei Fälle von Parametern in $( )
Implementieren der On-Methode in jq
Implementierung von Kettenoperationen
Implementieren der eq-Methode in jq
Implementieren Sie die Endmethode in jq
Implementieren von CSS-Methoden in jq

Sollten Ungenauigkeiten vorhanden sein, weisen Sie bitte im Kommentarbereich darauf hin, danke.

1. Implementieren Sie die Methode $(".box1").click()

Zunächst legen wir das erste kleine Ziel fest, nämlich wie die Funktionen des folgenden jQuery-Codes Schritt für Schritt implementiert werden.

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <title>Dokument</title>
 //Wenn Sie in derselben Datei arbeiten, denken Sie daran, das unten eingeführte CDN zu löschen
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
 <Stil> .box1 {
  Breite: 100px;
  Höhe: 100px;
  Hintergrund: rot;
 } </Stil>
</Kopf>
<Text>
 <div Klasse="Box1"></div>
</body>
<Skript> $(".box1").click(()=>{
 konsole.log(456);
 }) </script>
</html>
Code kopieren

 $(".box1").klick(()=>{
 konsole.log(456);
 })

Okay, kommen wir zurück zum Thema und analysieren den obigen jQuery-Code.

$(".box1") implementiert die Selektorfunktion.
$(".box1").click ist der Selektor + Aufruf der Klickmethode
Übergeben Sie die Funktion abschließend an click.

Das erste kleine Ziel besteht darin, JS selbst zu kapseln, um die Funktionen des obigen Codes zu implementieren. Dies erreichen wir durch eine dreistufige Strategie.

js implementiert $(".box1")
Implementieren Sie $(".box1").click()
Implementieren Sie $(".box1").click( ( ) => { console.log("123") } )

Der erste Schritt besteht darin, $(".box1") mit js zu implementieren, richtig?

 // Implementiere $(".box1")
 Klasse jquery {
 Konstruktor(Argument) {
  Konsole.log(Dokument.Abfrageselektor(Argument));
 }
 }

 Funktion $(arg) {
 gib ein neues jQuery(Argument) zurück;
 }

 // Implementiere $(".box1")
 Lassen Sie res = $(".box1");
 konsole.log(res);

Auf diese Weise wird (".box1") implementiert, indem die Methode () erstellt und die jQuery-Instanz zurückgegeben wird.

Der nächste Schritt besteht darin, $(".box1").click() zu implementieren. Ich glaube, Sie können sehen, dass es in der JQuery-Klasse eine zusätzliche Klickmethode gibt.

 // Implementiere $(".box1").click()
 Klasse jquery {
 Konstruktor(Argument) {
  Konsole.log(Dokument.Abfrageselektor(Argument));
 }

 klick() {
  console.log("Klickmethode ausgeführt");
 }
 }

 Funktion $(arg) {
 gib ein neues jQuery(Argument) zurück;
 }

 // Implementiere $(".box1").click()
 let res = $(".box1").click();
 konsole.log(res);

Als nächstes fahren wir mit dem dritten Schritt fort, der darin besteht, $(".box1").click( ( ) => { console.log("123") } ) zu implementieren.

 // Implementiere $(".box1").click(() => {console.log("123")})
 Klasse jquery {
 Konstruktor(Argument) {
  dieses.Element = Dokument.QuerySelector(arg);
  // konsole.log(element);
 }

 Klick(fn) {
  this.element.addEventListener("klicken", fn);
 }

 }

 Funktion $(arg) {
 gib ein neues jQuery(Argument) zurück;
 }

 // Implementiere $(".box1").click(() => {console.log("123")})
 $(".box1").klick(() => {
 console.log("123")
 });

Bisher haben wir das erste kleine Ziel erreicht. Glauben Sie, es ist einfach? Ok, gehen wir zum zweiten kleinen Ziel über.

2. Implementieren Sie die Methode $("div").click()

Das zweite kleine Ziel ist auch nicht schwierig. Wenn man bedenkt, dass es mehrere Div-Elemente gibt, die an Klickereignisse gebunden werden müssen, ist die Vorgehensweise eigentlich ganz einfach, wenn wir selectSelectorAll verwenden, um die Elemente abzurufen. Fügen Sie einfach eine weitere Schleife in die Klickmethode ein, um den Wert in der NodeList abzurufen. Ich werde den Code direkt posten, Sie werden es wissen, nachdem Sie ihn ausprobiert haben.

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <title>Dokument</title>
 <Stil> .box1 {
  Breite: 100px;
  Höhe: 100px;
  Hintergrund: rot;
 }
 .box2 {
  Breite: 100px;
  Höhe: 100px;
  Hintergrund: blau;
 } </Stil>
</Kopf>

<Text>
 <div Klasse="Box1"></div>

 <div Klasse="box2"></div>
</body>

<script> // Implementiere $(".box1").click(() => {console.log("123")})
 Klasse jquery {
 Konstruktor(Argument) {
  //Das folgende Element speichert ein NodeList-Objekt, das ein arrayähnliches Objekt mit einer Längeneigenschaft ist: this.element = document.querySelectorAll(arg);
 }

 Klick(fn) {
  für(lass i = 0; i < diese.Elementlänge; i++) {
  this.element[i].addEventListener("klicken", fn);
  }  
 }

 }

 Funktion $(arg) {
 gib ein neues jQuery(Argument) zurück;
 }

 // Implementiere $(".box1").click(() => {console.log("123")})
 $("div").klick(() => {
 console.log("123")
 }); </script>

</html>

Okay, ich glaube, Sie haben jetzt, da Sie zwei kleine Ziele erreicht haben, bereits ein Erfolgserlebnis.

3. Betrachten Sie drei Fälle von Parametern in $( )

Als nächstes betrachten wir für das dritte kleine Ziel die Fälle mit unterschiedlichen Parametern in $( ). Ich werde zunächst drei Fälle auflisten. (Es kann andere Situationen geben, die ich hier nicht erwähne)

1. Fall 1: Der Parameter $() ist ein String

$(".box1")

2. Fall 2: Der $()-Parameter ist eine Funktion.

//Parameter ist Funktion $(function() {
 console.log("123");
 })

3. Fall 3: Der Parameter $() ist ein NodeList-Objekt oder ein durch selectSelect erhaltener Knoten

// Fall 3 $(document.querySelectorAll("div")).click(()=>{
 console.log("123");
 })
 $(document.querySelector("div")).click(()=>{
 console.log("456");
 })

Das nächste kleine Ziel besteht darin, Funktionen von Hand zu schreiben, um drei Situationen zu implementieren. Zuerst fügen wir die Methode addEles hinzu und ändern die obige Klickmethode

addEles(eles){
  für (lass i = 0; i < eles.length; i++) {
  dies[i] = eles[i];
  }
  diese.Länge = eles.Länge;
 }

 // Implementiere $(".box1").click(() => {console.log("123")}) 
 Klick(fn) {
  für(lass i = 0; i < diese.Länge; i++) {
  this[i].addEventListener("klicken", fn);
  }  
 }

Als nächstes implementieren wir drei verschiedene Parameterverarbeitungsmethoden

Konstruktor(Argument) {

  //Fall 1, wenn (Typ von arg === 'Zeichenfolge') {
  dies.addEles(document.querySelectorAll(arg));
  }sonst wenn(Typ des Arguments === 'Funktion') {
  //Fall 2 document.addEventListener("DOMContentLoaded", arg);
  }anders {
  //Fall 3 wenn (Typ von arg.length === 'undefined') {
   dies[0] = arg;
   diese.Länge = 1;
  }anders {
   dies.addEles(arg);
  }
  }

 }

4. Implementieren Sie die On-Methode in jq

Als nächstes werden wir das vierte Ziel erreichen und die On-Methode von jq implementieren

// bei Methode on(eventName, fn) {
  let eventArray = eventName.split(" ");
  //Mehrere Knoten berücksichtigen for(let i = 0; i < this.length; i++) {
  //Mehrere Ereignisse berücksichtigen for(let j = 0; j < eventArray.length; j++) {
   dies[i].addEventListener(eventArray[j], fn);
  }
  }
 }

Testen Sie es erneut und prüfen Sie, ob es in Ordnung ist

// bei Methode $("div").on("mouseover mousedown",function(){
 console.log("bei Methode");
 })

5. Implementieren Sie Kettenoperationen

Als nächstes werden wir das fünfte Ziel erreichen und die Kettenoperation von jq implementieren

Der entscheidende Punkt ist, return this in on hinzuzufügen und zu klicken, um eine Verkettung zu erreichen.

//Kettenoperation//Wichtiger Punkt. Fügen Sie „return this“ in „on“ und „click“ hinzu, um die Kettenoperation zu realisieren. //Klickmethode click(fn) {
  für(lass i = 0; i < diese.Länge; i++) {
  this[i].addEventListener("klicken", fn);
  }
  gib dies zurück; 
  // konsole.log(dies); 
 }

 // bei Methode on(eventName, fn) {
  let eventArray = eventName.split(" ");
  //Mehrere Knoten berücksichtigen for(let i = 0; i < this.length; i++) {
  //Mehrere Ereignisse berücksichtigen for(let j = 0; j < eventArray.length; j++) {
   dies[i].addEventListener(eventArray[j], fn);
  }
  }
  gib dies zurück;
 }

6. Implementieren Sie die eq-Methode in jq

Als nächstes werden wir das sechste Ziel erreichen und die eq-Methode in jq implementieren

//eq-Methode eq(index) {
  gib ein neues jquery(this[index]) zurück;
 }

Der Prozess der Implementierung durch Erstellen einer neuen jQuery sollte jedem klar sein. Lassen Sie uns das noch einmal durchgehen:

Funktion ausführen
Automatisch ein leeres Objekt erstellen
Setzen Sie den Prototyp des leeren Objekts auf die Prototypeigenschaft des Konstruktors
Binden Sie innerhalb einer Funktion ein leeres Objekt daran
Wenn auf rentur ein Objekt folgt, geben Sie dieses Objekt zurück. Wenn nicht befolgt, wird automatisch zu diesem Objekt zurückgekehrt

7. Implementieren Sie die Endmethode in jq

Erreichen Sie das siebte kleine Ziel und implementieren Sie die Endmethode in jq. Um diese Funktion zu implementieren, müssen wir nicht nur eine neue end()-Methode hinzufügen, sondern sie auch im Konstruktor implementieren, dem Konstruktor einen neuen Parameter root hinzufügen, eine neue Eigenschaft prevObject hinzufügen und der eq-Methode einen neuen Parameter this hinzufügen.

Konstruktor(Argument, Wurzel) {
  wenn(Typ der Wurzel === "undefiniert") {
  this.prevObject = [Dokument];
  }anders {
  dieses.vorherigesObjekt = root;
  }
 //eq-Methode eq(index) {
  gib ein neues jquery(diesen[index], dies) zurück;
 }
 //Ende der Methode end() {
  gib dieses vorherige Objekt zurück;
 }

8. Implementieren Sie CSS-Methoden in jq

In jq kann CSS Stile abrufen, einen Stil oder mehrere Stile festlegen

// Fall 1: Den Stil abrufen (nur das erste Element abrufen)

 let res = $("div").css("Hintergrund");
 konsole.log(res);

// Fall 2 (Stil festlegen)

 $("div").css("Hintergrund","gelb");

// // Fall 3 (mehrere Stile festlegen)

 $("div").css({Hintergrund:"schwarz",Breite:200,Deckkraft:0,3});

Als nächstes implementieren Sie die CSS-Methode

//CSS-Methode css(...args) {
  wenn(args.length === 1) {

  //Fall 1: Stil abrufen, wenn (Typ von Argumenten[0] === 'string') {
   gibt dies zurück.getStyle(dies[0], args[0]);
  }anders {
   //Fall 3: Mehrere Stile festlegen for(let i = 0; i < this.length; i++) {
   für(let j in args[0]) {
    setStyle(dies[i], j, args[0][j]);
   }

   }
  }
  }anders {
  //Fall 3 für (let i = 0; i < this.length; i++) {
   setStyle(dies[i], args[0], args[1]);
  }
  }
 } //CSS-Methode css(...args) {
 wenn(args.length === 1) {
  //Fall 1: Stil abrufen, wenn (Typ von Argumenten[0] === 'string') {
  gibt dies zurück.getStyle(dies[0], args[0]);
  }anders {
  //Fall 3: Mehrere Stile festlegen for(let i = 0; i < this.length; i++) {
   für(let j in args[0]) {
    setStyle(dies[i], j, args[0][j]);
   }

  }
  }
 }anders {
  //Fall 3 für (let i = 0; i < this.length; i++) {
  setStyle(dies[i], args[0], args[1]);
  }
 }
 }

Methode cssNumber hinzugefügt, um Attributnamen ohne Hinzufügen von px zu bestimmen

//CSS-Methode verwendet $.cssNumber = {
 animationIterationCount: wahr,
 columnCount: true,
 fillOpacity: wahr,
 flexGrow: wahr,
 flexShrink: wahr,
 Schriftgröße: true,
 Rasterbereich: true,
 Gitterspalte: true,
 gridColumnEnd: true,
 gridColumnStart: true,
 Rasterzeile: wahr,
 gridRowEnd: wahr,
 gridRowStart: wahr,
 Zeilenhöhe: true,
 Deckkraft: wahr,
 Reihenfolge: wahr,
 Waisen: wahr,
 Witwen: wahr,
 zIndex: wahr,
 Zoom: wahr
}

Abschließend biete ich den kompletten Code an. Wenn du ihn gut findest, gib mir bitte einen Daumen hoch.

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <title>Dokument</title>
 <Stil> .box1 {
  Breite: 100px;
  Höhe: 100px;
  Hintergrund: rot;
 }
 .box2 {
  Breite: 100px;
  Höhe: 100px;
  Hintergrund: blau;
  Transform-Ursprung: 0 100 % 0;
  Übergang: 0,3 s;

 }
 .box2:hover {
  transformieren: scaleX(2);
  Breite: 200px;
  Höhe: 100px;
 } </Stil>
</Kopf>

<Text>
 <div Klasse="Box1"></div>

 <div Klasse="box2"></div>
 <button>Klick</button>
</body>

<Skript> Klasse jquery {

 Konstruktor(Argument, Wurzel) {
  wenn(Typ der Wurzel === "undefiniert") {
  this.prevObject = [Dokument];
  }anders {
  dieses.vorherigesObjekt = root;
  }
  //Fall 1, wenn (Typ von arg === 'Zeichenfolge') {
  dies.addEles(document.querySelectorAll(arg));
  }sonst wenn(Typ des Arguments === 'Funktion') {
  //Fall 2 document.addEventListener("DOMContentLoaded", arg);
  }anders {
  //Fall 3 wenn (Typ von arg.length === 'undefined') {
   dies[0] = arg;
   diese.Länge = 1;
  }anders {
   dies.addEles(arg);
  }
  }

 }

 //Methode hinzufügen addEles(eles){
  für (lass i = 0; i < eles.Länge; i++) {
  dies[i] = eles[i];
  }
  diese.Länge = eles.Länge;
 }

 //Kettenoperation//Wichtiger Punkt: Fügen Sie „return“ in „on“ und „click“ hinzu, um die Kettenoperation zu realisieren. //Klickmethode click(fn) {
  für(lass i = 0; i < diese.Länge; i++) {
  this[i].addEventListener("klicken", fn);
  }
  gib dies zurück; 
  // konsole.log(dies); 
 }

 // bei Methode on(eventName, fn) {
  let eventArray = eventName.split(" ");
  //Mehrere Knoten berücksichtigen for(let i = 0; i < this.length; i++) {
  //Mehrere Ereignisse berücksichtigen for(let j = 0; j < eventArray.length; j++) {
   dies[i].addEventListener(eventArray[j], fn);
  }
  }
  gib dies zurück;
 }

 //eq-Methode eq(index) {
  gib ein neues jquery(diesen[index], dies) zurück;
 }

 //Ende der Methode end() {
  gib dieses vorherige Objekt zurück;
 }

 //CSS-Methode css(...args) {
  wenn(args.length === 1) {

  //Fall 1: Stil abrufen, wenn (Typ von Argumenten[0] === 'string') {
   gibt dies zurück.getStyle(dies[0], args[0]);
  }anders {
   //Fall 3: Mehrere Stile festlegen for(let i = 0; i < this.length; i++) {
   für(let j in args[0]) {
    setStyle(dies[i], j, args[0][j]);
   }

   }
  }
  }anders {
  //Fall 3 für (let i = 0; i < this.length; i++) {
   setStyle(dies[i], args[0], args[1]);
  }
  }
 }

 getStyle(Element, Stilname) {
  gibt window.getComputedStyle(ele, null)[styleName] zurück;
 }
 setStyle(Element, Stilname, Stilwert) {
  wenn(Typ von Stilwert === "Zahl" && !(Stilname in $.cssZahl)) {
  Stilwert = Stilwert + "px"; 
  }
  ele.style[Stilname] = Stilwert;
 }

 }

 Funktion $(arg) {
 gib ein neues jQuery(Argument) zurück;
 }

 //CSS-Methode verwendet $.cssNumber = {
 animationIterationCount: wahr,
 columnCount: true,
 Füllopacity: wahr,
 flexGrow: wahr,
 flexShrink: wahr,
 Schriftgröße: true,
 Rasterbereich: true,
 Gitterspalte: true,
 gridColumnEnd: true,
 gridColumnStart: true,
 Rasterzeile: wahr,
 gridRowEnd: wahr,
 gridRowStart: wahr,
 Zeilenhöhe: true,
 Deckkraft: wahr,
 Reihenfolge: wahr,
 Waisen: wahr,
 Witwen: wahr,
 zIndex: wahr,
 Zoom: wahr
}
 // //Implementierung 1: $(".box1")
 // $("div").klick(() => {
 // konsole.log("123")
 // });

 // //Implementierungsfall 2: Parameter ist Funktion // $(function() {
 // console.log('Situation 2');
 // })

 // // Fall 3// $(document.querySelectorAll("div")).click(()=>{
 // konsole.log("123");
 // })
 // $(document.querySelector("div")).click(()=>{
 // konsole.log("456");
 // })

 // // bei Methode // $("div").on("mouseover mousedown",function(){
 // console.log("bei Methode");
 // })

 //Kettenoperation// $("div").click(() => {
 // console.log("Klickmethode")
 // }).on("mouseover", Funktion() {
 // console.log('Methode verketten');
 // })

 // $("div").auf("mouseover", Funktion() {
 // console.log('Methode verketten');
 // }).klick(() => {
 // console.log("Klickmethode")
 // })

 // //eq-Methode // $("div").eq(0).click(() => {
 // console.log("eq-Methode")
 // })

 //endf-Methode// let res = $("div").eq(0).eq(0).eq(0).end();
 // konsole.log(res);

 //CSS-Methode// Fall 1: Stil abrufen (nur das erste Element abrufen)
 // let res = $("div").css("Hintergrund");
 // konsole.log(res);

 // Fall 2 (Stil festlegen)
 // $("div").css("Hintergrund","gelb");

 // // Fall 3 (mehrere Stile festlegen)
 // $("div").css({Hintergrund:"schwarz",Breite:200,Deckkraft:0,3}); </script>
</html>

Zusammenfassen

Damit ist der Artikel über die einfache Methode und Kettenoperation der jQuery-Kapselung in js abgeschlossen. Weitere relevante Inhalte zur jQuery-Kapselung in js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:

Schritte zum Einkapseln von JS in ein Plug-In
Beispiel einer in nativem JS gekapselten Ajax-Methode
Allgemeine Tool-Methodenkapselung in JavaScript
Native js implementiert Beispielmethoden wie Dateiupload, -download und -verpackung
Kapselungsmethode der JavaScript-Zeitlupenanimationsfunktion
Allgemeine Front-End-JavaScript-Methodenkapselung
Allgemeine Methoden und Kapselungsdetails in JavaScript

<<: So umgehen Sie unbekannte Feldnamen in MySQL

>>: So reduzieren Sie die Bildgröße mithilfe des mehrstufigen Docker-Builds

Lösung für Ubuntu, das keine Verbindung zum Internet herstellen kann

js implementiert eine einfache Methode zur Kapselung von jQuery und eine detaillierte Erklärung der Kettenoperationen

Inhaltsverzeichnis

1. Implementieren Sie die Methode $(".box1").click()

2. Implementieren Sie die Methode $("div").click()

3. Betrachten Sie drei Fälle von Parametern in $( )

4. Implementieren Sie die On-Methode in jq

5. Implementieren Sie Kettenoperationen

6. Implementieren Sie die eq-Methode in jq

7. Implementieren Sie die Endmethode in jq

8. Implementieren Sie CSS-Methoden in jq

Zusammenfassen

Lösung für Ubuntu, das keine Verbindung zum Internet herstellen kann

Warum der Speicherplatz nach dem Löschen von Daten in MySQL nicht freigegeben wird

Fassen Sie einige allgemeine Prinzipien des Webdesigns und der Webproduktion zusammen

Javascript-Grundlagen: Detaillierte Erklärung der Operatoren und der Flusskontrolle

Beispiele für die Implementierung von Fortschrittsbalken und Reihenfolge-Fortschrittsbalken mit CSS

Perfekte Lösung für keine rc.local-Datei in Linux

Analyse des Ausschnitts des Hintergrundbildes des Neunerrasters mit adaptiver Breite und Höhe

Vue SPA-Lösung zur Optimierung des ersten Bildschirms

Passen Sie den Stil des Elements <input type="file"> an, das beim Hochladen von Dateien in HTML verwendet wird

Detailliertes Tutorial zur Installation von MySQL 5.7.18 unter Linux (CentOS 7) mit YUM

Artikel empfehlen

Einführung in /etc/my.cnf-Parameter in MySQL 5.7

Schaltflächen und Dropdown-Menüs für Studiennotizen in Bootstrap 3.0

Implementierung einer MySQL-Sicherungsstrategie (vollständige Sicherung + inkrementelle Sicherung)

Allgemeine Symbole in Unicode

Detaillierte Erklärung der Lösung für HTML-Layout mit festen linken und rechten Breiten und adaptiver Mitte

Erweiterte MySQL-Funktionen - detaillierte Erläuterung des Konzepts und des Mechanismus der Datentabellenpartitionierung

Ändern des Standarddatenverzeichnisses von MySQL 8.0 (schneller Vorgang ohne Konfiguration)

JS beherrscht schnell die Verwendung von ES6-Klassen

Eine kurze Diskussion zur Logikextraktion und Feldanzeige von Vue3 in Projekten

Verwenden Sie IISMonitor, um Webseiten zu überwachen und IIS automatisch neu zu starten

Beispielcode zum Festlegen des Beschriftungsstils mithilfe des CSS-Selektors

So installieren Sie OpenSSH aus dem Quellcode in CentOS 7

Erstellung von Webseiten – Grundlegende Deklaration – Dokumenttypbeschreibung (DTD

Versuchen Sie Docker+Nginx, um die Single-Page-Anwendungsmethode bereitzustellen

JS-Objektkonstruktor Object.freeze