Accentsconagua

jQuery Succinctly Core jQuery

Kode
Share

Basiskonsept bak jQuery

Mens noen konseptuelle variasjoner eksisterer (for eksempel funksjoner som $ .ajax) i jQuery API, er det sentrale konseptet bak jQuery "finne noe, gjør noe". Mer spesifikt, velg DOM element (er) fra et HTML-dokument og gjør deretter noe med dem ved hjelp av jQuery-metoder. Dette er det store bildet konseptet.

For å drive dette konseptet hjem, reflektere over koden nedenfor.

Legg merke til at i dette HTML-dokumentet bruker vi jQuery til å velge et DOM-element (). Med noe valgt, gjør vi da noe med valget ved å påberope jQuery-metodene tekst(), attr (), og appendTo ().

De tekst metode kalt på innpakket element og sett displayteksten til elementet for å være "jQuery." De attr anrop setter href attributt til jQuery-nettstedet.

Grokking "finne noe, gjør noe" grunnleggende konsept er avgjørende for å utvikle seg som en jQuery-utvikler.

Konseptet, bak konseptet, bak jQuery

Mens du velger noe og gjør noe, er kjernekonseptet bak jQuery, vil jeg gjerne utvide dette konseptet for å inkludere å skape noe også. Derfor kan konseptet bak jQuery utvides til å inkludere først å lage noe nytt, velge det, og deretter gjøre noe med det. Vi kunne kalle dette konseptet, bak konseptet, bak jQuery.

Det jeg prøver å gjøre er tydelig at du ikke er fast i å bare velge noe som allerede finnes i DOM. Det er dessuten viktig å groke at jQuery kan brukes til å lage nye DOM-elementer og deretter gjøre noe med disse elementene.

I koden eksempelet nedenfor lager vi en ny element som ikke er i DOM. Når den er opprettet, er den valgt og deretter manipulert.

Nøkkelbegrepet for å plukke opp her er at vi skaper element på flyet og deretter operere på det som om det allerede var i DOM.

jQuery Krever at HTML kjøres i standardmodus eller nesten-standardmodus

Det er kjente problemer med at jQuery-metodene ikke fungerer riktig når en nettleser gjør en HTML-side i quirks-modus. Pass på at når du bruker jQuery, leser tolken HTML i standardmodus eller nesten standardmodus ved å bruke en gyldig doktype.

For å sikre riktig funksjonalitet bruker kodeeksempler i denne boken HTML 5-doktypen.

Venter på DOM for å være klar

jQuery brenner en tilpasset hendelse som heter klar når DOM er lastet og tilgjengelig for manipulering. Kode som manipulerer DOM kan kjøre i en handler for denne hendelsen. Dette er et vanlig mønster sett med jQuery-bruk.

Følgende eksempel inneholder tre kodede eksempler på denne tilpassede hendelsen i bruk.

Husk at du kan legge til så mange klar() hendelser til dokumentet som du vil. Du er ikke begrenset til bare en. De blir henrettet i den rekkefølgen de ble lagt til.

Utføre jQuery-kode Når nettleservinduet er fullstendig lastet

Vanligvis vil vi ikke vente på window.onload begivenhet. Det er poenget med å bruke en tilpasset begivenhet som klar() som vil utføre kode før vinduet laster, men etter at DOM er klar til å bli krysset og manipulert.

Men noen ganger vil vi faktisk vente. Mens den egendefinerte klar() Hendelsen er flott for å utføre kode når DOM er tilgjengelig, vi kan også bruke jQuery til å utføre kode når hele websiden (inkludert alle aktiva) er fullstendig lastet.

Dette kan gjøres ved å legge ved en lasthendelseshåndterer til vindu gjenstand. jQuery gir laste() Hendelsesmetode som kan brukes til å påkalle en funksjon når vinduet er fullstendig lastet. Nedenfor gir jeg et eksempel på laste() Hendelsesmetode i bruk.

Inkluder alle CSS-filer før du inkluderer jQuery

Fra jQuery 1.3 garanterer biblioteket ikke lenger at alle CSS-filer er lastet før det brenner skikken klar() begivenhet. På grunn av denne endringen i jQuery 1.3, bør du alltid inkludere alle CSS-filer før en jQuery-kode. Dette vil sikre at nettleseren har analysert CSS før den går videre til JavaScript inkludert senere i HTML-dokumentet. Selvfølgelig kan bilder som refereres via CSS, lastes ned eller ikke, da nettleseren analyserer JavaScript.

Bruke en Hosted Versjon av jQuery

Når du legger inn jQuery på en nettside, velger de fleste å laste ned kildekoden og lenke til den fra et personlig domene / vert. Det er imidlertid andre alternativer som involverer noen andre som serverer jQuery-koden for deg.

Google vert for flere versjoner av jQuery-kildekoden med den hensikt at den blir brukt av noen. Dette er faktisk veldig praktisk. I koden eksempelet nedenfor bruker jeg a

Google er også vert for flere tidligere versjoner av jQuery-kildekoden, og for hver versjon er det gitt minifiserte og ikke-minifiserte varianter. Jeg anbefaler å bruke den ikke-minifiserte varianten under utviklingen, da feilsøkingsfeil alltid er lettere når du arbeider med ikke-minifisert kode.

En fordel ved å bruke en Google-vert versjon av jQuery er at den er pålitelig, rask og potensielt cached.

Utføre jQuery-kode Når DOM blir analysert uten bruk av Klar ()

Tollen klar() hendelsen er ikke helt nødvendig. Hvis JavaScript-koden din ikke påvirker DOM, kan du inkludere den hvor som helst i HTML-dokumentet. Dette betyr at du kan unngå klar() hendelse helt hvis JavaScript-koden din ikke er avhengig av at DOM er intakt.

De fleste JavaScript nå til dags, spesielt jQuery-kode, vil innebære å manipulere DOM. Dette betyr at DOM må analyseres fullstendig av nettleseren for at du skal kunne operere på den. Dette er grunnen til at utviklere har sittet fast på window.onload berg-og dalbane tur for et par år nå.

For å unngå å bruke klar() Hendelse for kode som opererer på DOM, kan du ganske enkelt plassere koden i et HTML-dokument før avslutningen element. Dette gjør at DOM er fullstendig lastet, bare fordi nettleseren vil analysere dokumentet fra topp til bunn. Hvis du plasserer JavaScript-koden i dokumentet etter at DOM-elementene det manipulerer, er det ikke nødvendig å bruke klar() begivenhet.

I eksemplet nedenfor har jeg glemt bruken av klar() ved å bare plassere skriptet mitt før dokumenthuset lukkes. Dette er teknikken jeg bruker gjennom denne boken og på de fleste nettstedene jeg bygger.

    
 Hei, jeg er DOM! Skript unna!

Hvis jeg skulle plassere

Bryte kjeden med destruktive metoder

Som nevnt tidligere, holder ikke alle jQuery-metodene kjeden. Metoder som  tekst() kan kjedes når den brukes til å sette tekstnoden til et element. derimot, tekst() bryter faktisk kjeden når den brukes til å få tekstknuten inneholdt i et element.

I eksemplet nedenfor, tekst() brukes til å angi og deretter få teksten som finnes i

 element.

Få teksten som finnes i et element ved hjelp av tekst() er et godt eksempel på en ødelagt kjede fordi metoden vil returnere en streng som inneholder tekstnoden, men ikke jQuery-wrapper-settet.

Det bør ikke være overraskende at hvis en jQuery-metode ikke returnerer jQuery-pakkesettet, blir kjeden dermed ødelagt. Denne metoden anses å være destruktiv.

Bruke Destructive jQuery Metoder og Exiting Destruction Using End ()

jQuery-metoder som endrer det opprinnelige jQuery-pakkesettet som er valgt, anses å være ødeleggende. Årsaken er at de ikke opprettholder den opprinnelige tilstanden til pakkesettet. Ikke vær redd; ingenting er virkelig ødelagt eller fjernet. Snarere er det tidligere innpakningssettet festet til et nytt sett.

Imidlertid trenger ikke moro med kjetting å stoppe når det originale innpakket settet er endret. Bruker slutt() metode, kan du komme tilbake av eventuelle ødeleggende endringer som er gjort i det originale pakkesettet. Undersøk bruken av slutt() metode i det følgende eksempelet for å forstå hvordan man skal operere inn og ut av DOM-elementer.

     
      
  •  
          
     
    •

Aspekter av jQuery-funksjonen

Funksjonen jQuery er mangesidig. Vi kan overføre det forskjellige verdier og strengformasjoner som den kan bruke til å utføre unike funksjoner. Her er flere bruksområder av jQuery-funksjonen:

  • Velg elementer fra DOM ved hjelp av CSS-uttrykk og egendefinerte jQuery-uttrykk, samt velg elementer ved hjelp av DOM-referanser: jQuery ('p> a') eller jQuery ( ': første') og jQuery (document.body)
  • Opprett HTML på fly ved å sende HTML-strengstrukturer eller DOM-metoder som lager DOM-elementer: jQuery ('
    ')     eller jQuery (document.createElement ( 'div'))
  • En snarvei for klar() hendelse ved å overføre en funksjon til jQuery-funksjonen: jQuery (funksjon ($) / * snarvei for klar () * /)

Hver av disse bruksområdene er detaljert i kodeseksempelet nedenfor.

Grokking Når søkeordet dette refererer til DOM-elementer

Når du legger til hendelser på DOM-elementer som finnes i et innpakningssett, skal søkeordetdette kan brukes til å referere til gjeldende DOM-element som påkaller hendelsen. Følgende eksempel inneholder jQuery-kode som vil legge til en egendefinert mouseenter hendelse til hver element på siden. Den innfødte JavaScript mus over Hendelsen brenner når markøren går inn eller ut av et barnelement, mens jQuery er mouseenter gjør ikke.

    jQuery.com jQuery.com jQuery.com

Inne i den anonyme funksjonen som sendes til mouseenter () metode, bruker vi søkeordet dette å referere til gjeldende element. Hver gang musen berører "jQuery.com" -teksten, vil nettleseren varsle hvilket element som har blitt moused-over ved å identifisere dets id attributt verdi.

I det forrige eksempelet er det også mulig å ta dette referanse og send det til jQuery-funksjonen, slik at DOM-elementet er pakket inn med jQuery-funksjonalitet.

Så i stedet for dette:

 // Få tilgang til ID-attributtet til DOM-elementet. alert (this.id);

Vi kunne ha gjort dette:

 // Vri DOM-elementet med et jQuery-objekt, // og bruk deretter attr () for å få tilgang til ID-verdien. alert ($ (dette) .attr ( 'id'));

Dette er mulig fordi jQuery-funksjonen ikke bare tar seleksjonsuttrykk, men også referanser til DOM-elementer. I koden, dette er en referanse til et DOM-element.

Grunnen til at du kanskje vil pakke jQuery-funksjonalitet rundt et DOM-element, bør være åpenbart. Å gjøre det gir deg muligheten til å bruke jQuery chaining, bør du ha behov for det.

Iterating over et sett med elementer som finnes i jQuery wrapper sett er noe lik det konseptet vi nettopp diskuterte. Ved å bruke jQuery Hver() metode, kan vi deterere over hvert DOM-element som finnes i et innpakningssett. Dette tillater tilgang til hvert DOM-element individuelt, via bruken av dette søkeord.

Ved å bygge på markeringen i det forrige eksempelet kan vi velge alt elementer på siden og bruk Hver() metode for å iterere over hver element i wrapper settet, tilgang til sin id Egenskap. Her er et eksempel.

   jQuery.com jQuery.com jQuery.com

Hvis du skulle laste HTML-koden i en nettleser, vil nettleseren varsle for id verdien av hver element på siden. Siden det er tre elementer på siden, får du tre iterasjoner via Hver() metode og tre varslingsvinduer.

Utdrag av elementer fra et pakkesett, bruk dem direkte uten jQuery

Bare fordi du vikler jQuery-funksjonalitet rundt et HTML-element, betyr det ikke at du mister tilgang til selve DOM-elementet selv. Du kan alltid trekke ut et element fra wrapper settet og operere på elementet via innfødt JavaScript. For eksempel, i koden nedenfor setter jeg tittelattributtet til element i HTML-siden ved å manipulere egenskapen til den opprinnelige tittelen til DOM element.

    jQuery.com

Som vist, gir jQuery det praktiske få() metode for tilgang til DOM-elementer ved en bestemt indeks i innpakningssettet.

Men det er et annet alternativ her. Du kan unngå å bruke få() metode ved ganske enkelt å bruke firkantbrakett-array notasjonen på selve jQuery-objektet. I sammenheng med vårt tidligere kodeeksempel:

Denne koden:

 $ ('a'). get (0) .title = 'jQuery.com';

Kan bli dette:

 $ ('a') [0] .title = 'jQuery.com';

Begge tillater tilgang til selve DOM-elementet. Personlig foretrekker jeg firkantbrakettnotasjon. Det er raskere fordi det bruker innfødt JavaScript for å hente elementet fra en matrise, i stedet for å overføre det til en metode.

Imidlertid få() Metoden gir en glatt løsning for å plassere alle DOM-elementene i et opprinnelig system. Ved å bare ringe til få() metode uten å overføre det til en indeksparameter, vil metoden returnere alle DOM-elementene i wrapper-settet i et innfødt JavaScript-array.

For å demonstrere, la oss ta få() for en prøvekjøring. I koden nedenfor plasserer jeg alle elementer inn i en matrise. Jeg bruker deretter arrayet for å få tilgang til tittelegenskapen til den tredje DOM-objekt på siden.

    jQuery.com jQuery.com jQuery.com

Merknader: Ved hjelp av få() vil avslutte jQuery's chaining. Det vil ta wrapper settet og endre det til et enkelt utvalg av DOM elementer som ikke lenger er pakket inn med jQuery-funksjonalitet. Derfor bruker du .slutt() Metoden kan ikke gjenopprette kjetting etter .få().

Kontrollerer for å se om pakningssettet er tomt

Før du begynner å operere på et innpakningssett, er det logisk å kontrollere at du faktisk har valgt noe. Den enkleste løsningen er å bruke en hvis uttalelse for å sjekke om pakkesettet inneholder noen DOM-elementer.

    jQuery

Sannheten i saken er det ovennevnte hvis uttalelser er ikke helt nødvendige, fordi jQuery vil mislykkes tydelig hvis ingen elementer er funnet. Imidlertid blir hver metode som er koblet til et hvilket som helst tomt innpakningssett, fortsatt påkalt. Så mens vi faktisk kunne avstå bruken av hvis uttalelser, det er sannsynligvis en god tommelfingerregel å bruke dem. Å påkalle metoder på et tomt pakkesett kan potensielt forårsake unødvendig behandling, samt uønskede resultater hvis metoder returnerer andre verdier enn wrapper-settet, og disse verdiene blir handlet på.

Opprette et alias ved å omdøpe jQuery-objektet selv

jQuery gir noConflict () metode som har flere bruksområder, nemlig evnen til å erstatte $ med et annet alias. Dette kan være nyttig på tre måter: Det kan avstå bruken av $ logg på et annet bibliotek, unngå unntak av potensielle konflikter og gi muligheten til å tilpasse navneområdet / aliaset for jQuery-objektet.

For eksempel, la oss si at du bygger et webprogram for firma XYZ. Det kan være fint å tilpasse jQuery slik at i stedet for å måtte bruke jQuery ( 'div'). viser () eller $ ( 'Div'). Vis () du kan bruke XYZ ( 'div'). Vis () i stedet.

    
Syncfusion., Inc.

Merknader:Ved å passere noConflict () fungere en boolsk verdi av ekte, kan du helt angre hva jQuery har introdusert i nettsiden. Dette bør kun brukes i ekstreme tilfeller fordi det vil føre til problemer med jQuery-plugins.

Bruke .each () Når Implicit Iteration er ikke nok

Forhåpentligvis er det åpenbart at hvis du har en HTML-side (eksempel nedenfor) med tre tomme

elementer, vil følgende jQuery-setningen velge alle tre elementene på siden, deterere over de tre elementene (implisitt iterasjon), og vil sette inn teksten "Jeg er en div" i alle tre
elementer.

Dette betraktes som implisitt iterasjon fordi jQuery-kode antar at du vil manipulere alle tre elementene, noe som krever iterating over elementene som er valgt og angir tekstknutepunktverdien for hver

med teksten "Jeg er en div." Når dette er gjort som standard, blir det referert til som implisitt iterasjon.

Dette er ganske praktisk. For det meste vil flertallet av jQuery-metodene gjelde implisitt iterasjon. Imidlertid vil andre metoder bare gjelde for det første elementet i innpakningssettet. For eksempel, jQuery-metoden attr () vil bare få tilgang til det første elementet i pakkesettet når det brukes til å få en attributtverdi.

Merknader:Når du bruker attr () Metode for å angi et attributt, jQuery vil faktisk bruke implisitt iterasjon for å angi attributten og dens verdi til alle elementene i wrapper settet.

I koden under inneholder pakningssettet alt

elementer på siden, men attr () Metoden returnerer bare id verdien av det første elementet som finnes i innpakningssettet.

    
Jeg er en div
 
Jeg er en div
 
Jeg er en div

For demonstrasjons skyld, anta at målet ditt er å få den id Tilordne verdien for hvert element på siden. Du kan skrive tre separate jQuery-setninger som gir tilgang til hver

elementets id attributt verdi. Hvis vi skulle gjøre det, kan det se slik ut:

 $ ( '# DIV1') attr ( 'id.'); $ ( '# DIV2') attr ( 'id.'); $ ( '# DIV3') attr ( 'id.'); // eller var $ divs = $ ('div'); // Cached query $ divs.eq (0) .attr ('id'); // Start med 0 i stedet for 1 $ divs.eq (1) .attr ('id'); $ Divs.eq (2) .attr ( 'id');

Det virker litt verbose, nei? Ville det ikke vært fint om vi kunne løkke over wrapper settet og bare trekke ut id Tilordne verdi fra hver av

elementer? Ved å bruke $ (). Hver () Metode, vi påberoper en annen runde av iterasjon når vår wrapper sett krever eksplisitt iterasjon å håndtere flere elementer.

I kodeseksempelet nedenfor bruker jeg $ (). Hver () Metode for å sløyfe over pakkesettet, få tilgang til hvert element i settet, og trekk deretter ut det id attributt verdi.

    
DIV1
 
DIV2
 
DIV3

Tenk på mulighetene foran deg med evnen til å håndheve iterasjon når som helst du vil.

Merknader: jQuery gir også en $ .Hver funksjon, ikke å forveksle med $ (). Hver metode, som brukes spesielt til iterate over et jQuery wrapper sett. De $ .Hver Metoden kan faktisk brukes til å iterere over noen gamle JavaScript-array eller -objekt. Det er i hovedsak en subsitute for innfødte JavaScript-sløyfer.

Elementer i jQuery Wrapper Set Returnert i dokumentbestilling

Selektormotoren returnerer resultater i dokumentordre i motsetning til rekkefølgen der selektoren ble sendt inn. Innpakningssettet vil bli befolket med de valgte elementene basert på rekkefølgen hvert element vises i dokumentet, fra topp til bunn.

    
h1
 
h2
 
h3

Bestemme kontekst som brukes av jQuery-funksjonen

Standardkonteksten som brukes av jQuery-funksjonen når du velger DOM-elementer, er dokumentelementet (f.eks. $ ('a', dokument)). Dette betyr at hvis du ikke oppgir jQuery-funksjonen (f.eks. jQuery ()) med en annen parameter som skal brukes som kontekst for DOM-spørringen, er standardkonteksten brukt dokumentelementet, mer kjent som .

Det er mulig å bestemme sammenhengen der jQuery-funksjonen utfører en DOM-spørring ved å bruke kontekst eiendom. Nedenfor viser jeg to kodede eksempler på å hente verdien av kontekstegenskapen.

    
 
 
jQuery

Opprette hele DOM-strukturen, inkludert DOM-hendelser, i en enkelt kjede

Ved å utnytte chaining og jQuery-metoder, kan du opprette ikke bare et enkelt DOM-element, men hele DOM-strukturer. Nedenfor oppretter jeg en uordnet liste over jQuery-koblinger som jeg legger til i DOM.

Konseptet du må ta bort fra det forrige eksempelet er at jQuery kan brukes til å lage og drive komplekse DOM-strukturer. Ved hjelp av jQuery-metoder alene kan du piske opp de fleste DOM-strukturer du måtte trenge.

Kode
×