Een basisgids voor JQuery voor Javascript-programmeurs

Advertentie

JQuery is een van de meest populaire JavaScript-bibliotheken ter wereld (wat is JavaScript Wat is JavaScript en kan internet zonder het bestaan?JavaScript is een van die dingen die velen als vanzelfsprekend beschouwen. Iedereen gebruikt het. Lees verder ). Op het moment van oprichting is JavaScript (wordt aangeduid als JS vanaf hier in) was op een heel andere plaats. 14 januari 2006 was de dag waarop jQuery werd aangekondigd op BarCampNYC. JS ontbrak nog steeds enigszins - browsers ondersteunden alle delen ervan, maar er moesten veel hacks en tijdelijke oplossingen worden geïmplementeerd om te voldoen.

JQuery kwam langs en veranderde alles. JQuery maakte het heel gemakkelijk om browser-compatibele code te schrijven. Je zou webpagina's kunnen animeren zonder een diploma computerwetenschappen te hebben - hoera! Tien jaar later is jQuery nog steeds koning, en als je het nog nooit eerder hebt gebruikt, wat kun je er dan mee doen?

Naast het opfrissen van je JavaScript-vaardigheden, wil je misschien wat lezen

HTML- en CSS-tutorials Leer HTML en CSS met deze stapsgewijze zelfstudiesBenieuwd naar HTML, CSS en JavaScript? Als je denkt dat je een talent hebt om te leren hoe je helemaal opnieuw websites kunt maken, volgen hier een paar geweldige stapsgewijze zelfstudies die het proberen waard zijn. Lees verder als je ze ook niet kent.

We hebben jQuery geïntroduceerd Het web interactief maken: een inleiding tot jQueryjQuery is een client-side scripting-bibliotheek die bijna elke moderne website gebruikt - het maakt websites interactief. Het is niet de enige Javascript-bibliotheek, maar het is de meest ontwikkelde, meest ondersteunde en meest gebruikte ... Lees verder eerder, dus deze gids voor JQuery zal zich concentreren op het daadwerkelijk coderen.

Ermee beginnen

U bent misschien bekend met de JS-manier om ID's te selecteren in het Document Object Model (DOM):

document.getElementById ('foo');

Nou, JQuery gaat nog een stap verder. U hoeft geen verschillende methoden aan te roepen om klassen, ID's of meerdere elementen te selecteren. U selecteert als volgt een id:

$ ('# bar');

Makkelijk toch? Het is precies dezelfde syntaxis om bijna elk DOM-element te selecteren. Zo selecteer je klassen:

$ ('. baz');

Je kunt ook creatief worden voor wat echte kracht. Dit selecteert alles td elementen binnen een tafel behalve de eerste.

$ ('table td'). niet (': first');

Merk op hoe de namen van de selector bijna exact overeenkomen met hun CSS-tegenhangers. U kunt objecten toewijzen regelmatig JS-variabelen:

var xyzzy = $ ('# parent .child');

Of u kunt jQuery-variabelen gebruiken:

var $ xyzzy = $ ('# parent .child');

Het dollarteken wordt alleen gebruikt om aan te geven dat deze variabele een jQuery-object is, iets dat erg handig is bij complexe projecten.

U kunt de ouder van een element selecteren:

$ ('kind'). parent ();

Of de broers en zussen:

$ ('kind'). broers en zussen ();

U moet uw code uitvoeren zodra de browser gereed is. Zo doe je dat:

$ (document) .ready (function () {console.log ('ready!'); });

Meer kracht

Nu u de basis kent, gaan we verder met wat meer complexe zaken. Gegeven een html-tabel:

Maken
Model
Kleur


Ford
Escort
Zwart


Mini
Kuiper
Rood


Ford
Cortina
Wit

Stel dat u om de andere rij een andere kleur wilt maken (bekend als Zebra strepen). Nu zou u hiervoor CSS kunnen gebruiken:

#cars tr: nth-child (even) {achtergrondkleur: rood; }

Dit is hoe dat kan worden bereikt met jQuery:

$ ('tr: even'). addClass ('even');

Dit zal hetzelfde bereiken, mits dat zelfs is een klasse gedefinieerd in CSS. Merk op dat de punt voor de klassenaam niet nodig is. Dit zijn meestal alleen vereist voor de hoofdkiezer. Idealiter zou je hiervoor om te beginnen CSS gebruiken, hoewel het geen probleem is.

JQuery kan ook rijen verbergen of verwijderen:

$ ('# fordCortina'). hide (); $ ('# fordCortina'). remove ();

U hoeft een element niet te verbergen voordat u het verwijdert.

Functies

JQuery-functies zijn net als JS. Ze gebruiken accolades en kunnen argumenten accepteren. Waar het echt interessant wordt, is door terugbellen. Callbacks kunnen worden toegepast op bijna elke jQuery-functie. Ze specificeren een stuk code dat moet worden uitgevoerd zodra de kernactie is voltooid. Dit biedt enorme functionaliteit. Als ze niet bestonden en u uw code schreef in de verwachting dat deze lineair zou werken, zou JS de volgende coderegel blijven uitvoeren terwijl hij wacht op de vorige. Callbacks zorgen ervoor dat de code pas wordt uitgevoerd als de oorspronkelijke taak is voltooid. Hier is een voorbeeld:

$ ('table'). hide (function () {alert ('MUO-regels!'); });

Wees gewaarschuwd - deze code voert een waarschuwing uit voor elk element. Als uw selector meer dan eens op de pagina staat, krijgt u meerdere meldingen.

Je kunt callbacks gebruiken met andere argumenten:

$ ('tr: even'). addClass ('even', function () {console.log ('Hallo'); });

Merk op hoe er een puntkomma is na de sluitingsbeugels. Dit is normaal gesproken niet nodig voor een JS-functie, maar deze code wordt nog steeds als één regel beschouwd (aangezien de callback tussen haakjes staat).

Animatie

JQuery maakt het heel eenvoudig om webpagina's te animeren. U kunt elementen in- of uitschakelen:

$ ('. fade1'). fadeIn ('langzaam'); $ ('# fade2'). fadeOut (500);

U kunt drie snelheden specificeren (langzaam, gemiddeld, snel) of een getal dat de snelheid in milliseconden vertegenwoordigt (1000 ms = 1 seconde). Je kunt animeren bijna elk CSS-element. Dit animeert de breedte van de selector vanaf de huidige breedte tot 250px.

$ ('foo'). animeren ({width: '250px'});

Het is niet mogelijk om kleuren te animeren. Je kunt callbacks ook gebruiken met animatie:

$ ('bar'). animeren ({height: '250px'}, function () {$ ('bar'). animeren ({width: '50px'} });

Lussen

Loops schitteren echt in jQuery. Elk() wordt gebruikt om elk element van een bepaald type te herhalen:

$ ('li'). each (function () {console.log ($ (this)); });

Je kunt ook een index gebruiken:

$ ('li'). each (function (i) {console.log (i + '-' + $ (this)); });

Dit zou worden afgedrukt 0, dan 1 enzovoort.

Je kan ook gebruiken elk() om arrays te herhalen, net als in JS:

var cars = ['Ford', 'Jaguar', 'Lotus']; $ .each (auto's, functie (i, waarde) {console.log (waarde); });

Let op het extra argument dat wordt aangeroepen waarde - dit is de waarde van het array-element.

Dat is het vermelden waard elk() kan soms langzamer zijn dan vanille JS-lussen. Dit komt door de extra verwerkingsoverhead die jQuery uitvoert. Voor het grootste deel van de tijd is dit geen probleem. Als u zich zorgen maakt over prestaties of met grote datasets werkt, overweeg dan om uw code te benchmarken jsPerf eerste.

AJAX

Asynchrone JavaScript en XML of AJAX is echt heel gemakkelijk met jQuery. AJAX beheert een groot deel van het internet en daar hebben we het over gehad deel 5 jQuery-zelfstudie (deel 5): AJAX ze allemaal!Nu we het einde van onze jQuery mini-tutorialserie naderen, wordt het hoog tijd dat we dieper ingaan op een van de meest gebruikte functies van jQuery. Met AJAX kan een website communiceren met ... Lees verder van onze jQuery-zelfstudie jQuery-zelfstudie - Aan de slag: basisprincipes en selectorsVorige week sprak ik over hoe belangrijk jQuery is voor elke moderne webontwikkelaar en waarom het geweldig is. Deze week denk ik dat het tijd is dat we onze handen vuil maken met wat code en leren hoe ... Lees verder . Het biedt een manier om een ​​webpagina gedeeltelijk te laden - geen reden om de hele pagina opnieuw te laden als u bijvoorbeeld alleen de voetbalscore wilt bijwerken. jQuery heeft verschillende AJAX-methoden, de gemakkelijkste is laden():

$ ('# baz'). load ('some / url / page.html');

Dit voert een AJAX-oproep uit naar de opgegeven pagina (wat / url / page.html) en schuift de gegevens in de selector. Gemakkelijk!

Je kunt optreden HTTP GET verzoeken:

$ .get ('some / url', function (result) {console.log (result); });

U kunt ook gegevens verzenden met POST:

$ .post ('some / other / url', {'make': 'Ford', 'model': 'Cortina'});

Formuliergegevens verzenden is heel eenvoudig:

$ .post ('url', $ ('form'). serialize (), function (result) {console.log (result); }

De serialiseren () functie haalt alle formuliergegevens op en bereidt deze voor op verzending.

Beloften

Beloften worden gebruikt voor uitgestelde uitvoering. Ze kunnen moeilijk te leren zijn, maar jQuery maakt het iets minder lastig. ECMAScript 6 introduceert native beloften aan JS, maar browserondersteuning is op zijn best schilferig. Voorlopig zijn jQuery-beloften veel beter in ondersteuning voor meerdere browsers.

Een belofte is bijna precies zoals het klinkt. De code belooft dat hij in een later stadium zal terugkeren als hij klaar is. Uw JavaScript-engine gaat verder met het uitvoeren van een andere code. Eens de belofte lost op (retourneert), een ander stuk code kan worden uitgevoerd. Beloften kunnen worden gezien als callbacks. De jQuery-documentatie legt meer in detail uit.

Hier is een voorbeeld:

// dfd == uitgesteld. var dfd = $ .Deferred (); function doThing () {$ .get ('some / slow / url', function () {dfd.resolve (); }); retourneer dfd.promise (); } $ .when (doThing ()). then (function () {console.log ('YAY, het is klaar'); });

Merk op hoe de belofte is gedaan (dfd.promise ()), en het wordt alleen opgelost wanneer het AJAX-gesprek is voltooid. U kunt een variabele gebruiken om meerdere AJAX-oproepen bij te houden en pas een andere taak voltooien als ze allemaal zijn uitgevoerd.

Prestatietips

De sleutel om de prestaties uit uw browser te persen, is het beperken van de toegang tot de DOM. Veel van deze tips kunnen ook van toepassing zijn op JS en misschien wilt u uw code profileren om te zien of deze onaanvaardbaar traag is. In het huidige tijdperk van krachtige JavaScript-engines blijven kleine knelpunten in de code vaak onopgemerkt. Desondanks is het nog steeds de moeite waard om te proberen de snelst presterende code te schrijven die je kunt.

In plaats van voor elke actie de DOM te doorzoeken:

$ ('foo'). css ('achtergrondkleur', 'rood'); $ ('foo'). css ('kleur', 'groen'); $ ('foo'). css ('width', '100px');

Sla het object op in een variabele:

$ bar = $ ('foo'); $ bar.css ('achtergrondkleur', 'rood'); $ bar.css ('kleur', 'groen'); $ bar.css ('width', '100px');

Optimaliseer uw lussen. Gegeven een vanille voor lus:

var cars = ['Mini', 'Ford', 'Jaguar']; voor (int i = 0; i 

Hoewel dit niet inherent slecht is, kan het sneller worden gemaakt. Voor elke iteratie moet de lus de waarde van de auto-array berekenen (auto's. lengte). Als je dit in een andere variabele opslaat, kan er prestatie worden behaald, zeker als je met grote datasets werkt:

voor (int i = 0, j = cars.length; ik 

Nu wordt de lengte van de auto-array opgeslagen in j. Dit hoeft niet meer in elke iteratie te worden berekend. Als je gebruikt elk(), u hoeft dit niet te doen, hoewel correct geoptimaliseerde vanille-JS beter kan presteren dan jQuery. Waar jQuery echt uitblinkt, is de snelheid van ontwikkelen en debuggen. Als je niet aan big data werkt, is jQuery meestal meer dan snel.

Je zou nu genoeg basiskennis moeten hebben om een ​​jQuery-ninja te zijn!

Gebruik je jQuery regelmatig? Ben je om welke reden dan ook gestopt met het gebruik ervan? Laat ons je mening weten in de reacties hieronder!