Jquery selectând elemente cu nume incomplete. Selectoare și filtre jQuery. Restrângerea setului la elemente care au copii specifici
Salvați această pagină pentru a testa exemplele de mai jos.
În cele mai multe cazuri, lucrul cu jQuery se face în doi pași, urmând același model:
Primul pas este să folosiți funcția $() pentru a selecta un set inițial de elemente de pagină care corespund unui anumit criteriu de selecție, care sunt returnate ca obiect jQuery care le conține;
iar al doilea este de a efectua una sau mai multe operații asupra fiecărui element al mulțimii, conducând la crearea unui set final.
În acest articol ne vom concentra asupra primei etape. Ne vom uita la metodele jQuery care vă permit să gestionați setul selectat și să îi ajustați compoziția exact în conformitate cu sarcini specifice. De obicei, ele pleacă de la un anumit set preselectat de elemente, influențând care se asigură că în el rămân doar elementele cu adevărat necesare.
Extinderea setului de selecțieMetoda add() vă permite să adăugați la un obiect jQuery existent elemente suplimentare. Diverse opțiuni Apelurile la această metodă sunt date în tabelul de mai jos:
La fel ca multe metode jQuery, metoda add() returnează un obiect jQuery care poate fi folosit pentru a apela alte metode, inclusiv apelurile ulterioare la metoda add(). Un exemplu de utilizare a metodei add() pentru a extinde un set găsit anterior este dat mai jos:
$(function() ( var labelElems = document.getElementsByTagName("label"); var jq = $("img"); $("img:even").add("img").add(jq) .add (labelElems).css("chenar", "gros dublu roșu"); ));
Acest scenariu folosește trei abordări pentru a adăuga elemente la setul inițial: folosirea unui alt selector, utilizarea obiectelor HTMLElement și utilizarea unui alt obiect jQuery. După ce a construit setul potrivit obiecte, numim noi metoda css(), stabilindu-le proprietățile sensuri de frontieră, asigurându-se că inscripțiile sunt înconjurate de rame desenate cu linii duble groase, așa cum se arată în figură:
Restrângerea setului de elemente selectateExistă o serie de metode care vă permit să eliminați elemente dintr-un set existent. Al lor scurta descriere prezentate în tabelul de mai jos. Fiecare dintre aceste metode returnează un nou obiect jQuery care conține un set redus de elemente. Obiectul jQuery pe care este apelată metoda rămâne neschimbat:
| eq(index) | Exclude toate elementele dintr-un set, cu excepția elementului de la indexul specificat |
| filtru (condiție) | Elimină elemente dintr-un set care nu îndeplinesc o condiție specificată. Descriere detaliata mai jos sunt prezentate tipuri valide de argumente |
| primul() | Elimină toate elementele dintr-un set, cu excepția primului |
| are(), are(jQuery), are(HTMLElement), are(HTMLElement) |
Exclude din set elementele care nu au copii care să se potrivească cu selectorul specificat sau cu obiectul jQuery sau copii care nu includ Obiecte specificate HTMLElement |
| ultimul() | Elimină toate elementele dintr-un set, cu excepția ultimului |
| nu (condiție) | Exclude dintr-un set toate elementele care corespund unei condiții specificate |
| felie (început, sfârșit) | Elimină dintr-un set toate elementele ai căror indici sunt în afara intervalului specificat |
Cele mai simple metode care pot fi folosite pentru a reduce setul de elemente selectate sunt metodele first(), last() și eq(). Aceste trei metode vă permit să selectați un anumit element pe baza poziției acestuia în setul de elemente conținute în obiectul jQuery. Un exemplu corespunzător este dat mai jos:
$(function() ( var jq = $("label"); // selectând primul element și influențându-l jq.first().css("border", "gros dublu roșu"); // selectând ultimul element și influențându-l jq.last().css("border", "gros dublu verde"); // selectând un element cu indicele specificat și influențându-l jq.eq(2).css("border", "thick double" negru" "); jq.eq(-2).css ("chenar", "gros dublu negru"); ));
Rețineți că metoda eq() este apelată de două ori. Dacă argumentul este pozitiv, numărarea indexului începe de la primul element din setul conținut în obiectul jQuery. Dacă argumentul este negativ, indicii sunt numărați direcție inversă, începând de la ultimul element. Rezultatul scriptului este prezentat în figură:
Dacă doriți să păstrați numai elemente din setul selectat ai căror indici aparțin unui interval dat, utilizați metoda slice(). Un exemplu corespunzător este dat mai jos:
$(funcție() ( var jq = $("etichetă"); jq.slice(0, 2).css("chenar", "gros dublu negru"); jq.slice(4).css("chenar" , "roșu solid gros"); ));
Metoda slice() ia ca argumente valorile indexului de început și de sfârșit. Indicii sunt numărați de la zero, iar elementul căruia îi corespunde indicele final nu este inclus în setul de rezultate. Prin urmare, argumentele 0 și 2 corespund selecției primelor două elemente.
Dacă al doilea argument este omis, atunci selecția elementelor continuă până la sfârșitul setului existent. Prin urmare, utilizarea argumentului unic 4 pentru un set de șase elemente corespunde selectării ultimelor două elemente (indexate 4 și 5). Rezultatul este prezentat în figură:
Metoda filter() vă permite să setați o condiție. Elementele care nu îndeplinesc condiția specificată sunt excluse din set. Opțiuni posibile folosind metoda filter(), corespunzătoare în diverse moduri condițiile de setare sunt descrise în tabelul de mai jos:
Un exemplu de utilizare a tuturor celor patru opțiuni pentru specificarea argumentelor metodei filter() este dat mai jos:
$(function() ( // selecția elementelor, în valoare atributul src care // contine sirul "astor" $("img").filter("").css("border", "gros dublu rosu"); // selectarea elementelor care contin sirul "narcisa" var jq = $(""); $("etichetă").filter(jq).css("culoare", "albastru"); // selectarea elementelor care sunt elementul specificat var elem = document.getElementsByTagName("label"); $(„etichetă”).filter(elem).css(„dimensiunea fontului”, „1.5em”); // filtrarea elementelor folosind funcția $("img").filter(function(index) ( return this.getAttribute("src").indexOf("peony.png") > -1 || index == 5; ) ).css(„chenar”, „roșu solid gros”)));
Primele trei metode nu necesită nicio explicație specială. Ei definesc filtre folosind un selector, un alt obiect jQuery și un obiect HTMLElement. A patra tehnică, bazată pe utilizarea unei funcții, necesită explicații suplimentare.
Funcția oferită de jQuery este executată o dată pentru fiecare element al setului conținut în obiectul jQuery. Dacă această funcție returnează true, atunci elementul pe care a fost apelată rămâne în mulțime. Dacă valoarea returnată este falsă, atunci elementul este eliminat din set. Funcția ia un singur argument - indexul elementului pe care este apelată. În plus, această variabilă este setată să indice obiectul HTMLElement curent care este procesat. ÎN în acest exemplu true este returnat atunci când atributul src sau indexul elementului are valorile specificate.
Metoda not() funcționează similar cu metoda filter(), dar inversează procesul de filtrare. Opțiunile posibile pentru apelarea metodei not() sunt similare cu apelarea metodei filter().
Restrângerea setului la elemente care au copii specificiMetoda has() poate fi folosită pentru a păstra în setul de selecție doar acele elemente care au copii specifici, specificate fie de un selector, fie de unul sau mai multe obiecte HTMLElement. Un exemplu de utilizare a metodei has() este dat mai jos:
$(function() ( $("div.dcell").has("img").css ("chenar", "gros solid roșu"); var jq = $(""); $("div.dcell") ").has(jq).css ("chenar", "albastru solid gros"); ));
În acest scenariu, membrii care nu au anumiți copii sunt excluși din setul selectat. În primul caz, când se folosește un selector, elementele care nu au copii img al căror atribut src este egal cu astor sunt eliminate din set. În al doilea caz, folosind un obiect jQuery, același lucru se întâmplă și elementelor care nu au copii cu o valoare a atributului for care conține litera p. Rezultatul scriptului este prezentat în figură:
Metoda map() oferă o modalitate flexibilă de a utiliza un obiect jQuery pentru a crea altul. O funcție este transmisă ca argument la metoda map(). Această funcție este apelată pentru fiecare dintre elementele incluse în obiect sursă jQuery și obiectele HTMLElement pe care le returnează sunt incluse în obiectul jQuery rezultat.
Un exemplu de utilizare a metodei map() este dat mai jos:
$(function() ( $("div.dcell").map(function(index, elem) ( return elem.getElementsByTagName("img"); )).css("border", "gros solid roșu"); $("div.dcell").map(function(index, elem) ( return $(elem).children(); )).css("border", "gros solid albastru"); ));
Acest script efectuează două operațiuni de conversie. Prima dintre ele, care folosește interfata software DOM, returnează primul dintre elementele img care apar în fiecare element al setului. A doua operație, care profită de capacitățile obiectului jQuery, returnează primul element al setului conținut în obiectul jQuery, care este returnat de metoda children() (această metodă returnează nodurile copil ale fiecăruia dintre elementele conținute în obiect jQuery).
Pentru a afla dacă cel puțin unul dintre elementele selectate îndeplinește o anumită condiție, puteți folosi metoda is(). Posibilele utilizări ale metodei is() sunt similare cu metodele de filtrare not() și filter().
Dacă o funcție este transmisă ca argument, atunci jQuery apelează acea funcție pentru fiecare element din obiectul jQuery, trecându-i indexul acelui element ca argument și setând această variabilă să indice elementul însuși. Un exemplu de utilizare a metodei is() este dat mai jos:
$(function() ( var isResult = $("img").is(function(index) ( return this.getAttribute("src").indexOf("rose.png") != -1; )); consola .log("Rezultat: " + isResult); ));
În acest script, verificăm dacă un obiect jQuery conține un element cu o valoare de atribut src care include șirul „rose.png”.
Intoarce-te starea anterioară set modificat de elemente selectatejQuery vă permite să salvați starea setului selectat de elemente atunci când se modifică apelând metode de înlănțuire. Puteți beneficia de această circumstanță folosind două metode descrise în tabelul de mai jos:
Metoda end() poate fi folosită pentru a returna setul selectat anterior, permițându-vă să selectați unele elemente, să-l extindeți sau să-l restrângeți, să efectuați unele operații și apoi să reveniți la setul original, așa cum se arată în exemplul de mai jos:
$(funcție() ( $(„etichetă”).first().css(„chenar”, „albastru solid gros”) .end().css(„dimensiunea fontului”, „1.5em”); )) ;
În acest scenariu, începem prin a selecta toate elementele de etichetă din document. În continuare, restrângem selecția apelând metoda first() (pentru a obține primul element potrivit) și apoi setăm valoarea Proprietățile marginii CSS folosind metoda css().
Metoda end() este apelată în continuare pentru a returna setul de selecție anterior (rezultând că vi se dau din nou toate elementele etichetei, nu doar primul), iar apoi metoda css() este apelată din nou, de data aceasta pentru a seta valoarea a proprietății font-size. Rezultatul scriptului este prezentat în figură.
jQuery este Biblioteca Javascript, ceea ce facilitează lucrul cu DOM, evenimente, CSS și AJAX și vă permite să creați cu ușurință animații. caracteristica principală jQuery este compatibil între browsere (da și Internet Explorer 6 :). Sloganul jQuery sună astfel: „Scrie mai puțin, fă mai mult”, care tradus în rusă înseamnă „Scrie mai puțin, fă mai mult” (sau „Cu cât mergi mai încet, cu atât vei merge mai departe” :). Aceste cuvinte se potrivesc perfect cu descrierea acestei biblioteci și sunt complet justificate.
Primii pași cu jQueryMai întâi, va trebui să descărcați biblioteca cu același nume. Puteți face acest lucru pe site-ul oficial jQuery. După aceasta, ar trebui să conectați jQuery la pagina dvs. HTML. Puteți face acest lucru adăugând o etichetă de script la capul documentului:
Conectați jQuery
După aceasta, puteți începe să utilizați jQuery.
Selectoare în jQueryEste timpul să vorbim despre selectori. Selectoarele din jQuery sunt aceleași selectoare CSS, tocmai modificate. Ele sunt modificate deoarece programatorii jQuery au adăugat mulți selectori utili pentru căutare convenabilă elementele necesare.
Să ne uităm la un exemplu de cod:
Exemplul 1Paragraful 1
paragraful 2
paragraful 3
// a ta va fi aici cod javascript
Exemple de obținere a fiecărui element de document:
$(document.body) - element body
$("div") - selectorul returnează toate elementele div
$("p") sau $("div p") - toate paragrafele p (3 bucăți)
$("div > p") - returnează paragrafele care sunt noduri secundare imediate ale elementului div
$("p:first") - paragraful nr. 1
$("#pEl") sau $("p#pEl") - va returna un paragraf cu identificatorul (id) "pEl"
$("p.second") - va returna un paragraf cu clasa "second"
$("p:eq(1)") - va returna paragraful cu indicele 1 (indicii încep de la 0, va fi returnat paragraful nr. 2)
$("p:last") - returnează ultimul paragraf
$("p.third#third") - va returna paragraful nr. 3
Observați cât de ușor este să găsiți elementul de care avem nevoie. Uită de document.getElementById("id") și document.getElementsByTagName("p"), nu vom mai avea nevoie de ele.
Exemplul 2Să aruncăm o privire la unele dintre caracteristicile mai puternice ale jQuery. Pentru a face acest lucru, să desenăm un tabel
| Celula 1 | Celula 2 |
| Celula 3 | Celula 4 |
| Celula 5 | Celula 6 |
| Celula 7 | Celula 8 |
În acest exemplu am folosit selectorul „:odd”, care selectează tot ce nu chiar elementeși l-a aplicat pe rândurile tabelului (etichete tr). „:even” la rândul său le selectează pe cele pare (0, 2, 4, ...).
Și deci trebuie să selectăm toate rândurile impare ale tabelului, dar nu dorim ca primul rând, care este antetul (elele elemente), să-și schimbe culoarea și dungile să înceapă din al treilea rând. În acest caz, selectorul „:not(selector)” ne va fi util. Se foloseste astfel:
$("table tr:not(:first):odd") - selectează toate elementele pare, cu excepția primului
Iată sursa javascript:
$(„buton”).toggle(funcție() (
$("table tr:not(:first):odd").css("background", "#eee");
// Primul clic, setați fundalul la gri
),funcție() (
$("tabelul tr:nu(:primul)").css("fondul", "niciunul");
// A 2-a apăsare, eliminați fundalul din toate tr
});
Pe site-ul jQuery, în secțiunea selectoare, există o subsecțiune separată dedicată lucrului cu formulare. Selectoarele oferă lucru convenabil cu casete de selectare, butoane, câmpuri de introducere și așa mai departe. Să desenăm forma.
În această lecție, vom învăța despre selectorii de elemente de formular, pe care îi vom folosi ca argument pentru funcția jQuery(„selector”) pentru a selecta elemente.
Scopul selectoarelor de elemente de formularSelectoarele de elemente de formular sunt proiectate pentru a selecta elemente în funcție de:
- tipurile lor (valorile atributelor de tip) sunt :button, :checkbox, :file, :image, :parola, :radio, :reset, :submit, :text.
- indiferent dacă eticheta lor este input , textarea , select sau button - :input .
- indiferent dacă elementul are focalizare sau nu - :focus .
- dacă elementele sunt într-o stare activă (:activată) sau inactivă (:dezactivată).
- dacă elementele opțiunii sunt în starea selectată sau nu - :selectat .
- dacă caseta de selectare, selectarea și elementele radio sunt sau nu în starea selectată - :bifate.
:button - selectează toate elementele butonului și elementele cu type="button" . Selectorul $(":button") este echivalent cu $("button, input") .
Selectorul:button nu face parte din specificația CSS, este implementat exclusiv în jQuery. Deci, atunci când îl utilizați într-un selector pentru a filtra elemente, nu veți obține câștigul de performanță pe care îl oferă metoda nativă DOM querySelectorAll(). Pentru a îmbunătăți performanța interogărilor în browsere moderne, utilizați următoarea construcție: $("selector").filter(":button");
De exemplu, selectați toate elementele de buton sau elementele cu tip="button" care se află în interiorul formularului:
Actualizați datele $("form:button"); //sau folosind metoda de filtrare $("form *").filter(":button");
:checkbox - selectează toate elementele cu type="checkbox" . Selectorul $(":checkbox") este echivalent cu $("") .
Înainte de selectorul:checkbox, precum și înaintea selectoarelor de pseudo-clasă (adică cele care încep cu semnul „:”), se recomandă să specificați o etichetă sau un alt selector (de exemplu, numele clasei). Dacă nu specificați nimic înainte de semnul " : ", atunci este implicată utilizarea unui selector universal (*). Cu alte cuvinte, $(":checkbox") este echivalent cu $("*:checkbox") . Dar este mai corect în acest caz să folosiți eticheta de intrare în loc de *: $("input:checkbox") .
Selectorul:checkbox nu face parte din specificația CSS, este implementat exclusiv în jQuery. Deci, atunci când îl utilizați într-un selector pentru a filtra elemente, nu veți obține câștigul de performanță pe care îl oferă metoda nativă DOM querySelectorAll(). Pentru a îmbunătăți performanța interogărilor în browserele moderne, utilizați următoarea construcție: $("input");
De exemplu, selectați toate elementele de intrare care au atributul type="checkbox", adică. sunt casete de selectare:
$("input:checkbox"); //sau folosind selectorul de atribute $("input");
:checked - selectează toate elementele cu o stare bifată sau selectată. Selectorul:checked este pentru caseta de selectare, elementele selectate și butoanele radio.
Linux Windows Chrome Firefox Valoare 1 Valoare 2 Valoare 3
:disabled - selectează toate elementele care sunt dezactivate.
Înainte de selectorul :disabled, precum și înaintea selectoarelor de pseudo-clasă (adică cele care încep cu „ : "), este recomandat să specificați o etichetă sau un alt selector (de exemplu, numele clasei). Dacă nu specificați nimic înainte de semnul " : ", atunci este implicată utilizarea unui selector universal (" * "). Cu alte cuvinte, $(":disabled") este echivalent cu $("*:disabled") . Dar în acest caz, este mai corect să folosiți eticheta de intrare în loc de " * ": $("input:disabled") .
Selectorul:disabled este diferit de selectorul de atribute. Selectorul:disabled testează valoarea booleană (adevărat/fals) a proprietății dezactivate a elementului, în timp ce selectorul de atribute testează pur și simplu dacă elementul are un atribut dezactivat.
Selectorul:disabled poate fi folosit numai pentru a selecta elemente HTML care acceptă atributul dezactivat: , , , , și .
$("input:dezactivat");
:enabled - selectează toate elementele care sunt activate.
Înainte de selectorul :enabled, precum și înaintea selectoarelor de pseudo-clasă (adică cele care încep cu „ : "), este recomandat să specificați o etichetă sau un alt selector (de exemplu, numele clasei). Dacă nu specificați nimic înainte de semnul " : ", atunci este implicată utilizarea unui selector universal (" * "). Cu alte cuvinte, $(":enabled") este echivalent cu $("*:enabled") . Dar este mai corect în acest caz să folosiți eticheta de intrare în loc de " * ": $("input:enabled") .
Selectorul:enabled este diferit de:not() . Selectorul:enabled selectează elementele care au proprietatea booleană dezactivată setată la false . În timp ce :not() selectează elemente care nu au setat atributul dezactivat.
Selectorul:enabled poate fi folosit numai pentru a selecta elemente HTML care acceptă atributul dezactivat: , , , , , și .
$("input:activat");
:file - selectează toate elementele cu type="file" . Selectorul:file este echivalent cu .
Înainte de selectorul:file, precum și înaintea selectoarelor de pseudo-clase (adică cele care încep cu „ : "), se recomandă să specificați o etichetă sau un alt selector (de exemplu, numele clasei). Dacă nu specificați nimic înainte de semnul " : ", atunci este implicată utilizarea unui selector universal (" * "). Cu alte cuvinte, $(":file") este echivalent cu $("*:file") . Dar este mai corect în astfel de cazuri să folosiți eticheta de intrare în loc de " * ": $("input:file") .
Selectorul:file nu face parte din specificația CSS, este implementat exclusiv în jQuery. Deci, atunci când îl utilizați într-un selector pentru a filtra elemente, nu veți obține câștigul de performanță pe care îl oferă metoda nativă DOM querySelectorAll(). Pentru a îmbunătăți performanța interogărilor în browserele moderne, utilizați selectorul de atribute.
$("input:fișier"); // $("intrare");
:focus - selectează elementul care are focalizarea.
Înainte de selectorul:focus, precum și înaintea selectoarelor de pseudo-clasă (adică cele care încep cu „ : "), este recomandat să specificați o etichetă sau un alt selector (de exemplu, numele clasei). Dacă nu specificați nimic înainte de semnul " : ", atunci este implicată utilizarea unui selector universal (" * "). Cu alte cuvinte, $(":focus") este echivalent cu $("*:focus") . Dacă trebuie să obțineți elementul curent care are focus, atunci utilizați următorul cod: $(document.activeElement) . Aceasta metoda primește un element fără a-l căuta în arborele DOM.
:image - selectează toate elementele cu type="image" . Selectorul:image este echivalent cu .
Selectorul:image nu face parte din specificația CSS, este implementat exclusiv în jQuery. Deci, atunci când îl utilizați într-un selector pentru a filtra elemente, nu veți obține câștigul de performanță pe care îl oferă metoda nativă DOM querySelectorAll(). Pentru a îmbunătăți performanța interogărilor în browserele moderne, utilizați .
$("input:imagine"); // $("intrare");
:input - Selectează toate elementele de intrare, zona de text, selectare și buton din document. Acestea. selectează toate controalele formularului.
Selectorul:input nu face parte din specificația CSS, este implementat exclusiv în jQuery. Deci, atunci când îl utilizați într-un selector pentru a filtra elemente, nu veți obține câștigul de performanță pe care îl oferă metoda nativă DOM querySelectorAll(). Pentru a îmbunătăți performanța interogărilor în browserele moderne, utilizați următoarea construcție: $("selector").filter(":input");
Parametrul 1 Parametrul 2 $("*:input"); // $("form *).filter(":input");
:parolă - selectează toate elementele cu tip="parolă" . Selector:parolă" este echivalent cu .
Înainte de selectorul:parolă, precum și înaintea selectoarelor de pseudo-clasă (adică cele care încep cu „ : "), se recomandă să specificați o etichetă sau un alt selector (de exemplu, un nume de clasă). Dacă nu specificați nimic înainte de semnul " : ", atunci este implicată utilizarea unui selector universal (" * "). Cu alte cuvinte, $(":parola") este echivalent cu $("*:parola") . Dar este mai corect în astfel de cazuri să folosiți eticheta de intrare în loc de " * ": $("input:parola") .
Selectorul:parolă nu face parte din specificația CSS. Este implementat exclusiv în jQuery. Deci, atunci când îl utilizați într-un selector pentru a filtra elemente, nu veți obține câștigul de performanță pe care îl oferă metoda nativă DOM querySelectorAll(). Pentru a îmbunătăți performanța interogărilor în browserele moderne, utilizați .
$("*:parolă"); // $("");
:radio - selectează toate elementele cu type="radio" . Selector:radio este echivalent cu .
Înainte de selectorul:radio, precum și înaintea selectoarelor de pseudo-clasă (adică cele care încep cu „ : "), este recomandat să specificați o etichetă sau un alt selector (de exemplu, numele clasei). Dacă nu specificați nimic înainte de semnul " : ", atunci este implicată utilizarea unui selector universal (" * "). Cu alte cuvinte, $(":radio") este echivalent cu $("*:radio") . Dar este mai corect în acest caz să folosiți eticheta de intrare în loc de " * ": $("input:radio") .
Selectorul:radio nu face parte din specificația CSS, este implementat exclusiv în jQuery. Deci, atunci când îl utilizați într-un selector pentru a filtra elemente, nu veți obține câștigul de performanță pe care îl oferă metoda nativă DOM querySelectorAll(). Pentru a îmbunătăți performanța interogărilor în browserele moderne, utilizați .
$(":radio"); // $("");
:reset - selectează toate elementele cu type="reset" . Selector:reset este echivalent cu .
Selectorul:reset nu face parte din specificația CSS, este implementat exclusiv în jQuery. Deci, atunci când îl utilizați într-un selector pentru a filtra elemente, nu veți obține câștigul de performanță pe care îl oferă metoda nativă DOM querySelectorAll(). Pentru a îmbunătăți performanța interogărilor în browserele moderne, utilizați .
$(":resetare"); // $("");
:selectat - selectează toate elementele care se află în starea selectată. Selectorul:selectat funcționează numai pentru elementele opționale și nu funcționează pentru caseta de selectare și elementele radio. Pentru a lucra cu acesta din urmă, utilizați selectorul:checked .
Selectorul:selectat nu face parte din specificația CSS, este implementat exclusiv în jQuery. Deci, atunci când îl utilizați într-un selector pentru a filtra elemente, nu veți obține câștigul de performanță oferit de metoda nativă DOM querySelectorAll(). Pentru a îmbunătăți performanța interogărilor în browserele moderne, utilizați următoarea construcție: $("selector").filter(":selected");
Flori Arbuști Copaci Pământ Iarbă $(":selected"); // $("*").filter(":selectat");
:submit - selectează toate elementele cu type="submit" . Selectorul:submit este pentru elemente de buton sau de intrare.
Selectorul:submit nu face parte din specificația CSS, este implementat exclusiv în jQuery. Deci, atunci când îl utilizați într-un selector pentru a filtra elemente, nu veți obține câștigul de performanță pe care îl oferă metoda nativă DOM querySelectorAll(). Pentru a îmbunătăți performanța interogărilor în browserele moderne, utilizați butonul de intrare
$(":trimite"); // $("input,button");
:text - selectează toate elementele cu type="text" .
Funcția jQuery $(":text") ne permite să selectăm elemente. Înainte de selectorul:text, precum și înaintea selectoarelor de pseudo-clasă (adică cele care încep cu „ : "), se recomandă să specificați o etichetă sau un alt selector (de exemplu, numele clasei). Dacă nu specificați nimic înainte de semnul " : ", atunci este implicată utilizarea unui selector universal (" * "). Cu alte cuvinte, $(":text") este echivalent cu $("*:text") . Dar este mai corect în acest caz să folosiți eticheta de intrare în loc de " * ": $("input:text") .
Incepand cu versiuni jQuery 1.5.2, selectorul:input selectează și elementele de intrare care nu au un atribut de tip specificat (caz în care elementul se presupune că are type="text").
Să demonstrăm diferența dintre $(":text") și $("") cu următorul exemplu:
$("").is(""); // false $("").is(":text"); // Adevărat
Selectorul:text nu face parte din specificația CSS, este implementat exclusiv în jQuery. Deci, atunci când îl utilizați într-un selector pentru a filtra elemente, nu veți obține câștigul de performanță pe care îl oferă metoda nativă DOM querySelectorAll(). Pentru a îmbunătăți performanța interogărilor în browserele moderne, utilizați .
$(":text"); // $("intrare");
Selectoarele JQuery sunt una dintre cele mai multe părți importante biblioteci jQuery.
selectoare jQuerySelectoarele JQuery vă permit să selectați și să manipulați elementele HTML.
Selectorii JQuery sunt folosiți pentru „găsiți” (sau selectați) elemente HTML, pe baza numelui, ID-ului, claselor, tipurilor, atributelor, valorilor atributelor și multe altele. Se bazează pe existență selectoare CSS, și în plus, are niște selectoare proprii.
Toți selectoarele din JQuery încep cu un semn dolar și o paranteză: $().
Element de selecțieSelector element jquery selectează elemente pe baza numelui elementului.
Puteți selecta toate elementele
Pe o pagina ca aceasta:
exemplu
Când utilizatorul face clic pe buton, totul
Elementele vor fi ascunse:
Selector #idSelectorul #id al JQuery folosește atributul ID al unei etichete HTML pentru a găsi un anumit element.
ID-ul trebuie să fie unic în pagină, așa că trebuie să utilizați selectorul #ID dacă doriți să găsiți un singur element unic.
Pentru a găsi un element cu un anumit ID, scrieți un caracter hash urmat de ID-ul elementului HTML:
exemplu
Când utilizatorul face clic pe buton, elementul cu id="test" va fi ascuns:
.Selector de clasăSelector Clasa Jquery găsește elemente cu o anumită clasă.
Pentru a găsi elemente cu o anumită clasă, scrieți punctul caracterului urmat de numele clasei:
exemplu
Când utilizatorul face clic pe buton, elementele cu class="test" vor fi ascunse:
Mai multe exemple de selectoare JQuery| $("*") | Selectează toate elementele | Incearca-l |
| $(acesta) | Selectează elementul HTML curent | Incearca-l |
| $("p.intro") | Selectează toate Elemente cu class="intro" |
Incearca-l |
| $("p:primul") | Selectează primul Element |
Incearca-l |
| $("ul li:first") | Selectează primul |
Incearca-l |
| $("ul li:primul copil") | Selectează primul |
Incearca-l |
| $("") | Selectează toate elementele cu un atribut href | Incearca-l |
| $("a") | Selectează toate elemente cu o valoare a atributului țintă egală cu „_blank” | Incearca-l |
| $("a") | Selectează toate elemente cu o valoare a atributului țintă NU este egală cu „_blank” | Incearca-l |
| $(":button") | Selectează toate elementele și elementele de tip="button" | Incearca-l |
| $("tr:even") | Selectează toate egale | |
| Incearca-l | ||
| $("tr:odd") | Selectează toate impare | |
| Incearca-l |
Dacă site-ul dvs. conține multe pagini și doriți ca funcțiile dvs. Jquery să fie ușor de întreținut, puteți pune dvs Funcții jQueryîntr-un fișier .js separat.
