Czy istnieje łatwy sposób na konwersję kodu jQuery na JavaScript?
Chociaż istnieje wiele podobieństw między jQuery i JavaScript, istnieje również kilka różnic w ich składni i funkcjonalności. W tym momencie zrozum, co próbuje zrobić kod JQuery. Następnie użyj alternatywnych metod lub atrybutów waniliowego JavaScript.
Ten blog omówi konwersję kodu jQuery na JavaScript.
Jak przekonwertować kod jQuery na JavaScript?
W celu konwersji kodu jQuery na JavaScript, konieczne jest zrozumienie, co robi kod i jakie metody jQuery są używane. Następnie użyj alternatywnych metod w JavaScript, takich jak „$ ()”Używany w jQuery do wybierania elementów w JavaScript, do wyboru elementów”dokument.QuerySelelect ()" Lub "QuerySelelection ()„Zastosowane są metody.
Zrozum proces konwersji za pomocą przykładu.
Przykład
Tutaj mamy kod jQuery, który zmienia kolor tekstu i pokazuje tekst objaśniający na przycisku. W tym celu dokument HTML zawiera dwa przyciski, tekst i pusty
Tag, gdzie nowy tekst zostanie wyświetlony na przycisku Kliknij:
Samouczek JavaScript
Podczas pracy z JQuery obowiązkowe jest dodanie biblioteki jQuery do znacznika dokumentu HTML:
W znaczniku używany jest podany kod:
$ (dokument).gotowy (funkcja ()$ ('#myDiv').Znajdź („Button: First”).kliknij (funkcja ()
$ ('.tekst').CSS („Color”, „Blue”);
$ („#wiadomość”).Tekst („Jestem pierwszym przyciskiem, który ustawi kolor tekstu na niebieski”);
);
$ („#przycisk”).Następny().kliknij (funkcja ()
$ ('.tekst').CSS („kolor”, „zielony”);
$ („#wiadomość”).Tekst („Jestem drugim przyciskiem, który ustawi kolor tekstu na zielony”);
);
);
W powyższym kodzie
- Najpierw użyj „gotowy()„Funkcja, która będzie wykonywana, gdy DOM będzie w pełni załadowany. Jest często używany do upewnienia się, że DOM jest w pełni załadowany przed wykonaniem dowolnego kodu JavaScript, który oddziałuje lub manipuluje elementami DOM.
- Następnie uzyskaj dostęp do elementu DIV za pomocą jego przypisanego identyfikatora „$ ('#myDiv')”I zadzwoń do„znajdować()„Metoda znalezienia pierwszego przycisku, załącz na nim zdarzenie kliknięcia za pomocą„Kliknij()”Metoda, w której kolor tekstu zostanie zmieniony, a wiadomość tekstowa zostanie wyświetlona poniżej przycisku na przycisku Kliknij.
- Następnie, aby znaleźć drugi przycisk w Div, użyliśmy JQuery „Następny()”Metoda i zastosowała tę samą funkcjonalność.
Jak widać, wyjście pokazuje wiadomość tekstową na przycisku, która wyjaśni pracę, a jednocześnie kolor istniejącego tekstu jest zmieniany:
Teraz przekonwertujemy powyższy kod jQuery na JavaScript bez zmiany wyjścia. Możesz zastosować różne podejścia do konwersji, ale użyjemy metod JavaScript jako alternatywy dla metod jQuery.
Najpierw uzyskamy dostęp do przycisku za pomocą „dokument.QuerySelelect ()" metoda:
var Button = Dokument.querySelelect („przycisk”);Następnie dołącz „Kliknij„Wydarzenie z pomocą„addEventListener ()" metoda. Do zmiany koloru tekstu w JavaScript użyj „styl”Atrybut podczas jQuery używamy„CSS ()" metoda. Podobnie w przypadku tekstu użyj „InnerHtml„Własność w JavaScript, podczas gdy„tekst()„Metoda jest wykorzystywana w jQuery:
przycisk.addEventListener („kliknij”, funkcja ()dokument.querySelector ('.tekst').styl.color = „niebieski”;
dokument.QuerySelelect („#Message”).innerHtml = 'Jestem pierwszym przyciskiem, który ustaw kolor tekstu na niebieski';
);
Do drugiego przycisku użyjemy „NextElementsIbling”Atrybut w JavaScript, podczas gdy w jQuery użyliśmy„Następny()" metoda:
przycisk.NextElementsIbling.addEventListener („kliknij”, funkcja ()dokument.querySelector ('.tekst').styl.color = „zielony”;
dokument.QuerySelelect („#Message”).TextContent = 'Jestem drugim przyciskiem, który ustawił kolor tekstu na zielony';
);
Wyjście
JQuery alternatywne metody lub atrybuty w JavaScript
W danej tabeli możesz zobaczyć alternatywne metody i atrybuty jQuery:
| JQuery | JavaScript | |
|---|---|---|
| Wykonaj funkcję, gdy DOM jest gotowy | $ (dokument).gotowy (funkcja () // kod… ); | dokument.addEventListeNerm („DomContentloaded”, function () // kod… ); |
| Do wyboru całego HTML | $ („Html”) | dokument.querySelelector (selektor) |
| Do wyboru całego korpusu HTML | $ („Ciało”) | dokument.ciało |
| Dodaj klasę do elementu HTML | $ element.addClass (nazwa klasowa) | element.Lista klas.Dodaj (nazwa klasy) |
| Usuń klasę do elementu HTML | $ element.resuseClass (nazwa klasowa) | element.Lista klas.Usuń (nazwa klasowa) |
| Przełącz klasę na element HTML | $ element.ToggleClass (nazwa klasy) | element.Lista klas.przełącznik (nazwa klasowa) |
| Sprawdź, czy element HTML zawiera klasę | $ element.HASCLASS (nazwa klasowa) | element.Lista klas.ma (nazwa klasy) |
| Kliknij zdarzenie | $ (”.przycisk").kliknij (funkcja (zdarzenie) ); | dokument.querySelelector („.przycisk") .addEventListener („kliknij”, (zdarzenie) => ); |
| Dodaj styl CSS | $ div.CSS (Color: „żółty”) | div.styl.kolor = „żółty” |
| Wybieranie wszystkich elementów | $ ('… .') | dokument.QuerySelelectall (); |
| Wybierz pierwszy element | .Pierwszy(); | dokument.querySelelect (); |
| Znajdź elementy | .znajdować(); | dokument.querySelelect (); Lub dokument.QuerySelelectall (); metoda |
| Wybór elementu dziecka | .dzieci(); | ParentNode.dzieci; |
| Wybór elementu nadrzędnego | .rodzic(); | Węzeł.ParentNode; |
| Wybierz rodzeństwo | .rodzeństwo(); | Węzeł.ParentNode.querySelelectionAll („: not (#Elem)”); |
| Wybierz następne rodzeństwo | .Następny(); | NondoCumentTypechildNode. NextElementsIbling; |
| Wybierz poprzednie rodzeństwo | .prev (); | NondoCumentTypechildNode. Poprzednie odmianie; |
| Znajdź najbliższy element pasujący | .najbliższy(); | Element.najbliższy(); |
| Uzyskaj atrybut | .attr („attr-nazwa”); | Element.getAttribute („attr-nazwa”); |
| Dołącz nowy element dziecka | .append („html-string”); | Węzeł.appendChild (); |
| Usuń wszystkie węzły dziecięce | .pusty(); | Element.zamiennik (); |
| Pobierz lub ustaw zawartość HTML | .html (); | Element.InnerHtml; |
| Ukryj element | .ukrywać(); | Elementcssinlinestyle.styl.display = „Brak”; |
| Pokaż element | .pokazywać(); | Elementcssinlinestyle.styl.display = ”; |
| Dodaj słuchacz zdarzeń | .NA(); | EventTarget.addEventListener („zdarzenie”, funkcja); |
| Usuń słuchacz zdarzeń | .wyłączony(); | EventTarget.rencessEventListener („zdarzenie”, nazwa funkcji); |
| Pętla za pośrednictwem obiektu, tablicy lub kolekcji | .każdy(); | Nodelista.prototyp.dla każdego(); |
Chodzi o przekształcenie kodu jQuery na JavaScript.
Wniosek
Nie ma łatwego sposobu na konwersję kodu jQuery na JavaScript. Możesz po prostu znać różnice między obiema i użyć wbudowanych metod waniliowych JavaScript, które są równe metodom jQuery. Ten blog omówił konwersję kodu jQuery na JavaScript.