• începând
  • Codificare
    • HTML (16)
    • CSS (13)
    • CSS 3 (5)
    • JavaScript (2)
    • jQuery (9)
    • Sass (3)
  • Despre site
  • Despre mine

Selector ID în jQuery 1

  • Publicat: 14 aprilie 2013
  • Categorie: jQuery

Această lecție va fi mai scurtă decât de obicei. Veți învăța un singur lucru în el. Aceasta este lucrarea selectorului ID în jQuery.

Această lecție se adresează și începătorilor completi. Dacă vă aflați printre ei, voi fi bucuros să vă ajut să învățați ceva nou. Dacă nu sunteți, vă puteți reîmprospăta cunoștințele foarte repede.

Începătorii, în majoritatea cazurilor, pun întrebări simple. În același timp, ei așteaptă răspunsuri elementare. În ultimul timp, observ că atunci când un „începător” are dificultăți cu o anumită sarcină și cere sfatul cuiva „avansat”, al doilea îi oferă o soluție adecvată, dar nu reușește să explice de ce. Adică de-a lungul timpului, „începătorul” creează o „bază de date” de soluții gata făcute care nu se bazează pe înțelegere. La următoarea problemă, pentru care „începătorul” nu are o soluție gata, se întoarce din nou pentru ajutor. Acesta este un ciclu constant în care „începătorul” rămâne un începător (poate cu un progres minim).

Acest lucru trebuie să se oprească.

Înțelegerea corectă a materialului nu se bazează pe soluții gata făcute. Se bazează pe o bază solidă de cunoaștere. Așa cum spune o zicală celebră:

„Dă-i unui om un pește și va mânca într-o zi. Învață-l să pescuiască și va avea mereu mâncare ”.

Prin urmare, de acum înainte, în lecțiile pentru începători, accentul se va pune în întregime pe un singur lucru (maximum două) explicat în cuvintele cele mai simple posibile. Scopul meu va fi să transmit ideea, modul de gândire, de ce, nu următoarea decizie. În acest fel, sper că lecțiile vor deveni mai ușor de înțeles și mai accesibile.

Ce este un selector ID?

(Selector ID pe pagina jQuery)

Acest selector vă permite să selectați un element din pagină folosind valoarea din atributul id. Acest lucru se face după cum urmează:

  • # - sugerează codului că acesta este un selector de id; și
  • valoare - este valoarea atributului id.

Un posibil cod HTML care se potrivește cu selectorul de mai sus este următorul:

Este posibil să observați că #stoinost are aceeași sintaxă ca selectorul de id din CSS. Acest lucru este complet adevărat. Unul dintre lucrurile care fac jQuery atât de ușor de învățat este faptul că puteți utiliza majoritatea selectorilor CSS pe care îi cunoașteți.

Aici este important să rețineți că acest selector selectează un singur element al paginii. Deoarece valoarea id este unic pentru document, utilizarea aceleiași valori în două locuri diferite este interzisă. Acest lucru va invalida documentul. De exemplu:

Cu toate acestea, chiar dacă codul dvs. este similar cu cel de mai sus, jQuery va selecta doar primul titlu h2. Cu toate acestea, este recomandabil să se evite astfel de cazuri.

În ceea ce privește timpul de execuție, selectorul ID este extrem de rapid. Acest lucru se datorează faptului că jQuery folosește funcția JavaScript document.getElementById (), care este super eficient.

Un alt factor de care trebuie să fii atent este utilizarea metacaracterelor speciale! "# $% & '() * +,. /:;? @ [\] ^`

în valoarea id. Vizualizați următorul cod html:

Pentru a selecta acest element, trebuie să „scăpați” de fiecare dintre simboluri. [] p două bare oblice la stânga \\. Selectorul va lua următoarea formă:

Exercițiu

În acest exercițiu vă voi arăta cum funcționează selectorul ID.

pasul 1

Voi crea o pagină cu mai multe titluri, între care voi pune un paragraf text. Fiecare pereche titlu + paragraf va fi inclusă într-un div cu un ID unic. Codul HTML arată astfel:

Codul de aici este destul de clar. Pe linia 8, folosesc Bibliotecile găzduite Google pentru a adăuga jQuery la pagină. Am o lecție specială în care puteți afla mai multe despre acest serviciu.

Pe linia 9 adaug un fișier JavaScript extern la care voi adăuga de fapt tot codul jQuery.

Prefer să folosesc fișiere CSS și JavaScript externe, deoarece face codul mai curat și mai ușor de înțeles. Vă sfătuiesc să utilizați și această tehnică. Acest lucru va îmbunătăți considerabil calitatea codului dvs.!

Pasul 2

În fișierul CSS extern folosesc următorul stil. Acest tutorial nu are legătură cu CSS, așa că nu îi voi acorda prea multă atenție.

selector

Pasul 3

Acum deschideți fișierul js extern și adăugați următorul cod.

Sensul expresiei $ (document). Ready (funcția) este discutat în detaliu în Pasul 5 al exercițiului la lecția „Introducere în jQuery”, așa că nu îl voi mai repeta.

Sunt sigur că chiar și o privire rapidă asupra codului de mai sus este suficientă pentru a vă face o idee bună despre rezultatul scontat. Folosind $ ("# div-edno") selectez div cu id = "div-edno" .

Cu toate acestea, selectarea unui element în sine nu-mi face nici un bine. Beneficiul constă în lucrurile pe care le pot face cu această selecție. Punctul forte al jQuery se află în capacitățile pe care le am la dispoziție.

În acest caz, pot folosi mai multe metode diferite pentru a schimba stilul/comportamentul elementului. Pentru a nu complica lucrurile în continuare, voi folosi metoda .css (). Într-o lecție viitoare, vă voi arăta cum funcționează, dar deocamdată nu îi voi acorda prea multă atenție. Cel mai important lucru de știut este că, cu această metodă, puteți schimba stilul articolului (unul sau mai multe).

Adică codul liniei 2 va adăuga un cadru roșu de 2 px în jurul elementului cu id = "div-edno". Codul liniei 3 va schimba fundalul elementului cu id = "div-dve", iar codul liniei 4 va schimba fundalul elementului cu id = "zaglavie.3" .

Acesta este rezultatul final:

Concluzie

Am încercat să mențin lecția cât mai simplă și mai ușor de înțeles, astfel încât să fie potrivită pentru toți începătorii. Mă îndoiesc că a găsit ceva revoluționar, dar este totuși o negociere bună. Uneori toată lumea are nevoie de asta.

Sper că acest tutorial v-a ajutat să aflați mai multe despre selectorul ID în jQuery. Funcționează destul de eficient, dar vă permite să selectați doar un element al paginii. Pentru a selecta mai multe, trebuie să utilizați un alt tip de selector. O opțiune bună este selectorul de clasă, despre care veți afla în lecția următoare.

Folosiți un selector de identificare în cod sau preferați un alt tip? Care a fost experiența dvs. cu jQuery? Ți s-a părut utilă lecția? Voi fi bucuros să vă aud părerea.

Felicitări, acesta este sfârșitul acestei lecții!
Ca recompensă veți obține o brioșă delicioasă.

Ti-a placut lectia? Împărtășiți-l cu lumea:)