Programming

Een basisgids voor JQuery voor Javascript-programmeurs

Een basisgids voor JQuery voor Javascript-programmeurs / Programming

JQuery is een van de meest populaire JavaScript-bibliotheken op de planeet (wat is JavaScript? Wat is JavaScript, en kan Internet bestaan ​​zonder het? Wat is JavaScript, en kan Internet bestaan ​​zonder JavaScript? JavaScript is een van die dingen die velen als vanzelfsprekend beschouwen Iedereen gebruikt het Lees meer). Op het moment van zijn start, JavaScript (zal worden 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 veel hacks en workarounds moesten worden geïmplementeerd voor compliance.

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 graad in computerwetenschappen te hebben - hoera! Tien jaar later is jQuery nog steeds koning en als je het nog nooit eerder hebt gebruikt, wat kun je ermee doen??

Naast het oppoetsen van je JavaScript-vaardigheden, wil je misschien wat HTML- en CSS-zelfstudies lezen. Meer informatie HTML en CSS met deze stapsgewijze zelfstudies Leer HTML en CSS met deze stapsgewijze handleidingen Benieuwd naar HTML, CSS en JavaScript? Als je denkt dat je de gave hebt om vanaf nul te leren hoe je websites kunt maken - hier zijn een paar geweldige stap-voor-stap tutorials die het proberen waard zijn. Lees Meer eerst als u niet bekend bent met hen.

We hebben jQuery Making The Web Interactive geïntroduceerd: een inleiding tot jQuery Het web interactief maken: een inleiding tot jQuery jQuery is een client-side scriptingbibliotheek 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 meer voor, dus deze gids voor JQuery zal zich richten op het daadwerkelijk coderen.

Ermee beginnen

U bent wellicht bekend met de JS-methode om id's te selecteren in het documentobjectmodel (DOM):

document.getElementById ( 'foo');

Nou, JQuery gaat nog een stap verder. U hoeft geen verschillende methoden te gebruiken om klassen, id's of meerdere elementen te selecteren. Zo selecteert u 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 echte kracht. Dit selecteert alles td elementen binnen een tafel behalve de eerste.

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

Let op hoe de namen van de selectors bijna exact overeenkomen met hun CSS-tegenhangers. U kunt objecten aan 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 zeer nuttig is bij complexe projecten.

U kunt de ouder van een element selecteren:

$ ( 'Kind') ouder (.);

Of de broers en zussen:

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

U moet uw code uitvoeren zodra de browser gereed is. Hier is hoe je dat doet:

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

Meer kracht

Nu je de basis kent, gaan we door met wat meer complexe dingen. Gegeven een html-tabel:

 
 Maken Model Kleur 
 
 doorwaadbare plaats escorte Zwart 
 
 mini Kuiper Rood 
 
 doorwaadbare plaats Cortina Wit

Stel dat je elke andere rij een andere kleur wilt geven (bekend als Zebra strepen). Nu zou je CSS hiervoor kunnen gebruiken:

#auto's tr: nth-child (even) achtergrondkleur: rood;

Dit is hoe dat kan worden bereikt met jQuery:

$ ( 'Tr: zelfs'). AddClass ( 'zelfs');

Dit zal hetzelfde bereiken, op voorwaarde dat zelfs is een klasse gedefinieerd in CSS. Merk op hoe de volledige stop vóór de klassennaam niet nodig is. Dit zijn doorgaans alleen vereist voor de hoofdselector. Idealiter zou je CSS hiervoor gebruiken om mee te beginnen, hoewel het geen probleem is.

JQuery kan ook rijen verbergen of verwijderen:

$ ( '# Ford Cortina') te verbergen ().; $ ( '# Ford Cortina') te verwijderen ().;

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 middel van callbacks. Callbacks kunnen op vrijwel elke jQuery-functie worden toegepast. Ze specificeren een stukje code dat moet worden uitgevoerd zodra de kernactie is voltooid. Dit biedt enorme functionaliteit. Als ze niet bestonden en u schreef uw code in de verwachting dat deze lineair zou werken, dan zou JS doorgaan met het uitvoeren van de volgende regel code in afwachting van de vorige regel. Callbacks zorgen ervoor dat de code alleen wordt uitgevoerd als de oorspronkelijke taak is voltooid. Hier is een voorbeeld:

$ ('table'). hide (function () alert ('MUO rules!'););

Wees gewaarschuwd - deze code voert een waarschuwing uit voor elk element. Als uw selector meer dan één keer op de pagina staat, ontvangt u meerdere waarschuwingen.

U kunt callbacks gebruiken met andere argumenten:

$ ('tr: even'). addClass ('even', function () console.log ('Hello'););

Let op hoe er een puntkomma achter de beugel zit. Dit zou normaal niet nodig zijn voor een JS-functie, maar deze code wordt nog steeds beschouwd als op één regel te staan ​​(omdat de callback tussen haakjes staat).

animatie

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

$ ( 'Fade1. ') FadeIn (' slow.'); $ ( '# Fade2') fade-out (500).;

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

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

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

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

Loops

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

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

U kunt ook een index gebruiken:

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

Dit zou worden afgedrukt 0, dan 1 enzovoorts.

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 genaamd waarde - dit is de waarde van het array-element.

Het is de moeite waard om dat op te merken elk() kan soms langzamer zijn dan vanilla JS-loops. 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 als u met grote gegevensreeksen werkt, kunt u overwegen om uw code eerst met jsPerf te benchmarken.

AJAX

Asynchrone JavaScript en XML of AJAX is echt heel gemakkelijk met jQuery. AJAX voorziet een groot deel van het internet van stroom, en het is iets dat we in Deel 5 hebben behandeld. JQuery Tutorial (Deel 5): AJAX Them All! jQuery-zelfstudie (deel 5): AJAX allemaal! Aan het einde van onze jQuery mini-tutorial-serie wordt het tijd dat we dieper ingaan op een van de meest gebruikte functies van jQuery. Met AJAX kan een website communiceren met ... Lees meer van onze jQuery-zelfstudie jQuery zelfstudie - Aan de slag: Basics & Selectors jQuery zelfstudie - Aan de slag: Basics & Selectors Vorige week sprak ik over hoe belangrijk jQuery is voor elke moderne webontwikkelaar en waarom het is geweldig. Deze week denk ik dat het tijd wordt dat we onze handen vuil maken met een code en leren hoe ... Lees meer. Het biedt een manier om een ​​webpagina gedeeltelijk te laden - geen reden om de hele pagina opnieuw te laden wanneer u bijvoorbeeld alleen de voetbalscore wilt bijwerken. jQuery heeft verschillende AJAX-methoden, het gemakkelijkste wezen laden():

$ ( '# Baz') belasting ( 'some / url / page.html.');

Hiermee voert u een AJAX-oproep uit naar de opgegeven pagina (sommige / url / pagina.html) en plaatst de gegevens in de selector. Eenvoudig!

Je kunt spelen 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');

Het is heel eenvoudig om formuliergegevens in te dienen:

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

De serialize () functie krijgt alle formuliergegevens en bereidt het voor op verzending.

Promises

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

Een belofte is bijna precies zoals het klinkt. De code belooft om in een later stadium terug te keren wanneer deze compleet is. Uw JavaScript-engine zal doorgaan met het uitvoeren van een andere code. Eens de belofte lost (terug), een ander stuk code kan worden uitgevoerd. Beloften kunnen worden opgevat als callbacks. De jQuery-documentatie legt meer in detail uit.

Hier is een voorbeeld:

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

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

Prestatietips

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

In plaats van de DOM te doorzoeken op elke actie:

$ ('foo'). css ('achtergrondkleur', 'rood'); $ ('foo'). css ('color', 'green'); $ ('foo'). css ('width', '100px');

Bewaar het object in een variabele:

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

Optimaliseer je loops. Gegeven een vanille voor loop:

var cars = ['Mini', 'Ford', 'Jaguar']; voor (int i = 0; i < cars.length; ++i)  // do something

Hoewel niet inherent slecht, kan deze lus sneller worden gemaakt. Voor elke iteratie moet de lus de waarde van de array auto's berekenen (cars.length). Als u dit opslaat in een andere variabele, kunt u prestaties behalen, vooral als u met grote gegevenssets werkt:

voor (int i = 0, j = cars.length; i < j; ++i)  // do something

Nu wordt de lengte van de array van auto's opgeslagen j. Dit hoeft niet langer in elke iteratie te worden berekend. Als je gebruikt elk(), u hoeft dit niet te doen, hoewel een goed 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 kennen om een ​​jQuery-ninja te zijn!

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

Ontdek meer over: JavaScript, jQuery.