jQuery jest frameworkiem JavaScript, który działa bardzo szybko z bardzo małym rozmiarem kodu biblioteki JavaScript. Może łatwo zaimplementować wiele efektów animacji JavaScript poprzez obsługę obiektów DOM, przetwarzanie zdarzeń i obsługę interakcji Ajax. jQuery może uprościć kod źródłowy JavaScript, aby poprawić szybkość rozwoju i wydajność wykonywania kodu JavaScript., W tym artykule powiem Ci, jak dodać link jQuery zarówno w pliku html, jak i w pliku javascript, oraz jak użyć jQuery do implementacji podstawowych animacji z przykładami.
Dołącz Link jQuery do pliku Html.
pierwszą rzeczą, którą musisz zrobić, to pobrać plik jQuery library js i dołączyć go do pliku html.
- Otwórz przeglądarkę internetową i przejdź do strony pobierania plików jQuery library js http://jquery.com/download/. Znajdź link do pobrania pliku jQuery library js, kliknij go prawym przyciskiem myszy, na liście menu podręcznego kliknij Zapisz Link jako menu.,
- Powyższa akcja zapisze plik jQuery library js w folderze lokalnym, możesz go zapisać w dowolnym folderze(na przykład folder lib projektu, jak na poniższym obrazku).
- następnie musisz dołączyć link jQuery do pliku strony html, jak poniżej kod źródłowy. Poniżej należy dodać kod źródłowy w sekcji head docelowego pliku html.,
<script type="text/javascript" src="https://www.dev2qa.com/how-to-append-jquery-link-in-html-correctly-with-examples/./lib/jquery-3.3.1.min.js"></script>
- powyższy kod źródłowy będzie zawierał jQuery lib js, który jest zapisywany na komputerze lokalnym, nie jest to zoptymalizowany sposób, ponieważ łącze jQuery odczyta plik źródłowy jQuery z serwera www dla każdego żądania, będzie to kosztować dużo wykorzystania przepustowości i zasobów komputera.
- lepszym sposobem na dodanie łącza jQuery w pliku html jest dołączenie wersji jQuery CDN online. W ten sposób może sprawić, że proces dołączania jQuery będzie szybszy i stabilniejszy. Może to również zmniejszyć wykorzystanie przepustowości witryny. Poniżej kod źródłowy dołącza link jQuery z jQuery CDN google.,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- teraz nauczyłeś się dodawać link jQuery w html. Następnie pokażę Ci, jak dodać link jQuery w pliku javascript.
dołączenie linku jQuery do pliku JavaScript.
Jeśli dodajesz link jQuery w kodzie źródłowym html, musisz dodać poniższy kod w każdej sekcji nagłówka pliku html. Wadą tej metody jest to, że jeśli chcesz użyć nowej wersji jQuery musisz zaktualizować wszystkie pliki html jeden po drugim ręcznie, nie jest to dobra metoda.,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
aby rozwiązać powyższy problem, możesz dołączyć łącze jQuery do pliku javascript ( na przykład include-jquery.js), a następnie dołącz ten plik js do swoich stron html. Tak więc, jeśli chcesz użyć nowej wersji jQuery lib, wystarczy zaktualizować include-jquery.plik js. Poniżej kilka przykładów.
w tym przykładzie znajduje się<a> link na stronie html, po kliknięciu łącza pojawi się okno dialogowe alertu, a tekst łącza zniknie. Poniżej wideo pokazuje efekt.
wszystkie poniższe przykłady wykorzystują test.,plik html, zawiera tylko jeden<a> link.
<a href="">click this link</a>
2.1 użyj dokumentu.funkcja Writeln () dodająca łącze jQuery do pliku JavaScript.
Dodaj poniżej kod js w include-jquery.plik js, a następnie zaimportuj include-jquery.plik js W teście.html.
include-jquery.js
użyj-jquery-gdy-jQuery-jest-załadowany.js
test.html
2.2 dołączenie jQuery poprzez utworzenie elementu Script w innym pliku JavaScript.
Utwórz-js-element-to-include-jQuery-JS-file.js
użyj-jquery-gdy-jQuery-jest-załadowany.js
test.,html
<script src="https://www.dev2qa.com/how-to-append-jquery-link-in-html-correctly-with-examples/./create-js-element-to-include-jquery-js-file.js"></script><a href="">click this link</a>
możesz zobaczyć test.kod źródłowy pliku html w chrome, aby znaleźć dołączone elementy skryptu.
przykład jQuery.
Ten przykład zawiera dwa pliki html, hellow-world-alert.html i hello-world-add-number.html.
3.1 jQuery Hello World Alert przykład.
w pierwszym przykładzie wyświetli się okno dialogowe alertu po załadowaniu strony., Istnieje również przycisk z tekstem „Welcome to jQuery world” na stronie, gdy przycisk zostanie kliknięty, wyświetli dwa okna dialogowe alertu, tekst pierwszego okna dialogowego alertu to „klikasz przycisk”, tekst drugiego okna dialogowego alertu to tekst oryginalny przycisku, a następnie ustawi tekst przycisku na „Wish you like JQuery:)” i zmieni kolor tekstu i tła przycisku.
hello-world-alert.html
3.2 jQuery Hello World Add Number Example.
Ten przykład używa jQuery do ustawiania stylu css znacznika Html P., Wiąże również zdarzenie ruchu myszy znacznika div, gdy mysz porusza się w znaczniku div, liczba wzrośnie.
hello-world-add-number.html