Inleiding
HTML, CSS en JavaScript zijn de drie fundamentele talen van het web. We structureren onze websites met HTML, stylen ze met CSS en voegen interactieve functionaliteit toe met JavaScript. In feite, de meeste animaties en elke actie die gebeurt als gevolg van een gebruiker klikken, zweven, of scrollen worden geconstrueerd met JavaScript.
jQuery is de” schrijf minder, doe meer ” javascript bibliotheek. Het is geen programmeertaal, maar eerder een tool die wordt gebruikt om het schrijven van algemene JavaScript-taken beknopter te maken., jQuery heeft het extra voordeel dat cross-browser compatibel, wat betekent dat u kunt er zeker van zijn dat de uitvoer van uw code zal maken zoals bedoeld in elke moderne browser.
door een eenvoudige ” Hello, World!”programma in zowel JavaScript en jQuery, we kunnen het verschil zien van hoe ze beide geschreven.
document.getElementById("demo").innerHTML = "Hello, World!";$("#demo").html("Hello, World!");Dit korte voorbeeld laat zien hoe jQuery op een bondige manier hetzelfde eindresultaat kan bereiken als gewone JavaScript.,
doelen
Deze gids veronderstelt geen voorkennis van jQuery, en zal de volgende onderwerpen behandelen:
- Hoe jQuery in een webproject te installeren.
- de definities van belangrijke webontwikkelingsconcepten zoals API, DOM en CDN.
- Common jQuery selectors, events, and effects.
- voorbeelden om de in het artikel geleerde concepten te testen.
Prerequisites
voordat u met deze gids begint hebt u het volgende nodig:
- een basiskennis van HTML en CSS., Je moet al weten hoe je het opzetten van een eenvoudige website, en hebben een begrip van CSS selectors zoals ID ‘ s, klassen, en pseudo-elementen.
- inzicht in de grondbeginselen van de programmering. Hoewel het mogelijk is om te beginnen met het schrijven van jQuery zonder een geavanceerde kennis van JavaScript, vertrouwdheid met de concepten van variabelen en datatypes evenals wiskunde en logica zal aanzienlijk helpen.
jQuery instellen
jQuery is een JavaScript-bestand waarnaar u in uw HTML linkt. Er zijn twee manieren om jQuery in een project op te nemen:
- Download een lokale kopie.,
- Link naar een bestand via Content Delivery Network (CDN).
opmerking: een Content Delivery Network (CDN) is een systeem van meerdere servers die webcontent leveren aan een gebruiker op basis van geografische locatie. Wanneer u een link naar een gehost jQuery-bestand via CDN, het zal potentieel sneller en efficiënter aan de gebruiker dan wanneer u gehost op uw eigen server.
We zullen de CDN gebruiken om jQuery te refereren in onze voorbeelden. U kunt de nieuwste versie van jQuery vinden in Google ‘ s gehoste bibliotheken., Als u in plaats daarvan wilt downloaden, kunt u een kopie van jQuery te krijgen van de officiële website.
We zullen deze oefening beginnen met het maken van een klein webproject. Het zal bestaan uit style.css in de css/ map, scripts.js in de js/ map, en een hoofd index.html in de root van het project.
project/├── css/| └── style.css├── js/| └── scripts.js└── index.htmlom te beginnen, Maak een HTML-skelet en sla het op als index.html.
<!doctype html><html lang="en"><head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"></head><body></body></html>Link naar de jquery CDN vlak voor het sluiten </body> tag, gevolgd door uw eigen aangepaste JavaScript-bestand, scripts.js.
uw JavaScript-bestand (scripts.js) moet worden opgenomen onder de jQuery-bibliotheek in het document anders zal het niet werken.
Opmerking: Als u een lokale kopie van jQuery hebt gedownload, sla deze dan op in uwjs/ map en link ernaar op js/jquery.min.js.,
Op dit punt wordt de jQuery bibliotheek nu geladen in uw site, en u hebt volledige toegang tot de jquery API.
Opmerking: Een Application Programming Interface (API) is een interface waarmee softwareprogramma ‘ s met elkaar kunnen communiceren. In dit geval bevat de API voor jQuery alle informatie en documentatie die nodig is om toegang te krijgen tot jQuery.
met behulp van jQuery
in de kern wordt jQuery gebruikt om verbinding te maken met HTML-elementen in de browser via het DOM.,
Het Document Object Model (DOM) is de methode waarmee JavaScript (en jQuery) interageren met de HTML in een browser. Om precies te zien wat de DOM is, klikt u in uw webbrowser met de rechtermuisknop op de huidige webpagina en selecteert u inspecteren. Dit opent ontwikkelaarstools. De HTML code die je hier ziet is de DOM.
elk HTML-element wordt beschouwd als een knooppunt in het DOM – een object dat JavaScript kan aanraken. Deze objecten zijn gerangschikt in een boomstructuur, waarbij <html> dichter bij de root ligt, en elk genest element een tak verder langs de boom is., JavaScript kan deze elementen toevoegen, verwijderen en wijzigen.
Als u opnieuw met de rechtermuisknop op de site klikt en op Bekijk pagina bron, ziet u de ruwe HTML-uitvoer van de website. In het begin is het gemakkelijk om de DOM te verwarren met de HTML – bron, maar ze zijn anders-de pagina-bron is precies wat er in het HTML-bestand is geschreven. Het is statisch en zal niet veranderen, en zal niet worden beïnvloed door JavaScript. De DOM is dynamisch en kan veranderen.
de buitenste laag van het DOM, de laag die het gehele <html> knooppunt omhult, is het documentobject., Om te beginnen met het manipuleren van de pagina met jQuery, we moeten ervoor zorgen dat het document is “klaar” eerste.
Maak het bestand scripts.js aan in uw js/ map en typ de volgende code:
$(document).ready(function() { // all custom jQuery will go here});alle jQuery code die u schrijft zal worden verpakt in de bovenstaande code. jQuery zal deze staat van paraatheid detecteren, zodat de code die in deze functie wordt opgenomen, alleen zal worden uitgevoerd als de DOM klaar is voor JavaScript-code uit te voeren., Zelfs als in sommige gevallen JavaScript niet zal worden geladen totdat elementen zijn gerenderd, met inbegrip van dit blok wordt beschouwd als best practice.
in de inleiding van dit artikel, zag je een eenvoudige ” Hello, World!” script. Om dit script te starten en tekst af te drukken naar de browser met jQuery, zullen we eerst een leeg blok-niveau paragraaf element maken met de ID demo toegepast op het.
...<body><p></p>...jQuery wordt aangeroepen met en weergegeven door het dollarteken ($)., We benaderen de DOM met jQuery met behulp van meestal CSS syntaxis, en een actie toe te passen met een methode. Een basis jQuery voorbeeld volgt dit formaat.
$("selector").method();aangezien een ID wordt weergegeven door een hash-symbool (#) In CSS, zullen we toegang krijgen tot de demo-ID met de selector #demo. html() is een methode die de HTML binnen een element verandert.
We gaan nu onze aangepaste “Hello, World!”programma in de jQuery ready() wrapper., Voeg deze regel toe aan uw scripts.js bestand binnen de bestaande functie:
$(document).ready(function() { $("#demo").html("Hello, World!");});zodra u het bestand hebt opgeslagen, kunt u uw index.html bestand openen in uw browser. Als alles goed werkte, zult u de uitvoer Hello, World!zien.
Selectors
Selectors zijn hoe we jQuery vertellen aan welke elementen we willen werken. De meeste jQuery selectors zijn hetzelfde als wat je bekend bent met in CSS, met een paar jQuery-specifieke toevoegingen., U kunt de volledige lijst van jQuery selectors op hun officiële documentatie pagina ‘ s.
gebruik het jQuery-symbool $, gevolgd door haakjes ().
$("selector")dubbele aanhalingstekens hebben de voorkeur van de jquery style guide, hoewel enkele aanhalingstekens vaak ook worden gebruikt.
hieronder vindt u een kort overzicht van enkele van de meest gebruikte selectors.,
over het algemeen zijn klassen en ID ’s wat je het meest tegenkomt — klassen wanneer je meerdere elementen wilt selecteren, en ID’ s wanneer je er maar één wilt selecteren.
jQuery Events
In de ” Hallo, wereld!”bijvoorbeeld, de code liep zodra de pagina geladen en het document klaar was, en dus vereist geen interactie met de gebruiker. In dit geval hadden we de tekst direct in de HTML kunnen schrijven zonder zich druk te maken over jQuery. Echter, we zullen moeten jQuery gebruiken als we willen tekst verschijnen op de pagina met de klik van een knop.,
keer terug naar uw index.html bestand en voeg een <button> element toe. We zullen deze knop gebruiken om te luisteren naar ons click event.
...<body><button>Click me</button><p></p>We zullen de click() methode gebruiken om een functie aan te roepen die onze “Hallo, wereld!” code.
$(document).ready(function() { $("#trigger").click();});function() { $("#demo").html("Hello, World!");}Hier is de definitieve code.
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); });});sla het scripts.js bestand op en vernieuw index.html in de browser., Als je nu op de knop klikt, de ” Hallo, wereld!”tekst zal verschijnen.
een gebeurtenis is elk moment dat de gebruiker interacteert met de browser. Meestal wordt dit gedaan met de muis of het toetsenbord. Het voorbeeld dat we zojuist hebben gemaakt, heeft een Click event gebruikt. Vanuit de officiële jQuery documentatie, kunt u een volledige lijst van jQuery event methoden te bekijken. Hieronder vindt u een kort overzicht van enkele van de meest gebruikte gebeurtenismethoden.
om afbeeldingen te animeren of te vervagen terwijl een gebruiker over het scherm schuift, gebruikt u de methode scroll()., Om een menu te verlaten met behulp van de ESC Sleutel, Gebruik de keydown() methode. Om een dropdown accordeon menu te maken, gebruik je declick() methode.
gebeurtenissen begrijpen is essentieel voor het maken van dynamische website-inhoud met jQuery.
jQuery-Effecten
jQuery-effecten werken hand in hand met gebeurtenissen door u toe te staan animaties toe te voegen en op een andere manier elementen op de pagina te manipuleren.
we maken een voorbeeld waar we een popup overlay openen en sluiten., Hoewel we twee ID ‘ s kunnen gebruiken – een om de overlay te openen en een andere om het te sluiten – gebruiken we in plaats daarvan een klasse om de overlay te openen en te sluiten met dezelfde functie.
verwijder de huidige<button>en<p> tags vanuit de body van uwindex.html bestand, en voeg het volgende toe aan uw HTML-document:
...<body><button class="trigger">Open</button><section class="overlay"> <button class="trigger">Close</button></section>...in ons style.css bestand, zullen we een minimale hoeveelheid CSS gebruiken om de overlay met display: none te verbergen en te centreren op het scherm.,
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray;}terug in het scripts.js bestand, gaan we de toggle() methode gebruiken, die de CSS display eigenschap tussen none en block, de overlay verbergen en tonen wanneer erop wordt geklikt.
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); });});Refresh index.html. U zult nu in staat zijn om de zichtbaarheid van het modaal te schakelen door te klikken op de knoppen., U kunt toggle() veranderen in fadeToggle() of slideToggle() om een paar andere ingebouwde jQuery-effecten te zien.
hieronder vindt u een kort overzicht van enkele van de meest gebruikte effectmethoden.
-
toggle()– Toggle: schakelt de zichtbaarheid van een of meer elementen in.show()enhide()zijn de gerelateerde eenrichtingseffecten. -
fadeToggle()– Fade-Toggle: schakelt de zichtbaarheid en animeert de opaciteit van een of meer elementen.,fadeIn()enfadeOut()zijn de gerelateerde eenrichtingseffecten. -
slideToggle()– schuifschakelaar schakelt de zichtbaarheid van een of meer elementen met een schuifeffect in of uit.slideDown()enslideUp()zijn de gerelateerde eenrichtingseffecten. -
animate()– Animate voert Aangepaste animatie-effecten uit op de CSS-eigenschap van een element.,
we gebruiken jQuery-gebeurtenissen om te luisteren naar een gebruikersinteractie, zoals een klik op een knop, en we gebruiken jQuery-effecten om elementen verder te manipuleren zodra die actie plaatsvindt.
conclusie
In deze gids hebben we geleerd hoe elementen met jQuery te selecteren en te manipuleren, en hoe gebeurtenissen en effecten samenwerken om een interactieve webervaring voor de gebruiker te maken.
vanaf hier moet u een dieper inzicht hebben in de mogelijkheden van jQuery, en op weg zijn om uw eigen code te schrijven.