Share
Avid-lezers van Envato Tuts + komen uit een breed scala van achtergronden op het gebied van ervaring, cultuur en wat ze willen leren. Als het gaat om technologie, is het gemakkelijk om als vanzelfsprekend te beschouwen degenen die net beginnen, vooral als je een bepaald soort ontwikkeling hebt gedaan voor een langere tijd.
Dat gezegd hebbende, een van de leuke dingen om een ontwikkelaar te worden, is dat wanneer je eenmaal een bepaalde taal en een reeks vaardigheden onder de knie hebt, het gemakkelijk is deze te vertalen naar andere ontwikkelingsgebieden..
In een poging ervoor te zorgen dat we een zo breed mogelijk publiek bereiken, streven we ernaar inhoud te publiceren die direct is gericht op beginners die nieuwsgierig zijn naar een bepaalde taal, platform of toepassing.
En in dit artikel gaan we ons uitsluitend richten op jQuery. In het bijzonder gaan we op een hoog niveau kijken naar alles wat jQuery biedt en hoe dit ons kan helpen, en we gaan een aantal van de projecten bekijken die ook uit de oorspronkelijke bibliotheek zijn ontstaan..
Leer JavaScript: de complete gids
We hebben een complete handleiding samengesteld om u te helpen JavaScript te leren, of u net bent begonnen als een webontwikkelaar of dat u meer geavanceerde onderwerpen wilt verkennen.
JQuery werd voor het eerst uitgebracht in 2006 door John Resig en wilde een cross-platform JavaScript-bibliotheek zijn die het gemakkelijker maakte om client-side oplossingen te schrijven.
Op het moment dat dit werd vrijgegeven, was het vooral nuttig vanwege de inconsistenties die bestonden tussen JavaScript-implementaties in Internet Explorer, Firefox en uiteindelijk Google Chrome (die pas in 2008 werden uitgebracht).
Zoals gedefinieerd door Wikipedia:
jQuery is een JavaScript-bibliotheek met meerdere platformen die is ontworpen om scripts op de client-side van HTML te vereenvoudigen. jQuery is de meest populaire JavaScript-bibliotheek die vandaag wordt gebruikt, met installatie op 65% van de 10 miljoen best bezochte sites op het web. jQuery is gratis, open-source software met een licentie onder de MIT-licentie.
Verder zegt de jQuery-website zelf:
jQuery is een snelle, kleine en feature-rijke JavaScript-bibliotheek. Het maakt dingen als het doorlopen en manipuleren van HTML-documenten, het afhandelen van gebeurtenissen, animaties en Ajax veel eenvoudiger met een eenvoudig te gebruiken API die in een groot aantal verschillende browsers werkt. Met een combinatie van veelzijdigheid en uitbreidbaarheid heeft jQuery de manier veranderd waarop miljoenen mensen JavaScript schrijven.
Maar wat betekent dit voor ons als ontwikkelaars? Misschien is de beste manier voor ons om te begrijpen wat de bibliotheek allemaal biedt, om te onderzoeken wat het beweert te bieden.
Wanneer een browser een webpagina genereert, is dit een visuele weergave van wat bekend staat als de DOM (of het document-objectmodel). Dit model kan conceptueel worden gemodelleerd als een boomdatastructuur waarbij er bepaalde knooppunten zijn met wortels en bladeren.
Zie bijvoorbeeld deze afbeelding zoals geleverd door het Web Step Book:
Wanneer u met jQuery werkt, kunt u gemakkelijk de inhoud van de DOM doorlopen om de knooppunten, elementen of waarden te bereiken of te vinden die u wilt ophalen.
Dit betekent dat als u op zoek bent naar de tekst van a div element met een unieke ID, het is gemakkelijk om te doen.
Accentsconagua
/ ** * Deze code zoekt naar een div met de ID van "mijn unieke element" * en verwijdert deze vervolgens uit het zicht. * / $ ('div # my-unique-element') .hide ();Als u probeert alle door te lussen span elementen, dat kan ook:
/ ** * Dit is de basismanier om een lus in jQuery in te stellen. Het zal * alle span-elementen op de pagina opnemen en vervolgens * toestaan dat u ze doorloopt. * / $ ('span') .each (function () // Verwerk het spanelement hier);We zullen deze specifieke functionaliteit een beetje meer bekijken in de volgende sectie, omdat het enkele extra werk toont dat u kunt doen om de pagina te manipuleren.
Toegegeven, deze voorbeelden zijn eenvoudig en zo kan gecompliceerder worden, vooral omdat we methodieketen introduceren. Bijvoorbeeld:
$ excerpt.on ('keydown', function (evt) if ((17 === evt.keyCode || 91 === evt.keyCode) || 86 === evt.keyCode) if (-1 = == $ .inArray (evt.keyCode, keymap)) keymap.push (evt.keyCode);). on ('keyup', function () if (user_has_pasted_content (keymap)) resize_textarea (this) ; keymap = [];);Op dit moment is het niet de bedoeling dat u weet wat er met de code aan de hand is, maar het is bedoeld om u te laten zien hoe nuttig jQuery in bepaalde situaties kan zijn door het gebruik van helperfuncties en methodeketting.
Het volstaat om te zeggen dat de kracht van jQuery ligt in het vermogen om de DOM (vandaar de naam jQuery) te ondervragen en vervolgens aanpassingen aan te brengen door het gebruik van een goed gedocumenteerde API (die vol staat met voorbeelden van hoe elke functie te gebruiken).
Je zou kunnen stellen dat al het andere alleen uit die functie voortkomt. Laten we daarom, met dat gezegd, blijven kijken naar een deel van hoe dat eruit ziet.
Als het gaat om het daadwerkelijk manipuleren van de DOM, heeft jQuery dat wel veel van functies waarmee we kunnen veranderen wat onze bezoekers zien.
Sommige van deze functies zijn eenvoudig, zoals ons toestaan laten zien of verbergen elementen die niet zichtbaar zijn wanneer een pagina wordt geladen. Met andere functies kunnen we nieuwe elementen maken en toevoegen ze naar een bestaand element, of prepend ze voor een volledige lijst.
Als u probeert alle door te lussen span elementen om een class -kenmerk toe te voegen, kunt u dat ook doen:
/ ** * Dit is de basismanier om een lus in jQuery in te stellen. Het * zal alle span-elementen op de pagina in beslag nemen en daarna * een aangepast class-attribuut toevoegen. * / $ ('span') .each (function () $ (this) .addClass ('my-custom-class'););Dit is nauwelijks het oppervlak aan het krassen van welke DOM-manipulatie-functionaliteit beschikbaar is binnen jQuery. Door naar de API te kijken, kunt u onder het gedeelte Manipulatie zien hoeveel opties voor ons beschikbaar zijn (samen met goede voorbeelden).
Om nog meer voorbeelden te geven, kunnen we ook:
Onthoud dat een van de dingen die jQuery een aantrekkelijke oplossing maken voor zoveel ontwikkelaars is dat alle functies en voorbeelden die we in dit artikel bekijken compatibel zijn met meerdere browsers.
Als JavaScript voor u van pas komt, dan is een ding dat van essentieel belang is om te begrijpen hoe het werkt met de pagina die in de webbrowser wordt weergegeven, dat deze reageert op verschillende gebeurtenissen.
Dat wil zeggen, wanneer een gebruiker op een element klikt, een toetsaanslag maakt of op de muis klikt, verhoogt de browser een signaal dat overeenkomt met de gebeurtenis die zich heeft voorgedaan. Dit is wat ons in staat stelt om voordeel te halen uit de interactie van de gebruiker met de browser.
Met name elke keer dat een gebruiker dat doet iets naar de pagina kunnen we reageren met een aangepaste gebeurtenis. Het probleem is dat niet elke browser gebeurtenissen op dezelfde manier implementeert (daarom is er behoefte aan een specificatie, maar dat is inhoud voor een andere post).
Gelukkig maakt jQuery dit veel gemakkelijker door een consistente naam te definiëren voor alle gebeurtenissen, zodat we dezelfde naam kunnen gebruiken voor een evenement waarop we proberen te reageren en het zal werken in alle belangrijke browsers.
Toen jQuery voor het eerst uitkwam, was Flash nog steeds relatief populair en algemene animaties op internet waren niet helemaal dood.
Wanneer we het echter hebben over animatie in de context van jQuery, hebben we het niet over hetzelfde type effecten of gedragingen als we gewend zijn te zien met oudere technologie. In plaats daarvan hebben we het over effecten die gebruikers feedback geven iets is gebeurd op het scherm. Bovendien is het minder invasief en kan het een goed gevoel voor stijl toevoegen aan een pagina of toepassing wanneer het correct wordt gebruikt (alles kan echter worden misbruikt).
U kunt de volledige effect-API op deze pagina bekijken, maar het is de moeite waard om op te merken dat de effecten van jQuery overal kunnen variëren van het omgaan met eenvoudige fading in en het wegvallen van elementen of glijdende elementen in het zicht tot iets complexer, zoals het manipuleren van de wachtrij van effecten die zijn geregistreerd tegen een element afvuren.
Toegegeven, het laatste geval gaat ervan uit dat je een beetje ervaring hebt met de effecten-API, maar het is iets dat vanzelfsprekend is gezien genoeg tijd met de bibliotheek en de documentatie..
Als u niet bekend bent met Ajax, is het in wezen een manier waarop een webpagina de server kan bellen, het antwoord kan afhandelen en een deel van een pagina kan bijwerken zonder de hele pagina te hoeven vernieuwen. Hoewel de technologie al een hele tijd bestaat, is het nog steeds iets dat echt cool is en een aantal echt leuke functies kan bieden in de context van een pagina of webtoepassing wanneer het op de juiste manier en effectief wordt gebruikt..
Hoewel de ondersteuning voor Ajax niet zo slecht is als vijf of tien jaar geleden, kan de implementatie voor de API in verschillende browsers enigszins variëren. Dit betekent dat we de taak hebben om de Ajax-code specifiek te schrijven voor een browser die Microsoft biedt, die Google biedt, die Apple biedt, die Chrome biedt, enzovoort.
Tenminste, dat is het geval zonder jQuery. Dankzij de ondersteuning voor Ajax kunnen we Ajax op verschillende manieren gebruiken zonder in de tegenstrijdigheden tussen de browsers te komen. In feite is het eenvoudig te hanteren KRIJGEN en POST verzoeken terwijl het ook de mogelijkheid heeft om veel meer geavanceerde oproepen te maken met behulp van de $ .ajax methode.
Als je eenmaal gewend bent aan het beschikbaar hebben van de API in de kern van je applicatie of tot je beschikking hebt, is het moeilijk je voor te stellen dat je er niet mee werkt (of met iets dergelijks).
Een mogelijkheid die veel van de server-side frameworks en bibliotheken bieden, is de mogelijkheid om uitbreidingen van de kerncode te maken. Moderne client-side bibliotheken en frameworks laten dit toe, en jQuery is niet anders.
Stel dat u bijvoorbeeld in een bepaalde niche werkt waarin u merkt dat u voor elk project dezelfde functionaliteit creëert. Of wat als u een product heeft dat u verkoopt en u een beetje aangepaste code hebt die moet worden geïntegreerd met jQuery, maar afhankelijk van het project kunnen er andere parameters nodig zijn.
Wat doe je dan?
Gelukkig ondersteunt jQuery plug-ins. Dit betekent dat wij, als ontwikkelaars, niet alleen de mogelijkheid hebben om plug-ins te gebruiken die anderen hebben geschreven (sommige zijn beschikbaar op de jQuery-website, andere zijn beschikbaar op GitHub), maar we zijn ook in staat om onze eigen plug-ins te ontwikkelen.
We kunnen deze code dan hergebruiken in onze eigen projecten, of ze beschikbaar maken op sites zoals GitHub voor anderen om bijdragen, fixes, functies enzovoort aan te bieden.
Sinds zijn ontstaan is jQuery uitgegroeid tot meer dan alleen een JavaScript-bibliotheek die ons de mogelijkheid biedt om zowel eenvoudige als krachtige operaties uit te voeren op een platformonafhankelijke manier.
Naast de kernbibliotheek heeft jQuery ook geresulteerd in twee andere opmerkelijke projecten die het vermelden waard zijn voordat we dit artikel inpakken. Hoewel we niet gaan kijken naar de details van wat elk project oplevert, zullen we een hoog niveau van elk project bekijken, alleen al omdat we ons bewust zijn van wat voor ons beschikbaar is als dit nodig is voor toekomstig werk.
Vanuit de startpagina van jQuery UI:
jQuery UI is een samengestelde set interacties van gebruikersinterfaces, effecten, widgets en thema's die bovenop de jQuery JavaScript-bibliotheek zijn gebouwd. Of u nu zeer interactieve webtoepassingen bouwt of gewoon een datumkiezer aan een formulierbesturing moet toevoegen, jQuery UI is de perfecte keuze.
Deze bibliotheek werd voor het eerst gepubliceerd in 2007, ongeveer een jaar na jQuery zelf. Het werkt als een aanvullende bibliotheek voor jQuery omdat het de platformonafhankelijke compatibiliteit van de bibliotheek gebruikt om widgets te maken die overal op een website kunnen worden gebruikt.
Veel van de widgets bevatten veelgebruikte stukjes functionaliteit. Bijvoorbeeld:
Er zijn ook geavanceerde functies zoals effecten, hulpprogramma's en interacties. Alles wat we tot nu toe hebben behandeld (evenals de dingen die we niet hebben) omvat een breed scala aan callbacks, attributen en functies waarmee we in de ruimste zin met hen kunnen communiceren.
Alle bovengenoemde functies bieden ook verschillende thema's om ervoor te zorgen dat ze passen bij het uiterlijk van uw website. Ten slotte zijn alle functies die hier worden beschreven en op de site worden vermeld goed gedocumenteerd.
Van de startpagina van jQuery Mobile:
jQuery Mobile is een HTML5-gebaseerd gebruikersinterfacesysteem ontworpen om responsieve websites en apps te maken die toegankelijk zijn op alle smartphones, tablets en desktops..
Deze bibliotheek is de meest recente introductie in de familie van bibliotheken die in 2010 wordt uitgebracht (met de laatste stabiele release in 2014).
Net zoals zijn UI-tegenhanger, biedt het een goed gedocumenteerde API en aangepaste thema's die ideaal zijn voor de verschillende apparaten die je project kan targeten.
Waar de vorige twee bibliotheken een reeks platformonafhankelijke functies bieden waarmee we jQuery en bijbehorende widgets op relatief eenvoudige wijze kunnen schrijven, bevat jQuery Mobile een CSS-raamwerk waarmee we ook gebruikersinterfaces kunnen ontwerpen die ideaal zijn voor de aard van onze respectieve project.
Het kader omvat:
Van daaruit biedt de bibliotheek wat u zou verwachten van een project gericht op het vereenvoudigen van webontwikkeling voor verschillende mobiele apparaten. Deze omvatten dingen als:
Ten slotte is het aantal browsers dat nog steeds beschikbaar en gebruikt wordt in het wild hoog. Hoewel we het gebruik van oudere versies van Internet Explorer en een bredere toepassing van Chrome hebben zien afnemen, hebben bepaalde gebruikers nog steeds om verschillende redenen een probleem met oudere browsers.
Soms bevinden deze gebruikers zich in oudere browsers vanwege de aard van hun bedrijfsintranet. Soms heeft het te maken met de mobiele apparaten en / of telefoons die ze voor hun werk hebben gekregen. En soms heeft het simpelweg te maken met het onvermogen om te upgraden naar iets beters.
Maar het maakt niet uit. jQuery Mobile biedt ondersteuning voor de meeste browsers en besturingssystemen die momenteel beschikbaar zijn. Als u niet zeker weet of het platform dat u target, wordt ondersteund door de bibliotheek, kunt u altijd de ondersteuningspagina van de browser bekijken.
Begrijpen wat jQuery is (en wat het niet is) en hoe het gerelateerd is aan JavaScript is belangrijk, zodat u weet wat er voor u wordt gedaan en wat u kunt doen wanneer u met de bibliotheek moet werken..
Zoals eerder vermeld, kunnen sommigen beweren dat je eerst JavaScript moet leren en vervolgens jQuery leren; anderen kunnen beweren dat het leren van jQuery een geweldige manier is om terug te werken naar JavaScript.
Hoe het ook zij, jQuery is een aloude bibliotheek in de JavaScript-economie en wordt gebruikt in een aantal zeer populaire projecten (zoals WordPress), dus als je het leert, heb je op verschillende manieren een voorsprong.
JavaScript is een van de de-facto talen geworden van het werken op het web. Het is niet zonder zijn leercurven, en er zijn ook genoeg kaders en bibliotheken om je bezig te houden. Als u op zoek bent naar extra bronnen om te studeren of te gebruiken in uw werk, kijk dan wat we beschikbaar hebben op de Envato-marktplaats.
Als dat niet genoeg is, is er ook voldoende documentatie en open-sourcecode beschikbaar die u kunt bekijken en lezen. Er zijn ook algemeen beschikbare plug-ins en een actieve blog om u op de hoogte te houden van al het nieuws dat met de ontwikkeling van de bibliotheek gebeurt.
Voor diegenen die geïnteresseerd zijn in JavaScript (met name in de context van WordPress), kun je me volgen op mijn blog en / of Twitter op @tommcfarlin. Je kunt ook al mijn cursussen en tutorials op mijn profielpagina verzamelen.
Aarzel niet om vragen of opmerkingen achter te laten in de feed hieronder, en ik zal ernaar streven om op elk van hen te reageren.
