Dobijte vrijednost jquery atributa. HTML: Atributi elementa

Svaki atribut, sa izuzetkom logičkih vrednosti, ima vrednost koja je jedna od sledećih tipova: ključna reč, string, adresa, broj, procenat, kod jezika. Ovo nisu sve vrste, ali najčešće.

Ključna riječ

Neki atributi imaju rezervirane vrijednosti zvane "ključne riječi". Na primjer, vrijednost atributa tipa elementa definira tip elementa forme. Ispod stavke kreira dugme.

Ključne riječi podliježu specifikaciji, lista njihovih vrijednosti je ograničena i ne može se proizvoljno mijenjati.

Linija

Niz je tekst zatvoren u dvostrukim ili jednostrukim navodnicima.

Navodnici definiraju početak i kraj stringa, tako da se isti navodnici ne mogu dodati unutar stringa. Na primjer, sljedeći red koristi pogrešnu kombinaciju navodnika.

Da biste ispravno napisali niz sa internim navodnicima, postoji nekoliko opcija.

1. Izbjegavanje unutrašnjeg navodnika ovako - \". U ovom slučaju, pretraživač ga više neće percipirati kao navodnik, već se smatra znakom.

2. Koristite kombinaciju jednostrukih i dvostrukih navodnika.

Ovdje je string u atributu title stavljen u jednostruke navodnike, tako da možemo sigurno pisati unutar dvostrukog navodnika.

Sve ovo radi na isti način za pojedinačne navodnike.

Adresa

Adresa je put do dokumenta, kao što je grafička datoteka. Adresa je potrebna u slučajevima kada se napravi link ka nekoj stranici, drugoj web stranici ili se preuzme određena datoteka. Na primjer, u elementu adresa se koristi kao vrijednost atributa src, specificira putanju do datoteke slike.

Razlikujte apsolutne i relativne adrese.

Apsolutne adrese

Takve adrese funkcionišu bilo gde i svuda, bez obzira na naziv sajta ili web stranice na kojoj je adresa data, i uvek počinju sa protokolom za prenos podataka. Za web stranice, ovo je obično HTTP (HyperText Transfer Protocol), tako da apsolutne adrese počinju ključnom riječi http://. Primjer 1 pokazuje vezu koja koristi apsolutnu adresu.

Primjer 1: Upotreba apsolutne adrese u linku

Google

Pored HTTP protokola, postoji i siguran HTTPS protokol. Nije uvijek očito koji se protokol koristi na stranici, tako da se može u potpunosti izostaviti u adresi veze. U ovom slučaju, adresa će biti napisana ovako:

Google

Apsolutne adrese se prvenstveno koriste za upućivanje na drugi mrežni resurs i rijetko se koriste za interne veze.

Relativne adrese

Relativne adrese su specificirane iz korijena stranice ili trenutnog dokumenta. Na primjer, kod znači preuzimanje grafičke datoteke pod nazivom pic.png, koja se nalazi u istom folderu kao i sama web stranica. Pogledajmo neke primjere takvih adresa.

/
Adresa obično ukazuje na datoteku index.html, koja se nalazi u korijenu stranice. Ako nema datoteke index.html, pretraživač će obično prikazati listu datoteka u tom direktoriju. Ime datoteke ne mora biti index.html, ovaj parametar se mijenja kroz postavke web servera - to je naziv programa koji analizira zahtjeve koji dolaze iz pretraživača i šalje mu dokumente prikazane korisniku.

/images/pic.png
Crtica (/) ispred adrese označava da adresiranje počinje od korijena stranice. Veza vodi do datoteke pic.png koja se nalazi u folderu slika. A to se, zauzvrat, nalazi u korijenu stranice.

../help/me.html
Dve tačke ispred imena govore pretraživaču da se popne za jedan nivo na listi direktorijuma sajta i da tamo "pretraži" u folderu pomoći datoteku koja se zove me.html.

priručnik/info.html
Ako ispred naziva fascikle nema dodatnih znakova, kao što su tačke ili crtice, tada se fascikla nalazi unutar trenutnog foldera, a info.html fajl je već u njemu.

URL-ovi koji se odnose na korijen stranice kao što je /demo/ rade samo pod kontrolom web servera i nisu primjenjivi na lokalnom računalu.

Pogledaj moju fotografiju!

Kako snimiti istu fotografiju?

Ponekad možete pronaći adrese u obliku ./file/doc.html. Tačka ispred znači da je odbrojavanje iz trenutnog foldera. Takav unos je suvišan i može se skratiti na file/doc.html.

Brojevi

Brojevi se sastoje od brojeva od 0 do 9; za negativne brojeve, ako je potrebno, ispred se stavlja znak minus (-45). Primjer 3 pokazuje upotrebu brojeva kao vrijednosti atributa.

Primjer 3: Korištenje brojeva

Temperatura vode

Osim cijelih brojeva, dozvoljeno je koristiti decimalne razlomke, dok su cijeli broj i razlomak odvojeni jedan od drugog zarezom - 36,6, kao što je prikazano u primjeru 4.

Primjer 4. Razlomci

Interes

Procentualna notacija vam omogućava da se povežete sa veličinom roditeljskog elementa i postavite veličinu u odnosu na njega. Pretpostavimo da imamo sljedeći kod:

Element nalazi se unutra

Stoga element

će biti roditelj . Vrijedi i obrnuto - element je dijete od

Shodno tome, u ovom slučaju širina slike u procentima se izračunava iz nadređenog pasusa, koji po defaultu zauzima sav slobodni prostor prozora po širini.

Pretraživač razumije da govorimo o procentima ako se iza broja doda simbol %, na primjer: width="40%" .

Primjer 5 prikazuje kod web stranice u kojem je širina slike naznačena u postocima.

Primjer 5. Dimenzije slike u procentima

Rezultat ovog primjera prikazan je na sl. 1. Širina slike je postavljena na 100%, tako da zauzima punu širinu prozora pretraživača. Visina nije navedena i automatski je izračunava pretraživač.

Rice. 1. Veličina slike u procentima

Prednost procentualnog zapisa je u tome što se veličina slike mijenja sa širinom prozora pretraživača i ne ostaje statična. Nedostaci uključuju pogoršanje kvaliteta slike kada je jako rastegnuta.

Kod jezika

Živimo u eri globalizacije, kada web stranice sadrže tekstove na različitim jezicima. Da pokažete pretraživačima na kojem jeziku je tekst napisan i postavite vlastite postavke za različite jezike (na primjer vrste citata) i naznačite jezik teksta u obliku koda. Atribut lang se koristi za postavljanje jezika (primjer 6).

Primjer 6: Upotreba atributa lang

Fraza na francuskom

Je n "ai pas mange depuis šest jours

U ovom primjeru, cijela stranica je postavljena na ruski sa atributom lang postavljenim na ru. Da bi se pokazalo da se jezik primjenjuje na cijelu stranicu, elementu se dodaje atribut . Za francuski tekst, elementu se dodaje lang atribut sa vrijednošću fr

Važeće vrijednosti atributa lang možete pronaći na ovoj stranici.

Vlad Merzhevich

Svaki atribut oznake sadrži vrijednost određenog tipa i formata. Razlikuju se sljedeće vrste vrijednosti: ključne riječi, brojevi, datum i vrijeme, boje, URL-ovi.

Sve atribute karakteriziraju sljedeći principi.

• Ako vrijednost nije eksplicitno specificirana, primjenjuje se zadana vrijednost ili se atribut zanemaruje.
• Ako je vrijednost atributa nevažeća, na primjer, umjesto broja se dodaje tekst, tada se vrijednost atributa zanemaruje i koristi se zadana vrijednost.

Nemaju svi atributi zadanu vrijednost, u nedostatku takvog atributa ili ako je njegova vrijednost netačna, atribut se preskače.

Ključne riječi

Ovo je dat fiksni skup određenih riječi koje se mogu zamijeniti kao vrijednosti atributa. Ključne riječi ne razlikuju velika i mala slova i mogu se napisati na bilo koji prikladan način. Dakle, vrijednosti handheld , Handheld i HANDHELD imaju isti učinak.

Primjer 1 pokazuje kako kreirati obrazac koji se šalje na server koristeći POST metodu koristeći vrijednost atributa metode post.

Primjer 1: Način podnošenja obrasca

HTML5 IE Cr Op Sa Fx

U ovom primjeru, u elementu

Firefox pretraživač ne podržava tip broja i umjesto toga prikazuje normalno tekstualno polje.

Realni brojevi

Ovo uključuje decimale, a tačka se koristi za razdvajanje celobrojnih i razlomaka. Broj također može biti negativan, u tom slučaju mu prethodi znak minus (-).

Primjeri realnih brojeva: -0,84, 3,1415926, 1,717.

Postoji i drugi oblik pisanja realnih brojeva, kada se iza broja dodaje latinica e ili E, a zatim broj koji označava stepen, a može biti i sa znakom minus. Ovo je isto kao množenje broja prije E sa 10 na stepen iza E. Evo nekoliko primjera za ilustraciju.

3,1415926e5 = 3,1415926 × 10 5 = 3,1415926 × 100000 = 314159,26

5e-2 = 5 × 10 -2 = 5 / 100 = 0,05

78e2 = 78 × 10 2 = 7800

Opera pretraživač ne radi ispravno sa stvarnim brojevima koji imaju veliko slovo E, pa umetnite malo slovo e.

datum i vrijeme

Koristi se za određivanje godine, mjeseca i godine ili kompletnog datuma i vremena.

Datum i vrijeme su navedeni u posebnom formatu, čiji je primjer prikazan u tabeli. jedan.

Svaka jedinica ima svoj oblik i ograničenja.

• Godina - data sa četiri cifre (1860).
• Mjesec - dvocifren (01 - januar, 02 - februar, 12 - decembar).
• Dan - dvije cifre od 01 do 31.
• Sat je dvocifren od 00 do 23.
• Minute su dvije cifre od 00 do 59.
• Sekunde su dvije cifre od 00 do 59.
• Vremenska zona - sati i minute sa znakom plus ili minus.

Datum i vrijeme su odvojeni velikim latiničnim slovom T. Ako je potrebno, vremenska zona se ispisuje iza vremena sa znakom plus ili minus. Na primjer, za Moskvu, vremenska zona će biti +03:00.

Boje

Vrijednost boje je tri broja u rasponu od 0 do 255 u heksadecimalu koji predstavljaju crvene, zelene i plave komponente u sRGB prostoru boja. Svaka vrijednost boje mora početi znakom funte (#) nakon čega slijedi sljedećih šest brojeva ili slova u svakom slučaju: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Ostali znakovi nisu dozvoljeni. Pogledajte Boja u HTML-u za više detalja.

URL

URL je adresa dokumenta ili datoteke. Sadrži nekoliko dijelova, od kojih nisu svi obavezni. To su protokol, ime hosta, port, staza, string upita i hash. U tabeli. 2 navodi URL parametre sa njihovim opisom.

U zavisnosti od prisutnosti određenih parametara, razlikuju se apsolutne i relativne adrese. Apsolutna adresa sadrži port i ime hosta, relativna adresa sadrži putanju do dokumenta. Niz upita i hash mogu se dodati bilo kojoj vrsti adrese. Ako URL sadrži samo hash, tada će trenutni dokument skočiti na element sa id="hash_name" . U ovom slučaju heš u atributu id nije napisan.

Na URL utiče atribut href, adresa dokumenta, uzimajući to u obzir, može se pokazati različitom od one koja je eksplicitno postavljena.

Pitanja za provjeru

1. Kolya je napisao pogrešan broj u sljedećem kodu, ali validator nije vratio nikakvu grešku. Zašto?

2. Dasha je koristila broj 12g5 u liniji

Ali Chrome pretraživač nije pokazao nikakav rezultat. Zašto?

3. Koliko načina postoji u HTML-u za postavljanje boje na narandžastu?

Sačuvajte ovu stranicu za testiranje primjera u nastavku.

Biblioteka jQuery vam omogućava da dobijete i postavite vrijednosti atributa elemenata sadržanih u jQuery objektu. jQuery metode za rad s atributima opisane su u donjoj tabeli:

Ako attr() metoda pozvan s jednim argumentom, jQuery vraća vrijednost navedenog atributa za prvi element u odabranom skupu. Relevantan primjer je prikazan u nastavku:

$(function() ( var srcValue = $("img").attr("src"); console.log("Vrijednost atributa: " + srcValue); ));

U ovoj skripti biramo sve img elemente u dokumentu, a zatim koristimo metodu attr() da dobijemo vrijednost atributa src, koji nam, kada se pročita, daje string. Sljedeći izlaz je prikazan na konzoli:

Dobijanje vrijednosti atributa za sve elemente sadržane u jQuery objektu postiže se zajedničkim korištenjem metoda each() i attr():

$(function() ( var srcValue = $("img").each(function(indeks, element) ( console.log("Vrijednost src atributa: " + $(this).attr("src")); ) ); ));

Ova skripta koristi funkciju $() za kreiranje jQuery objekta iz HTMLElement objekta koji je proslijeđen kao argument funkciji. Ovaj objekat sadrži jedan element koji je idealan za metodu attr().

Postavljanje vrijednosti atributa

Ako se metoda attr() koristi za postavljanje vrijednosti atributa, tada se promjena primjenjuje na sve elemente sadržane u jQuery objektu. Dakle, u ovom slučaju, metoda se ponaša drugačije nego kod čitanja atributa, kada se vraća samo vrijednost atributa jednog elementa. Prilikom postavljanja atributa, metoda attr() vraća jQuery objekat, što znači da se može povezati.

Primjer skripte koja postavlja vrijednost atributa prikazan je u nastavku:

$(function() ( $("img")..png"); ));

Ova skripta bira sve img elemente u dokumentu i postavlja atribut src na vezu do slike lily.png. Zadata vrijednost se primjenjuje na sve odabrane elemente, kao što je prikazano na slici:

Postavljanje više atributa

Možete postaviti vrijednosti više atributa jednim pozivom metode attr(), prosljeđujući joj objekt kao argument. Svojstva takvog objekta tumače se kao imena atributa, a vrijednosti svojstava se tumače kao vrijednosti atributa. Ovaj objekt se naziva objekt mape. Relevantan primjer je prikazan u nastavku:

$(function() ( var attrValues ​​= ( src: "http://website/downloads/jquery/lily.png", style: "border: debela puna crvena" ); $("img").attr( attrValues) ; ));

Ova skripta kreira objekt koji definira svojstva pod nazivom src i style. Zatim se odabiru img elementi u dokumentu, a objekt prikaza se prosljeđuje metodi attr(). Prikaz stranice u prozoru pretraživača prikazan je na slici:

Dinamičko postavljanje vrijednosti atributa

Vrijednosti dodijeljene atributima mogu se odrediti u vrijeme skripte prosljeđivanjem funkcije kao argumenta metodi attr(). Relevantan primjer je prikazan u nastavku:

$(function() ( $("img").attr("src", function(index, oldVal) (if (oldVal.indexOf("rose") >.png"; ) else if ($(ovo). closest("#row2").length >.png"; ) )); ));

Argumenti proslijeđeni navedenoj funkciji su indeks elementa koji se obrađuje u skupu i bivša vrijednost atributa. Ova varijabla se odnosi na trenutno obrađeni HTMLElement objekt. Ako želite promijeniti atribut, tada funkcija mora vratiti string koji sadrži novu vrijednost. Ako se ne vrati nikakav rezultat, tada se koristi prethodna vrijednost atributa. U ovom primjeru, funkcija se koristi za selektivnu promjenu slika koje prikazuju img elementi.

Uklanjanje atributa

Atributi se mogu ukloniti (poništiti) korištenjem metode removeAttr(), kao što je prikazano u primjeru ispod.

Kako postaviti ili promijeniti vrijednost atributa koristeći jQuery

Biblioteka jQuery pruža mogućnost postavljanja ili promjene vrijednosti atributa na dva načina. Metoda .attr() se koristi za postavljanje i promjenu vrijednosti atributa. Već smo govorili o ovoj metodi - osim instalacije ili promjene, pomoću ove metode možemo.

Sintaksa metode .attr() za postavljanje/promjenu vrijednosti

• attr(ime, vrijednost)
  • Postavlja navedeni atribut na datu vrijednost za sve elemente u jQuery objektu.
• Parametri
  • name — (String) Ime atributa koji treba postaviti.
  • vrijednost - (String | Broj | Boolean | Funkcija) Određuje vrijednost atributa, koji može biti bilo koji JavaScript izraz. Bilo koja vrijednost osim funkcije se pretvara u string. Funkcija se poziva za svaki element u skupu, prosljeđujući indeks elementa i trenutnu vrijednost atributa sa datim imenom u elementu. Povratna vrijednost funkcije postaje vrijednost atributa.
• vraća
  • jQuery kolekcija.

Primjer upotrebe:

$("#my_image").attr("title", "Moja slika");

Prva opcija korištenjem metode na prvi pogled izgleda jednostavno, ali nije! Kao što je već shvaćeno, drugi parametar (vrijednost) metode .attr() uzima vrijednost koja će biti postavljena. vrijednost može biti bilo koji JavaScript izraz koji će na kraju vratiti string.

Postaje mnogo zanimljivije kada je parametar vrijednosti ugrađena funkcija ili referenca na funkciju. U takvim slučajevima, funkcija se poziva za svaki dohvaćeni element s povratnom vrijednošću funkcije koja se koristi kao vrijednost atributa. Kada se funkcija pozove, dva parametra joj se prosljeđuju. Jedan od njih sadrži indeks elementa u skupu zasnovan na nuli, a drugi sadrži trenutnu vrijednost atributa s imenom elementa. Osim toga, element se postavlja kao kontekst funkcije (ovo) da ga pozove. Ovo omogućava funkciji da prilagodi svoju obradu na osnovu stavke - glavna prednost upotrebe na ovaj način.

Primjer upotrebe kao vrijednosti funkcije .attr():

$("").attr("title", function(index, previousValue) (return previousValue + "Ja sam element " + index + " i moje ime je " + (this.id || "unset"); ));

Ovom metodom na stranici se nalaze svi HTML elementi koji imaju atribut title, te mijenjamo atribut svakog elementa. Promjena se vrši dodavanjem postojeće vrijednosti niza sastavljenog pomoću indeksa elementa u DOM-u i ID-a atributa svakog pojedinog elementa, ako postoji, ili na drugi način stringa 'unset' (omogućava vam da resetujete sva podešavanja).

Drugi slučaj upotrebe metode .attr() je postavljanje/promjena vrijednosti više atributa odjednom.

Sintaksa metode koja može promijeniti vrijednosti nekoliko atributa odjednom

• atribut(atributi)
  • Koristi svojstva i vrijednosti specificirane od proslijeđenog objekta za postavljanje odgovarajućih atributa za sve elemente odgovarajućeg skupa.
• Parametri
  • ime— (String) Ime atributa koji treba postaviti.
  • atributi— Objekt čija se svojstva kopiraju kao atributi svim elementima u skupu.
• vraća
  • jQuery kolekcija.

Sa ovom opcijom, koristeći metodu attr(), možete vrlo brzo promijeniti ili postaviti vrijednost nekoliko atributa u svim elementima skupa. Metoda uzima jedan parametar i to mora biti objekt. Svojstva objekta su imena onih atributa sa kojima želimo da radimo.

Primjer upotrebe:

$("input").attr((vrijednost: "", čuvar mjesta: "Pretraži stranicu", naslov: "Molimo unesite vrijednost" ));

Pogledajmo gornji primjer. Nalazimo se na stranici svih ulaznih elemenata i mijenjamo vrijednosti, placeholder i atribute naslova svih pronađenih elemenata, ako postoje, a ako ne, onda ih dodajte.

A UPOZORENJE

Promjena atributa tipa elementa unosa ili gumba koji je kreiran putem metode document.createElement() rezultira izuzetkom u Internet Exploreru 6 - 8.

Posljednje ažuriranje: 1.11.2015

U prethodnom poglavlju naučili smo kako da dobijemo elemente koristeći selektore i razne metode, kako da preciziramo selekciju, ostavljajući samo potrebne elemente u njoj. Međutim, sam odabir bi bio nevažan da jQuery ne podržava manipulaciju odabirom. Pa hajde da vidimo koju manipulaciju elementima možemo da uradimo sa jQuery-jem.

Atributi i svojstva elementa

Biblioteka jQuery nam pruža alate za manipulaciju svojstvima i atributima elemenata. Ali prije nego što pređemo na stvarne jQuery metode, vrijedno je napomenuti kako se svojstva i atributi razlikuju.

Atributi su elementi označavanja elemenata, kao što su id, stil, klasa i niz drugih. Svojstva, s druge strane, predstavljaju elemente javascript objekata.

Uprkos ovoj razlici, postoji mapiranje između svojstava i atributa. Dakle, id atribut će odgovarati svojstvu id. Na primjer, imamo link:

To jest, prikazat će vrijednost atributa id na konzoli. Istovremeno, nemaju svi za sve atribute klase istog imena. Na primjer, atribut klase odgovara svojstvu className.

Promijenite svojstva

Za rad sa svojstvima, jQuery obezbeđuje metod prop(). Da bismo dobili vrijednosti svojstva, trebamo proslijediti ime svojstva ovoj metodi. Na primjer, ovako možemo dobiti sve URL-ove linkova na stranici:

$("a").each(function(index,elem)( console.log($(elem).prop("href")); ));

Da biste promijenili vrijednost svojstva, jednostavno prenesite novu vrijednost kao drugi parametar:

$("a").first().prop("href","33.html");

Uklanjanje svojstava

Da uklonimo svojstva, možemo koristiti metodu removeProp("property_name"):

$("a").first().removeProp("href");

Nakon toga, svojstvu će biti dodijeljena nova vrijednost: undefined, što će ukazati da svojstvo nije definirano.

Rad sa atributima

Rad sa atributima je na mnogo načina sličan radu sa svojstvima. Dakle, da bismo dobili vrijednost atributa elementa, moramo koristiti metodu attr("attribute_name"):

$("a").each(function(index,elem)( console.log($(elem).attr("href")); ));

Akcija ove metode je slična onoj datoj za prop metodu: prikazivanje svih adresa veza na konzoli.

I prosljeđivanjem neke vrijednosti kao drugog parametra attr metodi, možete postaviti novu vrijednost atributa:

$("a").first().attr("href","33.html");

I također da uklonimo vrijednosti atributa, možemo koristiti metodu removeAttr("attribute_name"):

$("a").first().removeAttr("href");

Imajte na umu da ako je u slučaju uklanjanja svojstva putem removeProp metode ostao atribut koji odgovara svojstvu, samo što mu je dodijeljena vrijednost svojstva, odnosno nedefinirana, onda kada se atribut ukloni putem removeAttr metode, atribut se uklanja iz oznake elementa.

html5 prilagođeni atributi

HTML5 je uveo funkcionalnost kao što su prilagođeni atributi. Njihova suština je da na element možemo primijeniti dodatne atribute koji će pohraniti neku dodatnu vrijednost. Slični atributi počinju prefiksom podaci-, nakon čega slijedi stvarni naziv atributa i njegova vrijednost. Na primjer, u sljedećem primjeru, dodajem atribut data-year koji će pohraniti godinu:

• Java
• C/C++

Za rad s takvim atributima koristite metodu podataka. Ima sljedeće slučajeve upotrebe:

data("ime atributa") : Dobiva vrijednost atributa prvog elementa u skupu. Ime atributa bez prefiksa se prenosi kao parametar podaci-

Dakle, možemo dobiti vrijednost atributa iz prethodnog primjera ovako:

Console.log($("ul").data("year"));

data() : Vraća javascript objekat koji sadrži skup atributa i njihovih vrijednosti kao parove ključ/vrijednost.

Na primjer, recimo da imamo element sa dva atributa:

Tada bi metoda data() vratila objekat (opis:"lang", godina:"2010") . A da biste dobili vrijednost pojedinačnog atributa, možete napisati ovo:

Console.log($("ul").data().year);

data("attribute", "new value") : postavlja vrijednost atributa na niz koji je proslijeđen kao drugi parametar:

$("ul").first().data("godina", "2012");

Cijeli javascript objekt također može djelovati kao nova vrijednost, a ovaj atribut će sadržavati cijeli objekt kao vrijednost:

$("ul").first().data("lang", ( stopa: "tiobe", godina: 2012));

Ako želimo ukloniti atribut, onda moramo koristiti metodu removeData("attribute_name").