În această lecție vom învăța cum să găsim elemente pe o pagină după atribut.

În jQuery, selectarea elementelor după atribut se face conform specificației CSS.

Când utilizați atribute pentru a selecta elemente, rețineți că unele atribute pot avea mai multe valori separate printr-un spațiu.

De exemplu:

... ... ... // Selectați elementele a care au atributul $("a");

Valoarea atributului dintr-o expresie selector trebuie să fie cuprinsă între ghilimele. Acest lucru se face într-unul dintre următoarele moduri:

• ghilimele duble între ghilimele simple: $("a") .
• ghilimele simple în ghilimele duble: $("").
• ghilimele simple scăpate în ghilimele simple: $("a") .
• ghilimele duble scăpate în interiorul ghilimelelor duble: $("a") .

În jQuery, puteți căuta elemente după atribut folosind diferiți selectori. În plus, puteți utiliza o combinație de mai mulți selectori de atribute pentru a selecta elemente. În acest caz, vor fi selectate doar acele elemente care se potrivesc cu fiecare dintre selectoarele specificate.

Selectează elementele care au atributul specificat (nume) cu o valoare egală cu șirul (valoarea) dat sau începând cu șirul (valoarea) dat urmat de o cratimă.

De exemplu, selectați toate elementele div care au un atribut de clasă cu o valoare egală cu alertă sau începând cu alert- .

...

... ... ... ... ... //Selectează toate elementele div care au un atribut de clasă //cu valoarea alertă sau cu o valoare care începe cu alert- $("div");

Selectează elementele care au atributul specificat (numele) cu o valoare care conține subșirul (valoarea) specificat.

De exemplu: selectați toate elementele care au un atribut href care conține subșirul youtube ca valoare:

...... ... //Selectează elemente care au un atribut href cu o valoare //conținând subșirul youtube $("");

Selectează elementele care au atributul specificat (numele) cu o valoare care conține valoarea dată (valoarea) ca una dintre valorile acesteia (adică, separate de o altă valoare printr-un spațiu) sau egală cu acea valoare (valoare).

De exemplu, selectați toate elementele care au un atribut de clasă cu o valoare care conține valoarea btn ca una dintre valorile sale (adică separate de o altă valoare printr-un spațiu) sau egală cu btn:

... ... Trimite ... ... $("a");

Selectează elementele care au atributul specificat (numele) cu o valoare care se termină cu valoarea dată (valoarea).

De exemplu, selectați toate elementele care au un atribut href care se termină în „.zip”.

... ... ... //selectează toate elementele a căror valoare de atribut href se termină cu .zip $("a");

Selectează elementele care au atributul specificat (numele) setat la valoare .

De exemplu, selectați toate elementele care au un atribut tip cu butonul valoare:

Informații despre comandă $("");

Selectează elemente care nu au atributul specificat (nume) sau care au atributul specificat (nume) dar nu conține valoarea specificată (valoarea).

De exemplu, selectați elemente care nu au un atribut rel sau care au unul, dar nu conține o valoare nofollow.

... ... ... ... $("a");

Selectează elementele care au atributul specificat (numele) cu o valoare care începe cu valoarea dată (valoarea).

De exemplu, selectați toate elementele care au o clasă btn și un atribut href cu o valoare care începe cu „http”.

...... ... $("a.btn");

Selectează elementele care au atributul specificat (nume). Valoarea acestui atribut (nume) poate fi orice.

De exemplu, selectați imagini (img) care au un atribut alt:

$("img");

- selectează elemente ale căror atribute specificate (nume1 și nume2) au valori corespunzătoare (Valoare1 și Valoare2).

Dacă este necesar, puteți utiliza combinații de selectoare de atribute diferite pentru a selecta elemente. În acest caz, vor fi selectate doar acele elemente care se potrivesc tuturor selectoarelor specificate:

$(""); //attr1 - selector de atribut 1 //attr2 - selector de atribut 2 //attrN - selector de atribut N

De exemplu, selectați un element care are un atribut id, un atribut href care începe cu http și un atribut de clasă cu o valoare care conține btn ca una dintre valorile sale sau egală cu btn:

... ... $("a");

Metoda are trei cazuri de utilizare:

Caută elemente din elementele selectate, lăsând pe cele conținute în obiectul jQuery dat.

Caută un element elementîn interiorul elementelor selectate. Parametru element este specificat ca element DOM.

Exemple de utilizare:

Exemplele de mai sus sunt bune doar ca o demonstrație a capabilităților metodei .find(). De exemplu, este mai corect să cauți elementele span care se află în interiorul div-urilor astfel:

$("div span")

Find() este convenabil de utilizat atunci când unele elemente au fost deja găsite și trebuie să căutați elemente din ele:

// găsiți toate elementele ul de pe pagină var $ulElements = $("ul"); // ----- ceva cod... ----- // găsi li elemente cu clasa userBox, în interiorul $ulElements $ulElements.find("li.userBox");

De asemenea, .find() este convenabil pentru utilizare în lanțuri de metode:

$("ul") // găsiți toate elementele ul din pagină addClass("listElements") // adăugați clasa ul listElements .find("li.userBox") // găsiți elementele li cu clasa userBox în interiorul ul" ov.remove(); // și ștergeți-le

jQuery acceptă numai selectoare CSS care selectează Elemente DOM. De exemplu, :visited , :hover și :first-line nu sunt acceptate.

Selectoarele de bază vă sunt familiare dacă ați creat vreodată cel puțin un șablon CSS. Probabil că veți folosi acești selectori în 90% din timpul când utilizați jQuery:

De asemenea, puteți combina mai multe selectoare într-unul singur folosind o virgulă. jQuery va selecta toate elementele care se potrivesc cu oricare dintre selectori. De exemplu:

// Selectează toate div-urile cu class.myClass, precum și toate paragrafele var selectedElements = $("div.myClass, p");

Selectoarele de bază sunt excelente atunci când trebuie să selectați toate paragrafele dintr-o pagină sau elementul pe care doriți să îl selectați are Clasa CSS sau ID.

Cu toate acestea, uneori trebuie să selectați un anumit element care nu are o clasă sau un ID și nu există nicio modalitate de a adăuga pur și simplu clasa sau ID-ul la acest elementîn marcaj. Această situație poate apărea atunci când utilizați un CMS cu un fix șablon HTML sau atunci când lucrați cu conținut generat de utilizatori.

În această situație, este posibil să restrângi zona de selecție folosind atributul element HTML, care trebuie selectat. De exemplu, puteți alege:

• Imagine prin atributul src
• Link după atributul href
• Toate câmpurile de introducere a formularului care au atributul type="checkbox".

jQuery are mulți selectori care pot fi utilizați pentru a selecta elemente după atribut:

Puteți combina selectoare de atribute pentru a restrânge selecția. De exemplu:

// Selectați doar acele imagini care au 300 px lățime și 200 px înălțime var selectedImagini = $("img");

Selectorul „Atributul conține un prefix” pare ineficient, dar este conceput pentru a gestiona atribute ale limbii, cum ar fi lang="en" și lang="en-US" .

Dacă nu este posibilă restrângerea zonei de selecție după selectori și atribute de bază, atunci puteți „sapa” în conținutul elementului pentru a determina dacă este potrivit pentru selecție sau nu. jQuery are 4 selectori pentru această sarcină:

Următorul exemplu arată cum să utilizați :contains() , împreună cu un selector de clasă, pentru a selecta paragrafe care au o anumită clasă, cu condiția suplimentară ca conținutul unei anumite linii (sau linii) să fie prezent:

// Selectați toate paragrafele care au clasa "intro" // și care conțin și textul "MegaWidget" var selectedElements = $("p.intro:contains("MegaWidget")"); // Selectați toate paragrafele care au clasa "intro" // și care conțin atât "MegaWidget" cât și "WonderWidget" var selectedElements = $("p.intro:contains("MegaWidget"):contains("WonderWidget")");

O altă modalitate de a selecta elemente în jQuery este să luați în considerare modul în care acestea se relaționează între ele pe pagină. Probabil că știți mulți dintre acești selectori din lucrul cu CSS:

Pe lângă sarcină număr specific copil folosind:nth-child() , puteți specifica par (pentru a selecta toți copiii cu numere pare), impar (pentru a selecta toți copiii cu numere impar) sau o expresie (de exemplu, „li:nth-child(3n+) 2) " selectează fiecare al treilea element din listă și începe numărarea de la al doilea element).

Următorul exemplu selectează prima celulă din toate rândurile impare din tabel care are id-ul „myTable”:

Var SelectedElements = $("tabel#myTable tr:nth-child(odd) > td:first-child");

Elementele de formular au unele proprietăți specifice care necesită utilizarea unor trucuri pentru a le selecta. De exemplu, casetele de selectare, împreună cu multe alte tipuri de câmpuri, sunt elemente de intrare. Astfel, pentru a selecta casetele de selectare într-un formular, trebuie să utilizați $("input") .

De asemenea, identificarea elementelor selectate dintr-o listă de selectare sau a casetelor de selectare bifate dintr-un formular poate fi plictisitoare.

Din fericire, jQuery oferă mai multe selectoare specifice formelor care fac viața mai ușoară:

Pe lângă ceea ce este scris, puteți folosi, de exemplu, $("input:checkbox") pentru a selecta toate casetele de selectare de pe pagină. Cu toate acestea, $("input:checkbox") este mai rapid, deoarece jQuery poate folosi Funcția JavaScript getElementsByTagName() pentru a vă limita rapid căutarea doar la elementele introduse. Acest lucru este valabil pentru jQuery în general - pentru a vă accelera codul, limitați întotdeauna sfera de aplicare a selectoarelor acolo unde este posibil. De exemplu, $("*") este foarte lent, deoarece jQuery trebuie să găsească fiecare element de pe pagină.

Următorul exemplu caută un formular care are un atribut de acțiune cu valoarea „mailform.php” , apoi selectează toate butoanele radio bifate din formular:

Var selectedElements = $("form input:radio:checked");

Uneori trebuie să selectați un element despre care știți că se află într-un set de elemente selectate anterior. De exemplu, trebuie să selectați primul paragraf, care are clasa „myClass” . Pentru a complica exemplul, să presupunem că trebuie să selectați toate elementele dintr-o listă care are clasa „myClass” și apoi să selectați al 5-lea element din setul rezultat.

jQuery are șapte selectori care pot fi utilizați pentru a limita domeniul de căutare pe baza poziției elementului:

Rețineți că acești selectori nu funcționează la fel ca :first-child , :last-child , etc. De exemplu, li.myClass:first-child selectează numai elementul din listă cu clasa „myClass” care este primul element din lista corespunzătoare. Și li.myClass:mai întâi găsește toate elementele din listă de pe pagină care au clasa „myClass” și apoi selectează primul element din listă din setul de rezultate ale căutării.

Următorul exemplu selectează toate celulele din primele două rânduri ale unui tabel care are ID-ul „myTable”:

Var SelectedElements = $("table#myTable tr:lt(2) > td");

Dacă niciunul dintre selectorii enumerați nu v-a ajutat să selectați elementele de care aveți nevoie, încercați să utilizați următorii selectori:

Următorul exemplu selectează toate elementele din pagină, cu excepția titlurilor h1:

Var selectedElements = $(":header:not(h1)");

În acest articol, ne-am uitat la modul de selectare a elementelor folosind selectoare jQuery. Au fost demontate următoarele tipuri selectoare:

• Selectori de bază care vor fi folosiți de cele mai multe ori lucrând la proiect
• Selectori de atribute pentru selectarea elementelor pe baza numelor de atribute și a valorilor acestora
• Selectori de conținut, care vă permit să selectați elemente în funcție de conținutul acestora
• Selectori ierarhici, care pot fi utilizați pentru a selecta elemente pe baza relațiilor lor cu alte elemente din pagină
• Selectoare de câmpuri de formular, care oferă o modalitate ușoară de a selecta diferite elemente de câmpuri de formular
• Selectoare de poziție pentru selectarea elementelor în funcție de poziția lor într-un set de elemente
• Selectori suplimentari, cum ar fi :not() pentru a selecta elementele care nu se potrivesc cu selectorul și :animated pentru a selecta elementele animate

Ultima actualizare: 1/11/2015

Una dintre funcționalitățile importante ale jQuery este selectarea elementelor. Pentru a face ceva cu elemente, a le manipula, a le aplica metode jQuery, mai întâi trebuie să le obținem. Biblioteca ne oferă o modalitate convenabilă de a selecta elemente pe baza selectoarelor. Trebuie doar să trecem un selector la funcția jQuery și putem obține elementul de care avem nevoie care se potrivește cu acest selector. De exemplu, dacă trebuie să obținem toate elementele img, atunci putem folosi următoarea expresie: $("img") . În acest caz, „img” va acționa ca un selector.

Să ne uităm la selectorii jQuery de bază care sunt utilizați pentru a selecta elemente.

Putem folosi mai multe selectoare deodată pentru a personaliza selecția elementelor mai detaliat. De exemplu, avem o pagină web ca aceasta:

Dicţionar mondial jQuery

În acest caz, folosim selectorul #tab, adică selectăm tabelul nostru, care are id=tab. Expresia css(„culoarea de fundal”, „argintiu”) stabilește culoarea elementului - în acest caz, argintiu.

Lansând această pagină într-un browser web, vom obține următoarea imagine:

Dar putem folosi și un set de selectoare pentru a efectua acțiunea mai detaliat. De exemplu, avem nevoie doar de prima linie, care are atributul class="tabhead", să fie umbrită. Apoi putem folosi următorul selector: $("#tab .tabhead") . În acest caz, selectorul va selecta elementul cu class="tabhead" care se află în elementul cu id="tab".

În același timp, putem folosi mai multe selectoare diferite pentru a restrânge selecția, de exemplu: $("div#menu a.redStyle") . De exemplu, acest selector poate găsi următorul element:

Link către site

În acest caz, am folosit un selector ierarhic, ceea ce implică faptul că elementul cu al doilea selector trebuie să fie în elementul cu primul selector. Dar, în plus, putem folosi și o serie de selectori ierarhici:

Pentru a restrânge căutarea, pe lângă selectoarele de bază și ierarhice discutate mai sus, putem folosi selectoare de atribute. În acest caz, jQuery va returna elemente bazate pe valorile și definiția atributelor specificate.

Mai sus am folosit următoarea notație pentru a selecta un element: $(selector). Această expresie a privit prin toate Arborele DOM dacă elementul se potrivește cu selectorul. Cu toate acestea, putem limita căutarea prin aplicarea contextului de căutare. Contextul este un selector în cadrul căruia este necesară selectarea elementelor. De exemplu, avem o pagină web ca aceasta:

Lumea jQuery jQuery(document).ready(function())( $(".open", "div#menu").css("background-color", "silver"); ));

Avem trei link-uri pe pagină, toate au aceeași clasă definită, dar două dintre ele sunt în elementul div și asta vrem să obținem. Apoi folosim expresia $(".open", "div#menu") - aici al doilea parametru selector va fi contextul de selecție. Și rezultatul în acest caz va fi următoarea pagină:

Este important să nu confundați această expresie cu selectarea prin selectoare multiple, de exemplu, $(".open, div#menu ") - acestea sunt expresii diferite care vor da rezultate diferite.