Sidste uge talte jeg om, hvor vigtigt jQuery er at gøre Internettet interaktivt: En introduktion til jQuery Making Web Interactive: En introduktion til jQuery jQuery er et script-bibliotek på klientsiden, som næsten alle moderne websteder bruger - det gør websteder interaktive. Det er ikke det eneste Javascript-bibliotek, men det er det mest udviklede, mest understøttede og mest anvendte ... til enhver moderne webudvikler, og hvorfor det er fantastisk. Denne uge tror jeg, det er på tide, at vi får snavsede hænder med noget kode og lærte, hvordan vi rent faktisk kan bruge jQuery i vores projekter.

Jeg siger det nu - du behøver ikke at lære Javascript for at bruge jQuery. Det er sandsynligvis bedst, hvis du tænker på jQuery som en udvikling af Javascript - en bedre måde at gøre det på - end blot et bibliotek, der tilføjer funktionalitet. Ethvert Javascript, du har brug for, afhentes undervejs. Det antages dog, at du som webudvikler har en temmelig god viden om HTML og CSS (og her er en nyttig gratis xHTML-guide, hvis ikke!).

Dokumentobjektmodel

jQuery handler om gennemgang og manipulation af DOM - det DOKUMENTETS Object Model. DOM er en hierarkisk trærepræsentation af siden, bygget af browsere efter at have læst i al HTML-koden. I jQuery bruger vi terminologi som forælder, børn, og søskende ganske ofte, så du skulle have en idé om, hvad det betyder i forhold til DOM.

Dette enkle diagram fra w3schools forklarer koncepterne ret godt. Du skal være i stand til at se, at elementets overordnede er det, mens elementet har en øjeblikkelig

søskende.

Kom godt i gang: Tilføjelse af jQuery

Den seneste version af jQuery er omkring 91KB, når den komprimeres, så den tilføjer omtrent den samme sidevægt som et lille fotografi eller et skærmbillede. Den nemmeste måde at inkludere jQuery i dit projekt er at indsætte en henvisning til den seneste hostede version i dit websteds overskrift:

Bemærk dog, at hvis du kører WordPress, kan dette forårsage problemer, fordi det allerede har sin egen kopi af jQuery-biblioteket. Plugins kan anmode om, at dette indlæses, og WordPress indlæser kun intelligent jQuery én gang uanset hvor mange plugins der har bedt om det.

Hvis du tilføjer følgende linje til din functions.php temafil, tilføjer du en anden anmodning om, at den skal inkluderes. WordPress ved derefter at altid indlæse det, hvis dit tema er aktivt.

wp_enqueue_script ( "jQuery");

Den anden ting at huske på er, at når jQuery tilføjes ved hjælp af standardmetoden, indlæses det som $. Alt, hvad du laver med jQuery, bliver forudgående af denne $, såsom:

$ .ajax

eller

$ ( "# Header")

Når jQuery indlæses gennem WordPress, gøres alt dog ved hjælp af jQuery-variablen i stedet for $, så for eksempel:

jQuery ( "# header")

Selvom dette ikke er et enormt problem, når du skriver din egen kode, betyder det, at udskæring og indsættelse af uddrag af jQuery, du finder på internettet, skal oversættes for at bruge jQuery i stedet for $ - det er alt.

En måde at omgå dette er at pakke $ -style-kode, som du finder sådan:

(funktion ($) // indsæt $ kode her) (jQuery);

Dette tager jQuery variabel og videregiver den til en anonym funktion som $. Jeg forklarer anonyme funktioner næste gang - for nu, lad os lære den grundlæggende struktur for en smule jQuery-kode.

For at tilføje din kode til en HTML- eller PHP-side skal du vedlægge alt inden for tags, sådan:

 // jQuery-kodekoder her 

$ ( 'Selector') metode ().;

Det er det, i titlen derop. Det er den grundlæggende struktur i et enkelt stykke jQuery-kode til at manipulere DOM. Let, ret?

Vælgeren fortæller jQuery at finde ting, der matcher denne regel,og er det samme som CSS-vælgere (og derefter nogle flere øverst). Så ligesom i CSS ville du style alle links med

a 

Det samme ville ske i jQuery som

$ ( 'A')

Dette kan gøres for alle HTML-elementer - div, h1, span - uanset hvad. Du kan også bruge CSS klasser og ID'er for at være mere specifikke.

For eksempel at finde alle links til klassen “Find mig”, du ville bruge:

$ ( 'A.findme')

Du behøver ikke angive typen af ​​elementer hver gang - men hvis du gør det, gør det simpelthen reglen mere specifik. Du kunne lige have sagt det

$ ( 'FindMe')

som ville matche alt sammen med klassen Find mig, om det var et link eller ej.

Hvis du vil bruge et navngivet ID-element, skal du bruge # underskriv i stedet. Den vigtigste forskel her er, at en ID-vælger kun nogensinde vil vælge et objekt, mens en klassevælger muligvis finder mere end et.

$ ( '# Noget')

Grundlæggende hvis du kan gøre i CSS, så vil jQuery også gøre det. Faktisk kan du også nogle relativt komplekse pseudo-vælgere i CSS3-stil som: først

$ ('body p: first')

Hvilket ville gribe sidens afsnit. Du finder også elementer med bestemte attributter. Overvej dette eksempel; vi ønsker at finde alle links på den side, der internt peger på gøre brug af og fremhæv dem på en eller anden måde. Sådan kan vi finde dem:

$ ( 'En [href * = "makeuseof"]')

Er det ikke cool? Jeg tror, ​​det er det.

Din næste port skal være jQuery API-dokumentation for vælgere. Det er en kæmpe liste over alle de forskellige typer vælgere, der kan bruges, og ingen kunne forvente, at du lærer dem alle.

Den næste del af ligningen er metode - hvad man skal gøre med de ting, når du først har fundet dem alle - men vi forlader det til næste lektion. Hvis du dog vil komme i gang med at prøve forskellige vælgere nu, foreslår jeg, at du holder dig til følgende css-metode. Dette kræver to parametre - en CSS ejendomsnavn, og en ny værdi at tildele den ejendom. Så for at give alle links en rød baggrundsfarve, ville du gøre:

. $ ( 'A') css ( 'background-color', 'rød');

Enkelt nok! Selvom dette muligvis ikke har praktisk brug, giver det dig let at se elementer placeret ved hjælp af dine vælgere. Gå nu frem og vælg - DOM venter på dig.

Jeg håber, at denne tutorial har været nyttig for dig; Jeg har forsøgt at gøre det så simpelt så let at forstå som muligt. Du er velkommen til at stille alle spørgsmål, du har eller give feedback, men vær opmærksom på, at jeg bestemt ikke er nogen elite jQuery ninja.