Selectarea elementului Jquery. selectoare jQuery. Selectoare în jQuery

În lecțiile anterioare am discutat această întrebare concepte generale jQuery și cum să-l conectați.
Acest articol se va concentra pe utilizarea selectoarelor în jQuery (CSS și XPath), care vă permit să selectați ușor și precis unul sau mai multe elemente DOM. Fiecare selector va avea un cod și un exemplu de aplicare a acestuia. Utilizarea selectoarelor jQuery nu cauzează probleme de lucru în browsere mai vechi, cum ar fi IE 6, deoarece conține mecanisme CSS funcționează 1-3.

Structura codului jQuery Semnul dolar $ - indică utilizarea jQuery, selector - element DOM cu care lucrăm și functie speciala jQuery cu parametrii săi (de exemplu, animație, implementare, mișcare etc.).

Exemplu de cod jQuery

$(selector).funcție(parametri);

Selectoare în jQuery această lecție Ne vom opri în detaliu asupra problemei selectoarelor. Ce este?

Selector(din engleza select - alege) - acestea sunt elementele DOM-ului (model obiect document, de exemplu, tag-uri sau blocuri special marcate) carora le adresam cererea. Acest concept există în JavaScript, CSS și alte limbi, unde trebuie să selectați un anumit element și să lucrați cu proprietățile acestuia.

Identificatori (id).

Dacă doriți să lucrați cu un anumit element și doar o dată(în teorie, deoarece în practică unele browsere nu vor disprețui reutilizarea identificatorului), atunci îi atribuim un id unic.

cod HTML

#id- selectează singurul element cu identificatorul transmis (id). În acest caz special

cod jQuery

$("#special").css("chenar", "1px negru solid");

Pe viitor voi scrie fără etichete, sper să fie clar că JavaScript ar trebui să fie inclus în ele. În exemplu, selectăm elementul cu id special, în acest caz este un div. În ea folosim funcția cssși creați un chenar negru continuu (solid) de 1 pixel.

Clase.

.clasă- selectați toate elementele cu clasa specificată. Așa e, pot fi mai multe dintre ele. Principalul lucru este că numele clasei este același.

cod HTML

Primul bloc
Al doilea bloc
După cum puteți vedea, există două elemente (div) și au aceleași clase.

cod jQuery

$(".spec_class").css("chenar", "1px roșu continuu");
Pentru toate elementele unde valoarea clasei spec_class sunt create și aceleași chenare ca în exemplul anterior, dar roșii.

Elemente.

Sunt selectate toate elementele de un anumit tip. Este fie corp, sau toate div-urile, sau toată masași așa mai departe.

cod jQuery

$("div").css("chenar", "1px verde continuu");
U toate div-urile Va apărea un cadru verde.

* (toate elementele) - selectați absolut toate elementele. Chiar capȘi corp.

cod jQuery

$("*").css("chenar", "1px albastru solid");
Toate elementele din documentul dvs. vor avea un chenar albastru.

$("*", document.body).css("border", "2px solid black");
Selectați toate elementele din corp și dați-le un chenar negru de 2 pixeli.

După tip: selector1, selector2, ..., selectorN - listăm toate elementele. Mai jos este un exemplu interesant partajarea selectoare.

cod jQuery

$("div, span, p.spec_class").css("border", "1px solid red");
Selectează toate elementele div, span și p care au specificat spec_class. Toți selectoarele sunt pur și simplu specificate, separate prin virgule.

Selectori ierarhici în descendentul jQueryancestor

Selectat elementul principal (element părinte) și elementele incluse în acesta (descendenții). Să ne uităm la exemplul de mai jos al părintelui formăși descendenți Selectați.

cod jQuery

$("selectare formular").css("chenar", "1px negru punctat");
Toate elementele selectate și formați descendenți vor avea un chenar punctat negru.

părinte-copil

Acum să selectăm toți copiii elementului părinte.

cod jQuery

$("#id > *").css("border", "1px double black");
În primul rând, selectăm toți moștenitorii elementului cu id, apoi creați o chenar dublu negru cu acesta.

anterior și următor (anterior și următor)

Indicăm elementele care urmează (următorul) după elementul desemnat anterior (prev).

cod jQuery

$("etichetă + intrare").css("culoare", "albastru").val("Terminat!");
Selectați elementele de intrare după etichetă. Le instalăm Proprietăți CSS- culoarea este sub formă de negru și valoarea (.val) este setată Gata!

prev ~ fraţi

Acum lucrăm cu elemente surori. Găsiți toate surorile care urmează elementului anterior (anterior).

cod jQuery

$("#prev ~ div").css("chenar", "3px groove blue");
Căutăm toate elementele div care sunt frați unul cu celălalt și urmăm imediat elementul cu ID #prev. Vă rugăm să rețineți că exemplul nu va selecta elemente span, deoarece selecția este doar pentru elemente div.

Filtre de bază: în primul rând

Va fi selectat primul element cu selectorul specificat.

cod jQuery

$("tr:first").css("font-style", "bold");
În primul rând (tr) din tabel, textul va fi evidențiat cu caractere aldine.

Acum vom selecta ultimul element cu selectorul specificat.

cod jQuery

$("tr:last").css((culoarea fundalului: "galben", greutatea fontului: "mai îndrăzneață"));
Găsiți ultima linie (tr) din tabel și pictați fundalul galbenși, de asemenea, instalați font aldine(mai îndrăzneț).

:nu(selector)

Folosirea negației filtrează elementele. Selectați toate intrările care nu au o casetă de selectare, precum și intervalele care le urmează

cod jQuery

$("input:not(:verificat) + span").css("culoare-fond", "galben");
Sensul casetelor de selectare nu se schimbă.

Atenţie! Interesant exemplu , pe care fiecare a doua persoană îl folosește în practica sa. Cum să alegi elementele pare sau impare? Apoi trebuie să faceți lizibile liniile din text sau chiar codul. Valoarea de pornire 0.

cod jQuery

$("tr:even").css("culoare-fond", "#с1с1с1");
Selectați rânduri pare din tabel. Prima, a treia, etc. linii vor fi evidențiate. Atenţie! Numărarea se face pe bază de indici, iar în ei primul rând are valoarea 0. În continuare, sunt selectate rânduri cu indici 0, 2, 4 etc.).

Acum selectăm elementele ciudate. Valoarea indicelui se calculează pornind de la 0. Valorile 1,3,5,7 etc. vor fi selectate corespunzător. Aceasta corespunde liniilor 2,4,6 etc., deoarece acestea sunt numărate după fapt, din prima.

cod jQuery

$("tr:odd").css("culoarea de fundal", "#с1с1с1");
Fundalul liniilor impare este colorat în gri.

:eq(index)

Selectați un index de element specific. În exemplu, vom colora doar un rând al tabelului.

cod jQuery

$("td:eq(2)").css("culoare", "albastru");
Selectăm elementul 2 după index. Permiteți-mi să vă reamintesc că aceasta va fi a treia linie, deoarece va fi al treilea indice (0,1,2).

:gt(index)

Acum selectăm valori de index care sunt mai mari decât cele specificate în selector.

cod jQuery

$("td:gt(4)").css("decorarea textului", "line-through");
Selectăm rânduri din tabel al căror indice de element este mai mare de 4, adică indicele lor este 5,6 etc. Aceasta corespunde cu 6, 7, etc. elemente care apar, în cazul nostru rânduri de tabel.

:lt(index)

Acum selectăm valori ale indexului care sunt mai mici decât cele specificate în selector.

cod jQuery

$("td:lt(3)").css("culoare", "roșu");
Toate elementele td cu indice m sunt selectate De exemplu, căutăm toate elementele TD cu un indice mai mic de 3. Deoarece numărarea, vă reamintesc încă o dată, este de la zero, acestea sunt rânduri de tabel (td) 1,2. ,3.

Toate elementele care sunt titluri (h1,h2,h3 etc.) vor fi selectate

cod jQuery

$(":header").css(( fundal:"#c1c1c1", culoare:"#0085cc" ));
Pentru toate rubricile (elementele h) vom seta font albastruși fundal gri deschis.

:animat

Toate elementele care sunt animate în prezent vor fi selectate.

cod HTML

Faceți primul div roșu
cod jQuery

$("#run").click(function())(
$("div:animat").toggleClass("colorat");
});
funcția animateIt() (
$("#mover").slideToggle("lent", animateIt);
}
animateIt();
Aici exemplul este puțin mai complicat. După ce facem clic pe buton, schimbăm culoarea elementului animat (div). Nu există modificări la elementele neanimate.

Să ne uităm la un exemplu simplu despre cum funcționează selectoarele în jQuery. Fișierul este complet gata de utilizare, trebuie doar să copiați întregul cod în fișierul html creat. Biblioteca din exemplu este conectată cu servere Google, deci pentru funcţionare corectă Fișierul va necesita o conexiune la internet. Sub cod există o versiune demo pentru vizionare.

jQuery

#polosa1( poziție: relativă; fundal: alb; lățime: 200px; înălțime: 50px; chenar-sus: solid 1px #000; )
#polosa2( poziție: relativă; fundal: albastru; lățime: 200px; înălțime: 50px; )
#polosa3(poziție: relativă; fundal: roșu; lățime: 200px; înălțime: 50px; chenar-jos: solid 1px #000; )

funcția addFlag1())(
$("div:eq(0)").css("fond", "alb");
$("div:eq(1)").css("fond", "verde");
$("div:eq(2)").css("fondul", "roșu");
}
funcția addFlag2())(
$("#polosa1, #polosa3").css("fondul", "roșu");
$("#polosa2").css("fond", "alb");
}
funcția addFlag3())(
$("div").css("fondul", "roșu");
}

Un exemplu de funcționare a selectoarelor jQuery

Steagul Bulgariei
Steagul Austriei
Steagul URSS

Demonstrație Descărcați surse
Vă mulțumim pentru atenție! Mult succes in demersurile tale!

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 și:). Sloganul jQuery sună așa: „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 jQuery

Mai î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 jQuery

Este 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 1

Paragraful 1

paragraful 2

Alineatul 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 element 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 2

Să aruncăm o privire la unele dintre caracteristicile mai puternice ale jQuery. Pentru a face acest lucru, să desenăm un tabel

Antet 1 Antet 2

Celula 1	Celula 2
Celula 3	Celula 4
Celula 5	Celula 6
Celula 7	Celula 8

Apăsați-mă

Î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 așadar 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
});

Exemplul 3 - lucrul cu formulare

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.

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 pe prima dintre 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ție

Metoda 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 am construit setul necesar de obiecte, apelăm 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 articole selectate

Există 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:

Metode de filtrare a elementelor Descrierea metodei

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 tipurile de argumente valide sunt prezentate mai jos
primul()	Elimină toate elementele dintr-un set, cu excepția primului
are(), are(jQuery), are(HTMLElement), are(HTMLElement)	Exclude din set elemente care nu au copii care să se potrivească cu selectorul specificat sau cu obiectul jQuery sau copii care nu includ obiectele HTMLElement specificate
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)	Îndepărtează dintr-un set toate elementele ai căror indici sunt în afara intervalului specificat

Restrângerea setului la un element

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 si influentand-o jq.last().css("border", "gros dublu verde" // selectand un element cu indexul specificat si influentand-l jq.eq(2).css("border", "thick double"); negru"); "); jq.eq(-2).css("chenar", "gros dublu");

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ă:

Restrângerea unui set la elemente ai căror indici aparțin unui interval dat

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ă:

Elemente de filtrare

Metoda filter() vă permite să setați o condiție. Elementele care nu îndeplinesc condiția specificată sunt excluse din set. Opțiuni posibile Utilizările metodei filter() corespunzătoare diferitelor moduri de a seta condiția 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().

Î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ă:

Convertiți un set de selecție

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).

Testarea unui set de elemente selectate

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 selectate

jQuery 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 executării scriptului este prezentat în figură.

În această lecție, vom afla 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 formular

Selectoarele 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 .
dacă elementul are sau nu focalizare - :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.

Selectoare de elemente de formular

: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ță oferit de 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ță oferit de 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.

: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ță oferit de 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 „ : "), 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, $(":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.

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ță oferit de 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ță 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(":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-clase (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ță oferit de metoda nativă DOM querySelectorAll(). Pentru a îmbunătăți performanța interogărilor în browserele moderne, utilizați .

$("*:parolă");

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ță oferit de 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ță oferit de 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.

Funcția jQuery $(":text") ne permite să selectăm elemente. Înainte de selectorul:text, 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, $(":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ță oferit de 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 jQuery

Selectoarele 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 selectoare CSS existente și, în plus, are unele selectoare proprii.

Toți selectoarele din JQuery încep cu un semn dolar și o paranteză: $().

Element de selecție

Selectorul de elemente 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 #id

Selectorul #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ă ar trebui să utilizați selectorul #ID dacă doriți să găsiți un singur element unic.

Pe o pagina ca aceasta:

Pentru a găsi un element cu un anumit ID, scrieți un caracter hash urmat de ID-ul elementului HTML:

Când utilizatorul face clic pe buton, elementul cu id="test" va fi ascuns:

.Selector de clasă Selector Clasa Jquery

Pentru a găsi elemente cu o anumită clasă, scrieți punctul caracterului urmat de numele clasei:

Pe o pagina ca aceasta:

Când utilizatorul face clic pe buton, elementele cu class="test" vor fi ascunse:

Alte exemple jquery selectoare Sintaxă Descriere Exempluelementeelemente

$("*")	Selectează toate elementele	Incearca-l
$(acest)	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 element al primului	Incearca-l
$("ul li:primul copil")	Selectează primul element al fiecăruia	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

Funcții într-un fișier separat

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 funcțiile dvs. JQuery într-un fișier .js separat.