Esiste un modo semplice per convertire il codice jQuery in JavaScript?
Sebbene ci siano molte somiglianze tra jQuery e JavaScript, esistono anche diverse differenze nella loro sintassi e funzionalità. Per questo, in primo luogo, capire cosa sta cercando di fare il codice jQuery. Quindi, utilizza i metodi alternativi o gli attributi di Vanilla Javascript.
Questo blog discuterà della conversione del codice jQuery in JavaScript.
Come convertire il codice jQuery in JavaScript?
Per convertire il codice jQuery in JavaScript, è essenziale capire cosa sta facendo il codice e quali metodi jQuery vengono utilizzati. Quindi, usa i metodi alternativi in JavaScript, come il "$ ()"Utilizzato in jQuery per selezionare elementi mentre in JavaScript, per selezionare elementi"documento.QuerySelector ()" O "QuerySelectorAll ()"Vengono utilizzati metodi.
Comprendiamo il processo di conversione con l'aiuto di un esempio.
Esempio
Qui, abbiamo un codice jQuery che modifica il colore del testo e mostra un testo esplicativo su un pulsante Click. Per questo, il documento HTML contiene due pulsanti, testo e un vuoto
Tag dove verrà visualizzato il nuovo testo sul pulsante Click:
Tutorial JavaScript
Mentre si lavora con JQuery, è obbligatorio aggiungere la libreria jQuery nel tag del documento HTML:
Nel tag, viene utilizzato il codice dato:
$ (documento).ready (function ()$ ('#mydiv').Trova ('Button: First').Click (function ()
$ (".testo').CSS ('Color', 'Blue');
$ ('#message').testo ("Sono il primo pulsante che imposterà il colore del testo su blu");
);
$ ('##Button').Prossimo().Click (function ()
$ (".testo').CSS ('Color', 'Green');
$ ('#message').testo ("Sono il secondo pulsante che imposterà il colore del testo su verde");
);
);
Nel codice sopra
- Innanzitutto, usa il “pronto()"Funzione che eseguirà quando il DOM è completamente caricato. Viene spesso usato per assicurarsi che il DOM sia completamente caricato prima dell'esecuzione di qualsiasi codice JavaScript che interagisce o manipola gli elementi DOM.
- Quindi, accedi all'elemento Div utilizzando l'ID assegnato "$ ('#mydiv')"E chiama il"Trovare()"Metodo per trovare il primo pulsante, allegare un clic su di esso utilizzando"clic()"Metodo in cui il colore del testo verrà modificato e un messaggio di testo verrà visualizzato sotto il pulsante sul pulsante Clicca.
- Quindi, per trovare l'altro pulsante nel Div, abbiamo usato il jQuery "Prossimo()"Metodo e applicato la stessa funzionalità.
Come puoi vedere che l'output mostra un messaggio di testo sul clic del pulsante che spiegherà il lavoro e allo stesso tempo, il colore del testo esistente viene modificato:
Ora, qui, convertiremo il codice jQuery sopra in JavaScript senza modificare l'output. Puoi usare approcci diversi per la conversione, ma useremo i metodi JavaScript come alternativa ai metodi jQuery.
Innanzitutto, accederemo al pulsante usando il "documento.QuerySelector ()" metodo:
Var Button = Document.QuerySelector ('Button');Quindi, attacca un “clicEvento "con l'aiuto del"addEventListener ()" metodo. Per cambiare il colore del testo, in JavaScript, usa il “stile"Attributo mentre in jQuery usiamo il"CSS ()" metodo. Allo stesso modo, per il testo, usa il "Innerhtml"Proprietà in JavaScript mentre il"testo()"Il metodo è utilizzato nel jQuery:
pulsante.addEventListener ('click', function ()documento.QuerySelector ('.testo').stile.color = "blu";
documento.QuerySelector ('#Message').InnerHtml = 'Sono il primo pulsante che imposterà il colore del testo su blu';
);
Per il secondo pulsante, useremo il "NextElementsibling"Attributo in JavaScript, mentre in jQuery abbiamo usato il"Prossimo()" metodo:
pulsante.NextElementsibling.addEventListener ('click', function ()documento.QuerySelector ('.testo').stile.color = "verde";
documento.QuerySelector ('#Message').textContent = 'Sono il secondo pulsante che imposta il colore del testo su verde';
);
Produzione
Metodi o attributi alternativi jQuery in JavaScript
Nella tabella data, puoi vedere i metodi e gli attributi alternativi della jQuery:
| jQuery | JavaScript | |
|---|---|---|
| Eseguire una funzione quando il DOM è pronto | $ (documento).ready (function () // codice… ); | documento.addEventListenerm ("DomContentload", function () // codice… ); |
| Per selezionare l'intero HTML | $ ("HTML") | documento.QuerySelector (selettore) |
| Per selezionare l'intero corpo HTML | $ ("Corpo") | documento.corpo |
| Aggiungi una classe a un elemento HTML | $ elemento.AddClass (Class-Name) | elemento.classlist.Aggiungi (nome classe) |
| Rimuovere una classe su un elemento HTML | $ elemento.REMOVECLASS (Classe-Name) | elemento.classlist.Rimuovi (nome classe) |
| Attiva una classe su un elemento HTML | $ elemento.ToggleClass (classe di classe) | elemento.classlist.attiva (nome-classe) |
| Controlla se un elemento HTML contiene una classe | $ elemento.Hasclass (classe di classe) | elemento.classlist.ha (nome classe) |
| Fai clic sull'evento | $ (".pulsante").Click (function (event) ); | documento.QuerySelector (".pulsante") .addEventListener ("Click", (event) => ); |
| Aggiungi lo stile CSS | $ div.CSS (Color: “Yellow”) | div.stile.color = "giallo" |
| Selezione di tutti gli elementi | $ ('.. .') | documento.QuerySelectorAll (); |
| Seleziona il primo elemento | .Primo(); | documento.QuerySelector (); |
| Trova elementi | .Trovare(); | documento.QuerySelector (); O documento.QuerySelectorAll (); metodo |
| Selezione dell'elemento figlio | .bambini(); | Parentele.bambini; |
| Selezione dell'elemento genitore | .genitore(); | Nodo.parentele; |
| Seleziona i fratelli | .fratelli(); | Nodo.parentele.QuerySelectorAll (": not (#elem)"); |
| Seleziona il fratello successivo | .Prossimo(); | Non documentaltypechildnode. NextElementsibling; |
| Seleziona il fratello precedente | .prev (); | Non documentaltypechildnode. precedenti elementi; |
| Trova l'elemento corrispondente più vicino | .più vicina(); | Elemento.più vicina(); |
| Ottieni attributo | .attr ('attr-name'); | Elemento.getAttribute ('attr-name'); |
| Aggiungi un nuovo elemento figlio | .append ('html-string'); | Nodo.appendChild (); |
| Rimuovi tutti i nodi per bambini | .vuoto(); | Elemento.replicchildren (); |
| Ottieni o imposta il contenuto HTML | .html (); | Elemento.Innerhtml; |
| Nascondere l'elemento | .nascondere(); | Elementcssinlinestyle.stile.Display = 'Nessuno'; |
| Elemento mostra | .spettacolo(); | Elementcssinlinestyle.stile.display = "; |
| Aggiungi ascoltatore di eventi | .SU(); | Eventtarget.addEventListener ('Event', FunctionName); |
| Rimuovi l'ascoltatore di eventi | .spento(); | Eventtarget.RimuoviEventListener ('evento', funzione function); |
| Loop tramite un oggetto, un array o una raccolta | .ogni(); | Nodelist.prototipo.per ciascuno(); |
Si tratta di convertire il codice jQuery in JavaScript.
Conclusione
Non esiste un modo semplice per la conversione del codice jQuery in JavaScript. Puoi semplicemente conoscere le differenze tra i due e utilizzare i metodi integrati JavaScript vaniglia che sono uguali ai metodi jQuery. Questo blog ha discusso della conversione del codice jQuery in JavaScript.