Selectarea elementelor de pagină

Material de referință pentru limbile de programare majore și aspectul site-ului.

O tehnică gata de a crea site-uri dinamice simple și complexe, folosind PHP și MySQL.

Dezvoltarea de site-uri web sub "cheie".

Dezvoltarea de fragmente separate de site-uri, sfaturi cu privire la aspectele legate de aspectul paginilor web și programarea web.

Instrumentul bazat pe web

magazin web

Servicii Web

Grafica web

Resursele web

Selectarea elementelor de pagină

Vrei să ții pasul cu evenimentele care au loc pe site? Abonați-vă pentru a primi ultimele știri și articole.

Uită-te la Google

Selectarea elementelor de pagină

Selectarea elementelor de pagină

Biblioteca jQuery oferă o tehnică puternică pentru selectarea și lucrul cu o colecție de elemente - selectori CSS. Selectorul CSS este doar o instrucțiune care îi spune browserului elementul pentru care se aplică stilul.

Utilizând biblioteca jQuery, selectați unul sau mai multe elemente folosind o comandă obiect special jQuery.

Sintaxa de bază este:

Puteți utiliza practic toți colectorii CSS 2.1 și mulți colectori CSS 3.

Luați în considerare un mic exemplu de utilizare a jQuery. Selectează unul dintre elementele selectorului CSS al paginii #banner și vezi ce se întâmplă.




Selectarea elementelor după ID

Principalii colectori CSS. cum ar fi indexatorii de clasă și de elemente formează nucleul CSS.

Ar fi trebuit să observi că șirul transmis funcției jQuery are același format ca ID-ul selectorului CSS. Deoarece id-ul trebuie să fie unic, ne așteptăm ca un singur element să fie returnat ca rezultat. De acum încolo, jQuery va avea o legătură cu acest element.

Pentru a selecta un element după tipul de identificator, atributul id din sintaxa CSS, trebuie să specificați valoarea id ca selector, precedat de simbolul "lattice" (#).

Pentru a testa și a studia funcționarea de bază a jQuery, creați un fișier cu codul sursă de mai jos.


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




















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

Selectarea elementelor de pagină

Selectați "Consola" din meniul orizontal.

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

Selectarea elementelor de pagină

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

Selectarea elementelor de pagină

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 de pagină

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