jQuery Tutorial - Kom godt i gang: Grundlæggende og vælgere

jQuery Tutorial - Kom godt i gang: Grundlæggende og vælgere

I sidste uge talte jeg om, hvor vigtig jQuery er for enhver moderne webudvikler, og hvorfor det er fantastisk. I denne uge synes jeg, det er på tide, at vi får snavset hænderne med noget kode og lært, hvordan vi rent faktisk kan bruge jQuery i vores projekter.





Jeg siger det nu - du behøver ikke at lære Javascript for at kunne bruge jQuery. Det er nok 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. Enhver Javascript, du har brug for, bliver afhentet undervejs. Det antages imidlertid, at du som webudvikler har et ret godt kendskab til HTML og CSS (og her er en nyttig gratis xHTML -guide, hvis ikke!).



Dokumentobjektmodel

jQuery handler om traversal og manipulation af DOM - det D dokument ELLER bject M odel. DOM er en hierarkisk trærepræsentation af siden, bygget af browsere efter at have læst hele HTML -koden. I jQuery vil vi bruge terminologi som forælder , børn , og søskende ganske ofte, så du bør have en idé om, hvad dette betyder i forhold til DOM.





Dette enkle diagram fraw3skolerforklarer begreberne rimelig godt. Du bør kunne se, at elementets forælder er, mens element har en umiddelbar

søskende.

Kom godt i gang: Tilføjelse af jQuery

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



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 vil intelligent kun indlæse jQuery én gang, uanset hvor mange plugins der har bedt om det.

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





fede ting at lave med en bærbar computer
wp_enqueue_script('jquery');

Den anden ting at huske på er, at når jQuery tilføjes ved hjælp af standardmetoden, indlæses den som $ . Alt, hvad du gør med jQuery, går forud for denne $, f.eks .:

$.ajax

eller



$('#header')

Men når jQuery indlæses via Wordpress, udføres alt ved hjælp af jQuery -variablen i stedet for $, så for eksempel:

jQuery('#header')

Selvom dette ikke er et stort problem, når du skriver din egen kode, betyder det, at det skal oversættes til at klippe og indsætte uddrag af jQuery, du finder på nettet, for at bruge jQuery i stedet for $ - det er alt.

En vej udenom dette er at indpakke $ -stil kode, du finder sådan:

(function($) {
// paste $ code in here
})(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 code codes here

$ ('vælger').metode();

Det er det, i titlen deroppe. Det er grundstrukturen i et enkelt stykke jQuery -kode til manipulation af DOM. Let, ikke?

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

a { }

Det samme ville blive gjort 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 til at være mere specifik.

For eksempel, for at finde alle links til klassen 'findme', ville du bruge:

$('a.findme')

Du behøver ikke angive elementtypen hver gang - men hvis du gør det, gør det simpelthen reglen mere specifik. Du kunne bare have sagt

$('.findme')

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

Hvis du vil bruge et navngivet ID -element, skal du bruge # tegn i stedet. Hovedforskellen her er, at en ID -vælger kun nogensinde vil vælge et objekt, mens en klassevælger kan finde mere end et.

hvordan man bruger itunes gavekort til æble musik
$('#something')

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

$('body p:first')

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

$('a[href*='makeuseof']')

Er det ikke fedt? Jamen det tror jeg det er.

Din næste anløbshavn skal være jQuery API -dokumentation til vælgere . Det er en enorm liste over alle de forskellige slags selektorer, der er tilgængelige til brug, og ingen ville forvente, at du lærer dem alle.

Den næste del af ligningen ermetode- hvad skal man gøre med disse ting, når man har fundet dem alle - men det lader vi være til næste lektion. Hvis du vil komme i gang med at prøve forskellige selektorer 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','red');

Simpelt nok! Selvom dette muligvis ikke er praktisk anvendeligt, giver det dig let mulighed for at se alle elementer, der er placeret ved hjælp af dine vælgere. Gå nu frem og vælg - DOM venter på dig.

Jeg håber, at denne vejledning har været nyttig for dig; Jeg har forsøgt at gøre det så enkelt som let at forstå som muligt. Stil gerne dine spørgsmål, eller giv feedback, men vær opmærksom på, at jeg bestemt ikke er en elite jQuery ninja.

Del Del Tweet E -mail 5 tips til at overlade dine VirtualBox Linux -maskiner

Træt af den dårlige ydelse, der tilbydes af virtuelle maskiner? Her er hvad du skal gøre for at øge din VirtualBox -ydeevne.

Læs Næste Relaterede emner
  • Webkultur
  • Web-udvikling
  • JavaScript
  • Programmering
  • jQuery
Om forfatteren James Bruce(707 artikler udgivet)

James har en bachelor i kunstig intelligens og er CompTIA A+ og Network+ certificeret. Når han ikke har travlt som Hardware Reviews Editor, nyder han LEGO, VR og brætspil. Inden han kom til MakeUseOf, var han belysningstekniker, engelsklærer og datacenteringeniør.

Mere fra James Bruce

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere