jQuery: Hvordan få objekter etter ID, klasse, tagg og attributt

I dette andre segmentet i jQuery-serien min, vil vi gjennomgå å få objekter etter ID Selector (#id), etter Class Selector (.class), by Tag og Attribute (.attr ()).

I den første delen, "Hvordan komme i gang med jQuery, " satte jeg opp grunnleggende kode for HTML-filen indeks.html og stilene våre med stilene.css . Så påkalte vi vår første "klare ()" -hendelsesfunksjon, og la inn et varsel om klikkhendelseshåndterer.

Filene du trenger å følge med i denne opplæringen, inkludert HTML, CSS, skript og bilder, er tilgjengelige for nedlasting her i en zip-fil.

Få objekt etter jQuery ID Selector (#id)

Å få et objekt ved ID brukes til å søke spesifisert av ID-attributtet til et element. Hver ID-verdi må bare brukes én gang i et enkelt webdokument. Hvis mer enn ett element er tildelt samme ID, vil spørsmål som bruker denne IDen bare velge det første matchede elementet i DOM. Denne oppførselen skal ikke stole på; et dokument med mer enn ett element som bruker samme ID blir imidlertid ugyldig.

I filen index.html legger vi til følgende kodelinje rett under avsnittet "Bytt" som vist nedenfor:

Bytte om

Per definisjon brukes jQuery toggleClass () -metoden for å veksle mellom å legge til og fjerne en eller flere klasser for de valgte elementene. Denne metoden sjekker hvert element for de spesifiserte klassene. Klassene legges til hvis de mangler, og fjernes hvis allerede er angitt - dette skaper en veksleeffekt. Ved å bruke parameteren "switch" kan du imidlertid bare spesifisere for å fjerne eller bare for å legge til en klasse.

I denne demonstrasjonen vil vi bruke en klasse med toggleClass () -metoden på den andre artikkelen med id = "to", som når du klikker, vil gjengi den fra en 2px blå kant til en 2px grønn kant, og den vil også endre høyde fra 200px til 100px. Vi vil legge til følgende jQuery til vår klare () -hendelse like under det første klikkfunksjonskallet vi la til i det første segmentet:

 $ ('# switch-two'). Klikk (funksjon () { 
 $ ( '# To') toggleClass ( 'newClass.'); 
 }); 
Åpne index.html-filen i nettleseren din, klikk deretter på bytteknappen, og du vil se transformasjonen som vist i Chrome 17.0.9 i figurene A og B nedenfor:

Figur A

Figur B

Når du klikker på bytteknappen, utløser den vekselfunksjonen som finner elementet ved å erstatte IDen med "newClass", som definerer skyggeboksartikkelen som 110px høy og kantfargen satt til grønn. Ved å klikke på bytteknappen igjen tilbakestilles IDen til originalen.

Få objekt etter klasse (.klasse)

I denne demonstrasjonen vil vi endre flere objekter fra en få samtale ved å ta tak i alle objekter i en bestemt klasse - i dette tilfellet klassen = "test". I vår index.html-fil vil vi legge til følgende kodelinjer rett under forrige avsnitt, og opprette en ny inngangsknapp med navnet "Test Button".

Testknapp

Deretter, i vårt område, kan du legge til følgende linjer med JavaScript rett under den forrige koden som vi la til i vår klare funksjon, og lagre filen:

 $ ('# test-switch'). klikk (funksjon () { 
 $ ('. Test ') toggleClass (' newTestClass.); 
 }); 

Nå, i stilene våre.css-filen legger du til følgende linjer og lagrer filen:

 #content .newTestClass { 
 bredde: 300px; 
 høyde: 100px; 
 kant: 2px solid # 0FF; 
 } 
Oppdater indeksen.html-dokumentet i nettleseren din, og klikk på Testknappen. get-objektet etter klasse blir aktivert, og resultatet vises i figur C som vist i Chrome 17.0.9:

Figur C

I dette eksemplet brukte vi jQuery for å finne elementet med ID-en for test-switch (Test-knappen), og da vi klikket på knappen, utløste jQuery en funksjon for å veksle klassen (" newTestClass" ) på de to elementene ( den andre article og section ) med en test .

Få objekter etter tagg

For å få et objekt etter tag må du bare gi navnet til den aktuelle koden du leter etter til klar-funksjonen. I dette eksemplet, la oss legge til disse kodelinjene i index.html-filen vår og lagre filen:

Artikkelsknapp

Legg også til følgende JavaScript rett under koden vi la til i siste trinn (inne i klar-funksjonen), og lagre filen:

 $ ('# Article-switch'). klikk (funksjon () { 
 $ ( 'Artikkel') toggleClass ( 'newClass.'); 
 }); 
Oppdater index.html-dokumentet, og klikk deretter på knappen Artikkel Tag-bytte, som vist i figur D vist i Chrome 17.0.9:

Legg merke til i dette tilfellet at vi finner elementet med id of Article -Switch (Article Tag Switch-knappen), og når vi klikker på Article Tag Switch-knappen, påvirkes de to elementene med "Article" -koden av jQuery-vekslingen til "newClass", som forvandler dem til de grønne skyggekassestilene.

Få objekter etter attributt .attr (attributtnavn)

Vi kan få et hvilket som helst attributt (id, klasse, stil, navn, tittel) for hvilken som helst tagg (eks:,,

, ) bruker funksjonen .attr ("attributtnavn"). Denne metoden returnerer en streng med elementets attributt.

I henhold til beskrivelsen for jQuery's .attr () -metoden for å få verdien av et elements attributt, har det to hovedfordeler:

  1. Convenience: Det kan kalles direkte på et jQuery-objekt og lenket til andre jQuery-metoder.
  2. Konsistens på tvers av nettlesere: Verdiene av noen attributter rapporteres inkonsekvent på tvers av nettlesere, og til og med på tvers av versjoner av en enkelt nettleser. Metoden .attr () reduserer slike uoverensstemmelser.

I dette eksemplet vil vi endre et vist bilde ved hjelp av jQuery for å erstatte en bildekildefil, sammen med alt og tittel, men først vil vi legge til følgende i index.html-filen rett under artikkelsknapplinjen:

Bilder

Vi bruker jQuery for å endre bildekilden, alt-attributtet og tittelattributtet. Samtidig vil vi sende settene med navn og verdier inn i metoden samtidig ved å bruke et kart - .attr (kart) . Et kart over attributtverdipar for å stille inn hvert nøkkelverdipar på kartet legger til eller endrer et attributt. Legg til følgende jQuery i hendelsesbehandleren rett under den forrige koden i filen index.html, og lagre deretter filen:

 $ ('# image-switch'). klikk (funksjon () { 
 $ ('img'). attr ({ 
 src: "bilder / Rose.gif", 
 alt: 'Rose', 
 tittel: 'Rose' 
 }); 
 }); 

Vi vil også legge til følgende stiler i stilen.css-filen, lagre denne filen igjen:

 #Bilder { 
 kant: 3px solid grå; 
 padding: 10px; 
 bredde: 400 piksler; 
 } 
Før knappen Attributtbryter klikkes, ser dette ut hvordan index.html-dokumentet vises i figur E i Chrome 17.0.9:

Klikk på attributtbryter-knappen, så vil bildet oppdatere til rosen som vises i figur F som vist i Chrome 17.0.9:

I vårt neste segment på jQuery vil vi dekke filtreringsobjekter, endre CSS-klasser, endre et objekts indre tekst og andre morsomme ting!

© Copyright 2020 | mobilegn.com