15 Hulpbronnen om u op weg te helpen met jQuery from Scratch

Misschien ben je een ervaren jQuery-professional. Misschien ben jij John Resig. Aan de andere kant, misschien lees je woorden als "Prototype", "jQuery" en "Mootools" en denk je bij jezelf: "Wat zijn deze in hemelsnaam?" Nu is het tijd om te leren.

In deze branche - nu meer dan ooit - worden ontwerpers codeerders en worden programmeurs ontwerpers. Het idee van een ontwikkelaar die ALLEEN frontend- of back-endwerk uitvoert, is in korte tijd een verouderd concept aan het worden. jQuery zal helpen om de kloof te overbruggen. Javascript is geen onhaalbare vaardigheid. In dit artikel zullen we vijftien bronnen beschrijven om u vanaf het absolute begin op weg te helpen met jQuery. Als je deze bibliotheek hebt ontweken uit een of ander dwaas gevoel van angst, is dit het moment om erin te duiken. Je zult versteld staan ​​hoe eenvoudig het kan zijn.

Wat precies is jQuery?

Volgens jQuery.com is jQuery een snelle, beknopte, JavaScript-bibliotheek die vereenvoudigt hoe je HTML-documenten doorloopt, afspraken verwerkt, animaties uitvoert en Ajax-interacties toevoegt aan je webpagina's. jQuery is ontworpen om de manier waarop je JavaScript schrijft te veranderen.

In eenvoudigere bewoordingen stelt jQuery u in staat om tien regels traditionele Javascript-code in twee te zetten! Combineer een enorm aantal functies met platformonafhankelijke compatibiliteit en u beschikt over één robuust framework. Voordat je het weet, maak je alles, van rijke formulieren tot Flash-achtige menu's. Maak je geen zorgen als de taak om nog een nieuw nieuw raamwerk te leren ontmoedigend lijkt. Deze bronnen zullen u stap voor stap brengen.

Waarom zou ik deze bibliotheek gebruiken boven de anderen?

Uiteindelijk komt het neer op voorkeur. Elk raamwerk heeft zijn eigen specifieke voordelen. Maar er is een reden waarom jQuery het meest populaire kader is dat beschikbaar is.

Compatibiliteit tussen browsers. Bij elke Javascript-implementatie kan een webontwikkelaar verwachten een groot deel van zijn of haar tijd te besteden aan het compenseren van de eigenaardigheden van elke browser. Gelukkig neutraliseert de jQuery-bibliotheek deze browserinconsistenties, waardoor ontwikkelaars meer tijd hebben om aan hun code te werken.

CSS-kiezers. Door gebruik te maken van de CSS-syntaxis kunnen ontwikkelaars hun bestaande kennis gebruiken om hun documenten te doorkruisen. Met de toevoeging van veel CSS 3 en XPATH selectors, biedt jQuery je een prachtig mechanisme om de elementen op je pagina te manipuleren..

chaining. jQuery gebruikt een patroon genaamd "chaining" voor zijn methoden. Telkens wanneer u een methode uitvoert op een jQuery-object, retourneert de methode hetzelfde hele jQuery-object. Bijgevolg hoeft u voor elke methode uw selectors niet opnieuw te typen. Het gebruik van een dergelijke ".NET" -type functionaliteit zorgt voor lagere bestandsgroottes en een grotere leesbaarheid van de code.

Als je geïntrigeerd bent, zou je dat moeten zijn! Laten we beginnen.

Stap 1: Download de bibliotheek

De eerste stap op uw reis zal zijn om de bibliotheek te downloaden. Ga naar jQuery.com en scrol omlaag naar het gedeelte "Download jQuery". Als u een van de vermelde links kiest, wordt de bibliotheek naar uw computer gedownload. Vervolgens moet u het .js-bestand in uw oplossing importeren.

Aanbevolen literatuur
  • CSS-Tricks.com: Inleiding tot jQuery

    In zijn jQuery-screencast geeft Chris Coyier, bij CSS-Tricks, u een basisinleiding om jQuery op uw webpagina op te nemen en enkele functies te schrijven.

    Bezoek artikel

  • Digital-Web.com: jQuery: een spoedcursus

    Hier is een spoedcursus in jQuery geschreven met voor code geschikte webontwerpers in gedachten.

    Bezoek artikel

  • Slideshare.net: "JQuery leren in 30 minuten"

    Als je van diavoorstellingen houdt, leert deze tutorial je de basisprincipes van jQuery in dertig minuten.

    Bezoek artikel

Stap 2: Maak uw eerste functie

Binnen vijf minuten na het leren van jQuery, creëer je functies. Je eerste stop zou het inleidende artikel van John Resig moeten zijn, "Hoe jQuery werkt". Hij zal je veel gemakkelijk te begrijpen methoden laten zien die je in je webapplicaties kunt gebruiken - inclusief het toevoegen en verwijderen van classes, chaining en het aanroepen van de "document.ready" methode.

Aanbevolen literatuur

  • jQuery.com: "Hoe jQuery werkt"

    In zijn inleidend artikel neemt John Resig - de maker van jQuery - je mee van de basis tot het maken van animaties. Dit is essentieel om te lezen als je net begint.

    Bezoek artikel

  • FifteenDaysOfJquery.com: Dag 1

    In een moedige poging om in twee weken veel van de functies van jQuery te dekken, gaat "15 Days Of jQuery" over één onderwerp per dag. In dit specifieke artikel leert u hoe u de methode "document.ready ()" gebruikt.

    Bezoek artikel

  • VisualJquery.com: "Uw jQuery-woordenboek"

    Zie VisualjQuery.com als uw digitale woordenboek. Het toont u de syntaxis en definitie voor elke beschikbare jQuery-methode. Houd deze site als bladwijzer.

    Bezoek artikel

Stap 3: animeer uw elementen

Dit is een controversieel onderwerp voor veel ontwikkelaars. In groep nummer één zijn er mensen die aandringen op "zero animation". Geef gebruikers zo snel mogelijk wat ze nodig hebben en laat ze onderweg zijn. Behandel ze niet alsof ze zijn chipmunks op zoek naar het volgende glanzende speelgoed. Maar er zijn ook mensen in groep nummer twee. Ze kijken naar een site met een aantal smaakvol geïmplementeerde animaties, als een site die hun gebruikersbestand waardig is. Als ze correct worden gebruikt, zijn ze van mening dat animatie de bruikbaarheid enorm kan verbeteren. Je zult zelf moeten beslissen welke je bent. Never-the-less, jQuery maakt animerende elementen op je pagina een zo eenvoudige taak als het maar kan zijn.

Aanbevolen literatuur

  • jQuery.com: "Animaties"

    Dit zou je eerste stop moeten zijn bij het leren over de animatievaardigheden van jQuery. Het zal de parameters beschrijven die nodig zijn bij het gebruik van deze methode.

    Bezoek artikel

  • Onthechte ontwerpen: leren over de mogelijkheden van jQuery

    Ben je een absolute beginner als het op animatie aankomt? Deze tutorial gaat ervan uit dat je geen kennis hebt. Onderwerpen die aan bod komen zijn het vergroten en verkleinen van tekst, bewegende elementen, animaties koppelen en meer.

    Bezoek artikel

  • Web Designer Wall: jQuery Tutorials voor ontwerpers

    Nog steeds verward over de kracht van jQuery? Deze site bevat tien voorbeelden, variërend van menu's tot beeldvervangingen.

    Bezoek artikel

Stap 4: Plug-ins

Het mooie aan jQuery is dat John Resig en zijn team bij de eerste ontwikkeling ervoor zorgden dat uitbreiding van de functionaliteit door het gebruik van plug-ins mogelijk was met slechts een paar extra regels code. Je zult binnen de kortste keren aangepaste methoden schrijven! Door deze plug-ins gescheiden te houden van de hoofdbibliotheek (overigens slechts 16 kb), kunnen we alleen specifieke plug-ins implementeren wanneer dat nodig is. Dit zorgt ervoor dat de grootte van uw JavaScript-bestanden zo klein mogelijk blijft.

Aanbevolen literatuur

  • jQuery Corner Gallery

    Bent u op zoek naar een manier om eenvoudig afgeronde hoeken aan uw elementen toe te voegen? Met hoeken variërend van afgerond tot ezelsoren, kan deze plug-in een permanente plek vinden in uw "gereedschapskist".

    Bezoek artikel

  • Verbeter de gebruikerservaring: 10 bruikbare jQuery-plugins

    In dit artikel beschrijft James Padolsey zijn top tien favoriete plug-ins.

    Bezoek artikel

  • jQuery.com: "Plug-ins"

    Zoals altijd blijkt jQuery.com een ​​waardevolle hulpbron te zijn. Dit artikel zal je stap voor stap instructies geven als het gaat om het maken van je eerste plug-in.

    Bezoek artikel

Stap 5: Implementatie van AJAX-functionaliteit

Heb je al het vertrouwen in je jQuery-vaardigheden? Ben je klaar om de dingen naar het volgende niveau te brengen? Waarom zou u niet beginnen met de implementatie van Ajax-functionaliteit in uw scripts? Door het gebruik van de methoden "load ()" en ".get ()" maakt jQuery het uiterst eenvoudig om gegevens te laden. De volgende bronnen zijn essentieel voor je opleiding.

Aanbevolen literatuur

  • Sitepoint.com: Easy AJAX met jQuery

    In zijn artikel voor Sitepoint laat Akash Mehta zien hoe je het proces van Ajax-toevoegen aan je applicaties kunt vereenvoudigen met behulp van jQuery.

    Bezoek artikel

  • jQuery voor ontwerpers: AJAX gebruiken om formulieren te valideren

    Remy zal ons laten zien hoe we AJAX, samen met de jQuery-bibliotheek, kunnen gebruiken om een ​​server-side validatie aan onze formulieren toe te voegen.

    Bezoek artikel

  • Nettuts.com: Inhoud laden en inhoud animeren met jQuery

    Onthoud altijd dat je in de "Javascript" -categorie van NETTUTs moet bladeren wanneer je naar tutorials van jQuery zoekt. In deze zelfstudie laten we u zien
    hoe u gegevens kunt laden en animeren met behulp van jQuery.

    Bezoek artikel