jQuery is een JavaScript framework dat zeer snel werkt met een zeer kleine grootte van JavaScript bibliotheek code. Het kan gemakkelijk implementeren veel JavaScript animatie-effecten door operate DOM objecten, verwerking van gebeurtenissen, en het omgaan met Ajax interacties. jQuery kan uw JavaScript-broncode vereenvoudigen om uw ontwikkelingssnelheid en uitvoeringsprestaties van JavaScript-code te verbeteren., In dit artikel, Ik zal u vertellen hoe u jQuery link toe te voegen in zowel html-bestand en javascript-bestand, en hoe u jQuery gebruiken om een aantal fundamentele animaties met voorbeelden te implementeren.
voeg jQuery-Link toe in Html-bestand.
het eerste wat u moet doen is jQuery library js-bestand downloaden en toevoegen aan uw html-bestand.
- Open een webbrowser en ga naar jQuery library js file download page http://jquery.com/download/. Zoek de jQuery library js file download link, klik er met de rechtermuisknop op, in de pop-up menu lijst klik Koppeling opslaan als menu.,
- bovenstaande actie zal het jQuery library js bestand opslaan in een lokale map, U kunt het opslaan in elke map( bijvoorbeeld de project lib map zoals hieronder afbeelding).
- vervolgens moet u een jQuery-link toevoegen in uw html-paginabestand zoals hieronder de broncode. Onderstaande broncode moet worden toegevoegd aan de head sectie van het doel html-bestand.,
<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>
- bovenstaande broncode zal jQuery lib js bevatten die is opgeslagen op uw lokale machine, het is niet een geoptimaliseerde manier omdat de jquery link het jQuery bronbestand van uw webserver zal lezen voor elke aanvraag, Dit zal veel bandbreedte gebruik en computer resource kosten.
- een betere manier om jQuery link toe te voegen in html-bestand is om jQuery CDN online versie op te nemen. Op deze manier kan het proces van toevoegen jQuery sneller en stabiel te maken. Dit kan ook verminderen uw website bandbreedte gebruik. Hieronder broncode zal jQuery link toevoegen van jQuery CDN google.,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- nu had u geleerd hoe u jQuery link in html moest toevoegen. Vervolgens zal ik u laten zien hoe u jQuery link toe te voegen in javascript-bestand.
voeg jQuery-Link toe in JavaScript-bestand.
Als u een jQuery-link toevoegt in html-broncode, moet u onderstaande code toevoegen in elke html-bestandsheadsectie. Het nadeel van deze methode is dat als u een nieuwe jQuery-versie wilt gebruiken, u alle html-bestanden één voor één handmatig moet bijwerken, dit is geen goede methode.,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
om het bovenstaande probleem op te lossen, kunt u jQuery-link toevoegen in een javascript-bestand ( bijvoorbeeld include-jquery.js), en neem dan dat js-bestand in uw html-pagina ‘ s. Dus als u wilt een nieuwe jQuery lib versie te gebruiken, je hoeft alleen maar om de include-jquery bij te werken.js file. Hieronder enkele voorbeelden.
in dit voorbeeld is er een <a> link in de html-pagina, wanneer u op de link klikt, verschijnt er een waarschuwingsvenster en zal de tekst van de link vervagen. Onderstaande video toont het effect.
alle onderstaande voorbeelden gebruiken test.,html-bestand bevat slechts één <a> link.
<a href="">click this link</a>
2.1 gebruik document.Writeln () functie om jQuery Link toe te voegen in JavaScript-bestand.
voeg onderstaande JS-code toe in de include-jquery.js-bestand, en importeer vervolgens de include-jquery.js bestand in test.HTML.
include-jquery.js
gebruik-jquery-wanneer-jquery-is-geladen.js
test.html
2.2 voeg jQuery toe door Scriptelement aan te maken in een ander JavaScript-bestand.
create-js-element-to-include-jquery-js-file.js
gebruik-jquery-wanneer-jquery-is-geladen.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>
u kunt de test zien.html-bestand broncode in chrome om de toegevoegde script elementen te vinden.
jQuery voorbeeld.
dit voorbeeld bevat twee html-bestanden, hellow-world-alert.html en hello-world-add-number.HTML.
3.1 jQuery Hello World Alert voorbeeld.
In het eerste voorbeeld wordt een waarschuwingsvenster weergegeven wanneer de pagina wordt geladen., Er is ook een knop met tekst “Welkom bij JQuery world” in de pagina, wanneer op de knop wordt geklikt, zal het twee waarschuwingsdialoogvenster tonen, de tekst van het eerste waarschuwingsdialoogvenster is ‘u klikt op de knop’, de tekst van het tweede waarschuwingsdialoogvenster is de knop originele tekst, dan zal het knop tekst instellen op ‘Wish you like JQuery :)’ en de tekst en achtergrondkleur van de knop Wijzigen.
Hello-world-alert.html
3.2 jQuery Hello World add Number voorbeeld.
dit voorbeeld gebruikt jQuery om de Html p tag CSS stijl in te stellen., Het bindt ook de mouse move event van de DIV tag, wanneer uw muis beweegt in de DIV tag, het aantal zal toenemen.
hello-world-add-number.html