jQuery -opplæring - Komme i gang: Grunnleggende og velgere

jQuery -opplæring - Komme i gang: Grunnleggende og velgere

I forrige uke snakket jeg om hvor viktig jQuery er for enhver moderne webutvikler og hvorfor det er fantastisk. Denne uken tror jeg det er på tide at vi skitner hendene med litt kode og lærer hvordan vi faktisk kan bruke jQuery i prosjektene våre.





Jeg skal si dette nå - du trenger ikke å lære Javascript for å bruke jQuery. Det er sannsynligvis best hvis du tenker på jQuery som en utvikling av Javascript - en bedre måte å gjøre det på - enn bare et bibliotek som legger til funksjonalitet. Enhver Javascript du trenger, blir hentet underveis. Det antas imidlertid at du som webutvikler har god kunnskap om HTML og CSS (og her er en nyttig gratis xHTML -guide hvis ikke!).



Dokumentobjektmodell

jQuery handler om traversal og manipulasjon av DØMMEKRAFT - den D dokument ELLER bject M odel. DOM er en hierarkisk trerepresentasjon av siden, bygget av nettlesere etter å ha lest all HTML -koden. I jQuery bruker vi terminologi som forelder , barn , og søsken ganske ofte, så du bør ha en ide om hva dette betyr i forhold til DOM.





Dette enkle diagrammet fraw3skolerforklarer begrepene ganske godt. Du bør kunne se at overordnet til elementet er, mens elementet har en umiddelbar

søsken.

Komme i gang: Legger til jQuery

Den siste versjonen av jQuery er omtrent 91KB når den komprimeres, så den legger til omtrent samme sidevekt som et lite fotografi eller skjermbilde. Den enkleste måten å inkludere jQuery i prosjektet ditt er å lime inn en referanse til den siste vertsversjonen i sideoverskriften din:



Vær imidlertid oppmerksom på at hvis du kjører Wordpress, kan dette forårsake problemer fordi det allerede har sin egen kopi av jQuery -biblioteket. Plugins kan be om at dette lastes inn, og Wordpress vil intelligent bare laste jQuery én gang uavhengig av hvor mange plugins som har bedt om det.

Hvis du legger til følgende linje i din functions.php temafil, legger du til en annen forespørsel om at den skal inkluderes. Wordpress vil da vite å alltid laste det inn hvis temaet ditt er aktivt.





hvordan konvertere bilde til vektor i illustrator cc
wp_enqueue_script('jquery');

Den andre tingen å huske på er at når jQuery legges til ved hjelp av standardmetoden, blir den lastet som $ . Alt du gjør med jQuery går foran denne $, for eksempel:

$.ajax

eller



$('#header')

Men når jQuery lastes gjennom Wordpress, gjøres alt med jQuery -variabelen i stedet for $, så for eksempel:

jQuery('#header')

Selv om dette ikke er et stort problem når du skriver din egen kode, betyr det at klipp og liming av biter av jQuery du finner på nettet, må oversettes for å bruke jQuery i stedet for $ - det er alt.

En vei rundt dette er å pakke inn $ -stilkode du finner slik:

(function($) {
// paste $ code in here
})(jQuery);

Dette tar jQuery variabel og sender den inn i en anonym funksjon som $ . Jeg skal forklare anonyme funksjoner neste gang - for nå, la oss lære den grunnleggende strukturen til litt jQuery -kode.

For å legge til koden din på en HTML- eller PHP -side, legg ved alt i tagger, slik:


// jQuery code codes here

$ ('velgeren').metode();

Det er det, i tittelen der oppe. Det er grunnstrukturen til et enkelt stykke jQuery -kode for å manipulere DOM. Lett, ikke sant?

Develgerenforteller jQuery å finne ting som samsvarer med denne regelen, og er det samme som CSS -velgere (og deretter litt mer på toppen). Så, akkurat som i CSS vil du style alle lenker med

a { }

Det samme vil bli gjort i jQuery som

$('a')

Dette kan gjøres for alle HTML -elementer - div, h1, span - uansett. Du kan også bruke CSS -klasser og ID -er for å være mer spesifikk.

For eksempel, for å finne alle lenker med klassen 'findme', vil du bruke:

$('a.findme')

Du trenger ikke spesifisere elementtypen hver gang - men hvis du gjør det, gjør regelen ganske enkelt mer spesifikk. Du kunne bare sagt

$('.findme')

som ville matche alt med klassen Finn meg , om det var en lenke eller ikke.

Hvis du vil bruke et navngitt ID -element, bruker du # signere i stedet. Hovedforskjellen her er at en ID -velger bare noen gang vil velge ett objekt, mens en klassevelger kan finne mer enn ett.

sier at jeg er tilkoblet, men ikke internett
$('#something')

I utgangspunktet hvis du kan gjøre det i CSS, vil jQuery også gjøre det. Faktisk kan du også noen ganske komplekse pseudovelgere i CSS3 -stil som: først

$('body p:first')

Som ville gripe avsnittet på siden. Du finner også elementer med visse attributter. Vurder dette eksemplet; vi ønsker å finne alle lenker på siden som peker internt til benytte seg av og markere dem på en eller annen måte. Slik kan vi finne dem:

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

Er ikke det kult? Jeg tror det er det.

Din neste anløpshavn bør være jQuery API -dokumentasjon for velgere . Det er en enorm liste over alle de forskjellige selektorene som er tilgjengelige for bruk, og ingen ville forvente at du lærer dem alle.

Den neste delen av ligningen ermetode- hva du skal gjøre med disse tingene når du har funnet dem alle - men vi lar det stå til neste leksjon. Hvis du vil komme i gang med å prøve ut forskjellige velgere nå, foreslår jeg at du holder deg til følgende css -metode. Dette krever to parametere - en CSS eiendomsnavn , og en ny verdi å tilordne den eiendommen. Så, for å gi alle koblinger en rød bakgrunnsfarge, ville du gjøre:

$('a').css('background-color','red');

Enkelt nok! Selv om dette kanskje ikke har praktisk bruk, lar det deg enkelt se alle elementene som er plassert ved hjelp av velgerne. Gå nå frem og velg - DOM venter på deg.

Jeg håper denne opplæringen har vært nyttig for deg; Jeg har prøvd å gjøre det så enkelt som lett å forstå som mulig. Still gjerne spørsmålene du har eller legg igjen tilbakemeldinger, men vær oppmerksom på at jeg absolutt ikke er noen elite jQuery ninja.

Dele Dele kvitring E -post 5 tips for å overbelaste VirtualBox Linux -maskinene dine

Lei av den dårlige ytelsen som tilbys av virtuelle maskiner? Her er hva du bør gjøre for å øke VirtualBox -ytelsen.

Les neste Relaterte temaer
  • Nettkultur
  • Webutvikling
  • JavaScript
  • Programmering
  • jQuery
Om forfatteren James Bruce(707 artikler publisert)

James har en BSc i kunstig intelligens og er CompTIA A+ og Network+ sertifisert. Når han ikke er opptatt som Hardware Reviews Editor, liker han LEGO, VR og brettspill. Før han begynte i MakeUseOf, var han belysningstekniker, engelsklærer og datasenteringeniør.

Mer fra James Bruce

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere