Rar folosite selectoare jquery

Ați putea fi familiarizat cu populare selectorii, deoarece acestea sunt bazate pe CSS. Cu toate acestea, există selectoare mai puțin utilizate. In acest tutorial, vă voi spune despre selectorii mai puțin cunoscute, dar nu mai puțin importante.

Selectorul universal (*)

numit pe bună dreptate, selectorul universal, acesta poate fi utilizat pentru a selecta toate elementele de pe pagină, inclusiv cap, corp, script-ul sau link-ul. Uită-te la demo-ul meu. pentru a înțelege ceea ce spun.

Acest selector este în tandem cu celelalte elemente ale lucrării încetinește. Cu toate acestea, viteza este, de asemenea, depinde de modul în care selectorul este utilizat și modul în care pagina de browser deschise. În Firefox, următorul record de $ ( «# selector> *»). Găsiți ( «li») este mai lent decât $ ( «# selectorul> ul»). Găsiți ( «li»). Un alt fapt interesant este faptul că Chrome ușor mai rapid decât Firefox, scrie $ ( «# selector> *»). Găsiți ( «li»). Înregistrați $ ( «# selectorul *»). Găsiți ( «li») în toate browserele este mai lent decât $ înregistrare ( «# selectorul ul»). Găsiți ( «li»). Vă sfătuiesc să comparați performanța înainte de a utiliza selectori.

În acest studiu a comparat viteza tuturor selectoare.

animație Selector (: animat)

Cu acest selector puteți obține acces la toate elementele, a căror animație nu este la momentul, selectorul de pornire: animat. Există o problemă - vor fi selectate doar elemente animate folosind JQuery. Acesta este un JQuery selector de extensie și nu crește performanța de cod, spre deosebire de metoda nativă querySelectorAll ().

Utilizarea JQuery este, de asemenea, imposibil de detectat de animație CSS, dar este posibil să se identifice momentul finalizării sale de către un eveniment animationend. Uitați-vă la următoarea demo.

În demo de mai sus pentru a efectua $ ( «: animat») css ( «fond», »# 6F9" ) ;. animat etichete DIV doar ciudat, astfel încât acestea sunt verzi. După aceea, funcția de animație este numit pentru elementele DIV rămase. Dacă faceți clic pe butonul de buton, toate divuri va deveni verde.

Selector de atribut inegalitate ([attr! = "Valoare"])

selectoare atribut convențional se determină dacă există un atribut cu numele sau valoarea dată. Un selector [attr! = „Valoare“] selecteaza toate elementele opuse cu atributul sau atribut nespecificată a căror valoare nu coincide cu setul. înregistrare echivalent: nu ([attr = "valoare"]). Spre deosebire de [attr = "valoare"] selectorul [attr! = "Valoare"] nu este inclusă în caietul de sarcini CSS, ceea ce înseamnă că înregistrarea în formă de $ ( «css-selector»). Nu ( «[attr = 'valoare'] „) poate îmbunătăți performanța în browsere moderne.

Următorul cod pentru toate etichetele cu Li-categorie de date atribut este adăugată clasa css nepotrivire. Lucruri utile pentru depanare sau pentru a seta valoarea atributului dorit prin JS.

În demo de mai jos am rula pe cele două liste și se corectează valoarea categoriei atribut.

Selector: conține (text)

Selectorul este folosit pentru a selecta toate etichetele care conțin șirul specificat. Șirul poate fi atât în ​​mod direct în interiorul elementului și în elementele sale copil.

Exemplul de mai jos va ajuta să înțelegeți funcționarea selectorului. Vom pune un fundal galben pentru toate aparițiile frazei în textul Lorem Ipsum. Primul aspect:

Din textul este clar că fraza textul Lorem Ipsum este găsit de 7 ori în locuri diferite. Am făcut în mod deliberat o propoziție cu o literă mică, pentru a arăta caz sensibil. Codul de JS de mai jos evidențiază toate aparițiile:

Ghilimelele în jurul șirul de căutare, nu poți pune. Ie ambele opțiuni de înregistrare $ ( «secțiunea: conține () 'Lorem Ipsum'») și $ ( «secțiunea: conține (Lorem Ipsum)») va fi adevărat în demo de mai sus. Căutarea zona am ales secțiunea de tag-uri, iar textul Lorem Ipsum este solicitată în această formă. Mai mult decât atât, din moment ce selectorul este sensibil la caz, nu ar trebui să fie subliniat textul în secțiunea a doua etichetă. Acest studiu arată clar că totul funcționează.

Selector: are (Selector)

Acest selector selecteaza toate etichetele care elementul specificat are loc cel puțin o dată. Pentru a se potrivi în tag-ul nu trebuie neapărat să fie descendenții direcți. a () nu este inclusă în caietul de sarcini CSS. Pentru a îmbunătăți performanța în browserele moderne, puteți utiliza înregistra $ ( «-css-selector pur») are (selector) în loc de $ ( «Pure-css-selector: are (Selector)»)..

O posibilă modalitate de aplicare - manipularea elementelor cu elementele de copil specificat. In exemplul de mai jos, voi schimba culoarea tuturor elementelor listei, invocând în interior. Demo Markup:

cod JS elementelor schimbare de culoare a listei:

selectoare index

În plus față de selectoare CSS, cum ar fi: nth-copil () în JQuery are selectoare sale index -: echiv (index). lt (index) și: gt (index). Spre deosebire de CSS selectoare cred ca aceste colegii de la sol în sus. Ie Selector: nth-copil (1) selectează primul element de copil ,: eq (1) selectează al doilea. Pentru a selecta prima utilizat: eq (0).

selectoare Index ia valori negative. Dacă o valoare negativă, numărătoarea inversă începe în direcția opusă de la ultimul element.

Selector: lt (index) pentru a selecta toate elementele care sunt mai puțin decât o valoare predeterminată. Pentru a selecta primele trei elemente trebuie să fie scris: lt (3), deoarece elementele sunt indici de 0,1 și 2. Prin stabilirea indicelui negativ, numărarea se realizează în sens invers, și toate valorile sunt selectate pentru elementul obținut. In mod similar selector: gt (index) selectează toate elementele de mai sus, indicele predeterminat.

Pentru a înțelege mai bine funcționarea selectorii index poklikat pe diferite butoane în demo.

formele selectoare

JQuery este un set de selectoare de acces facil la elementele de formular. De exemplu, un selector: buton selectează toate butonul etichetele și toate elementele de tip buton. În mod similar, selectorul de: caseta selectează toate input'y de tip caseta de selectare. Selectoarele JQuery au aproape toate de intrare.

Luați în considerare formularul de mai jos:

În forma I-am creat două elemente de tip text și 4 casete de selectare. Forma în sine este simplu, dar vă poate ajuta să înțelegeți cum funcționează selectori forme. Cu selectorul de: text, contorizăm numărul de elemente de text și să actualizeze textul din prima intrare.

Pentru a selecta toate de introducere a textului am folosit: text, apoi le-am conta prin metoda de lungime. In a treia expresie Sunt folosind: eq () pentru a accesa primul element și îi conferă sens.

Rețineți că jQuery 1.5.2 Selector: text returnează true pentru elementele care nu specifică tipul de atribut. Demo

Selector antet (: antet)

Dacă ați avut loc vreodată sarcina de a selecta toate titlurile de pe pagină, puteți face acest lucru prin utilizarea de $ ( «: header»), dar nu vopsea $ ( «h1 h2 h3 h4 h5 h6" ). Selectorul nu este inclusă în caietul de sarcini CSS, ceea ce înseamnă că puteți îmbunătăți performanța, utilizând mai întâi un selector CSS, apoi .filter ( «: header»).

De exemplu, pagina are o etichetă și articolul trei titluri. În acest caz, s-ar folosi $ ( «articol: header»), mai degrabă decât $ ( «articolul h1, h2 articol, articolul h3" ). Și pentru a face codul mai rapid, puteți utiliza $ ( «articolul») Filtru ( «: Antet») - să ia cel mai bun din ambele lumi.. următorul cod poate fi folosit pentru numerotarea antet.

Considerații finale

Revizie: Echipa webformyself.

Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram