Selectarea elementelor de pagină

Dă-mi clic

Buna ziua tuturor!

Un alt paragraf. dar deja cu clasa.

Acest container este SPAN.

Punctul cu identificatorul
Și acest container este SPAN în interiorul lui.

Formular pentru introducerea acreditărilor

nume



parolă





Îmi folosesc computerul




Folosesc un computer comun








Salvați acreditările mele pe acest computer

Acest tip de pagină se deschide în fața noastră.

Selectați "Consola" din meniul orizontal.

Cu comanda $ ("# bar"); găsiți toate elementele cu identificatorul #bar.

După introducerea codului, apăsați tasta Enter și veți vedea următorul rezultat:

Rezultatul obținut indică faptul că în documentul nostru există doar un element cu identificatorul #bar. și anume p.

Selectarea descriptorilor după numele clasei

La fel de rapid ca tipul de identificator, putem selecta elemente în funcție de clasa sau clasele atribuite descriptorilor. Pentru a face acest lucru, trebuie să specificați numele clasei cu o perioadă (.) Înainte de aceasta:

Puteți selecta toate elementele cu clasa .foo utilizând următoarea comandă:

Consola va afișa următorul rezultat:

Selectarea elementelor după tipul descriptorilor

Pentru a selecta elementele după tipul descriptorilor, specificați numele descriptorului ca selector, de exemplu p, div, span:

Pentru a selecta toate paragrafele

introduceți următoarea comandă:

Consola va afișa următorul rezultat:

Selectori clarificați cu selectori combinați

Există situații în care doriți să selectați numai descriptorii de un anumit tip cu o anumită clasă. Acest lucru se poate face folosind o combinație de descriptor și de tip de clasă în selector.

Introducem următoarea comandă în consola, selectând eșantioane numai cu clasa foo.

Nu trebuie să existe un spațiu între mâner și clasă în cod.

După cum puteți vedea din rezultatul de mai jos, elementul de deschidere nu a fost selectat, deși are clasa foo.

Selectori de grup

În cazurile în care trebuie să accesați mai multe seturi de elemente, se folosesc selectori de grup. De exemplu, pentru a selecta mostrele din clasa foo și toate elementele care au identificatorul #bar, vom folosi următoarea comandă:

Această comandă va returna elemente care corespund cel puțin unuia dintre selectorii specificați în el.

Selectori ierarhici

Uneori, capacitatea de a selecta obiecte DOM pe baza tipului de element, clasă sau identificator este inadecvată. În mod special, este posibil să avem nevoie să accesăm elemente care se află în interiorul unui element dat, vecine cu el sau sunt localizate după el într-un alt loc din document. De exemplu, o astfel de problemă apare dacă este necesar, pentru a elimina o anumită clasă activă a tuturor elementelor de meniu cu excepția unuia, unde a avut loc datele introduse de utilizator, elimina toate elementele directoare selectate din listă sau schimbați elementul neuporyadochnogo shell atribute în selectarea elementului de formular.

Selectarea elementelor copil

Selectarea descendenților, i. E. elementele conținute în alte elemente, numite strămoși, sunt implementate utilizând un design care include un selector de strămoși, un spațiu și un descendent:

Pentru a selecta toate elementele de span. care sunt descendenți ai elementului corpului. executați următoarea comandă în consola:

Această comandă va returna toate elementele span. conținute în corpul documentului, deși sunt, de asemenea, în interiorul descriptorilor paragrafului.

Selectarea elementelor copil

Selectorul elementului copil efectuează o selecție mai specifică a elementelor în comparație cu selectorul pentru copii. Selectează numai elemente care sunt descendenți imediați ai elementelor strămoșii (părinți). Pentru a selecta un element copil, se utilizează un construct care include selectorul elementului părinte, simbolul "mai mult" (>) și selectorul elementului copil (copil):

Să încercăm să selectăm în fișierul text toate elementele span, care sunt descendenți direcți ai elementului corpului:

Pentru că nu există un singur element spsn? care ar fi conținut direct în elementul corpului, ieșirea va fi goală.

Selectăm toate elementele span care sunt descendenți imediați ai elementelor p:

Concluzia corespunzătoare este următoarea:

Selectați următorul element

Uneori, într-un scenariu, poate fi necesar să selectați următorul element din structura DOM. Designul acestui selector include o indicație a elementului definit ca inițial (aici puteți folosi orice selector de șabloane), semnul plus (+) și selectorul care selectează elementul definit ca fiind următoarele:

Să verificăm cum funcționează tastând următoarea comandă:

Deoarece în documentul nostru există doar un element cu clasa foo, va fi returnat doar un element paragraf.

Apoi, vom crea o interogare mai generală și vom selecta paragrafele, fiecare dintre acestea urmând imediat după orice paragraf:

Marcajul nostru conține patru paragrafe, iar pentru fiecare dintre acestea, cu excepția ultimului, este următorul paragraf, astfel că setul de rezultate va conține trei elemente:

Selectarea elementelor de îngrijire medicală

Toate elementele care sunt conținute în același element (au un strămoș comun imediat) sunt sora unii altora. Selectarea celulelor care alăptează se realizează în mod similar ca selectarea următoarelor elemente, cu excepția faptului că selectorul va prelua toate frații, sunt plasate după inițiale, nu numai următorul, adică Cel care urmează imediat după cel inițial.

Pentru a selecta elementele sora, trebuie să specificați selectorul elementului inițial, simbolul "tilde" (

) și selectorul de elemente care alăptează:

Pentru a găsi toate elementele care sunt sora paragrafului cu clasa foo, executați următoarea comandă:

Rezultatul va fi așa.

Selectori JQuery

Tabel. Toate utilizările posibile pentru selectori sunt enumerate în tabelul de mai jos:

Articole similare

• Selectați un element după clasă

• Nu voi merge în același lift cu un câine - (c) - pagina 13 - Littleone 2018-2018

• Modificarea fundalurilor paginii