Share
Selectorii sunt de o importanță vitală. Majoritatea metodelor jQuery necesită un anumit tip de selecție a elementelor pentru a fi de folos. De exemplu, atașând a clic evenimentul unui buton vă cere să selectați mai întâi butonul.
Deoarece selectorii jQuery obișnuiți se bazează pe selectorii CSS existenți, s-ar putea să fiți foarte bine în ele. Cu toate acestea, există și câțiva selectori care nu sunt utilizați la fel de mult. În acest tutorial, mă voi concentra pe acești selectori mai puțin cunoscuți, dar importanți.
Acest selector este corect numit selectorul universal deoarece selectează toate elementele din document, inclusiv , , >
Accentsconagua
$ ("secțiune *") // Selectează toți descendenții $ ("secțiune> *") // Selectează toți descendenții direcți $ (" * a ") // Selectează linkurile de nivel 3Acest selector este extrem de lent dacă este utilizat în combinație cu alte elemente. Cu toate acestea, totul depinde de modul în care se utilizează selectorul și de browserul în care este executat. În Firefox, $ ("# selector> *") găsiți ("li") este mai lent decât $ ("# selector> ul") găsiți ("li"). Interesant este că Chrome execută $ ("# selector> *") găsiți ("li") ușor mai repede. Toate browserele se execută $ ("# selector *") găsiți ("li") mai lent decât $ ("# selector ul") găsiți ("li"). Aș sugera să comparați performanța înainte de a utiliza acest selector.
Aici este un demo care compară viteza de execuție a selectorului.
Puteți utiliza funcția :animat selector pentru a selecta toate elementele a căror animație este în desfășurare când acest selector este activat. Singura problemă este că va selecta numai elemente care au fost animate folosind jQuery. Acest selector este o extensie jQuery și nu beneficiază de creșterea performanței care vine cu limba nativă querySelectorAll () metodă.
De asemenea, nu puteți detecta animațiile CSS utilizând jQuery. Cu toate acestea, puteți detecta când animația se încheie cu ajutorul animationend eveniment.
Uitați-vă la următorul demo.
În demonstrația de mai sus, numai ciudat div elementele sunt animate înainte de executare . $ ( ": Animat") css ( "fundal", "# 6F9");. Ca urmare, numai aceia div elementele se transformă în verde. Imediat după aceea, numim funcția animată pe restul div elemente. Dacă faceți clic pe buton acum, toate div elementele ar trebui să devină verzi.
Selectorii obișnuiți de atribute detectează de obicei dacă există un atribut cu un anumit nume sau valoare. Pe de altă parte, [Attr! = "Valoare"] selectorul va selecta toate elementele care nu au atributul specificat sau unde atributul există, dar nu este egal cu o anumită valoare. Este echivalent cu : Nu ([attr = "valoare"]). Spre deosebire de [ "Valoare" attr =] , [Attr! = "Valoare"] nu face parte din specificația CSS. Ca rezultat, utilizarea $ ( "Css-selector"). Nu ( "[attr = 'value']") poate îmbunătăți performanța în browserele moderne.
Fragmentul de mai jos adaugă a nepotrivire clasă tuturor Li elemente ale căror elemente Categorii de date atributul nu este egal cu css. Acest lucru poate fi util în timpul depanării sau setării valorii corecte a atributului folosind JavaScript.
$ ("li" [data-category! = 'css'] ") fiecare (function () $ (this) .addClass (" mismatch "); ("data-category", attributeValue); // Setați valoarea corectă a atributului);În demo, am trecut prin două liste și am corectat valoarea atributelor de categorie a elementelor.
Acest selector este utilizat pentru a selecta toate elementele care conțin șirul specificat. Șirul de potrivire poate fi direct în interiorul elementului vizat sau în interiorul oricărui descendent al acestuia.
Exemplul de mai jos vă va ajuta să înțelegeți mai bine acest selector. Vom adăuga un fundal galben tuturor aparițiilor expresiei Lorem Ipsum.
Să începem cu marcarea:
Lorem Ipsum este pur și simplu un text fals al industriei de imprimare și de tipărire. Lorem Ipsum a fost textul standard al industriei de manechin încă din anii 1500, când o imprimantă necunoscută a luat o bucătărie de tip și a amestecat-o pentru a face o carte tip specimen. Ea a supraviețuit nu numai cinci secole, ci și saltul în tipărirea electronică, rămânând în esență neschimbată.
A fost popularizată în anii 1960, odată cu lansarea foilor Letraset care conțin pasajele Lorem Ipsum și, mai recent, cu software-ul pentru publicații desktop precum Aldus PageMaker, inclusiv versiunile de Lorem Ipsum.
Lorem Ipsum Link-ul WikipediaAcest lorem ipsum nu ar trebui evidențiate.
Observați această frază Lorem Ipsum apare în șapte locații diferite. Am folosit în mod deliberat capacele mici într-una din aceste instanțe pentru a arăta că potrivirea este sensibilă la minuscule.
Iată codul JavaScript pentru a evidenția toate meciurile:
$ (this) .html () înlocuiește (/ Lorem Ipsum / g, "$ (this)Lorem Ipsum")););Citatele din jurul șirului sunt opționale. Aceasta înseamnă că amândouă $ ("secțiune: conține (" Lorem Ipsum ")") și $ ("secțiune: conține (Lorem Ipsum)") va fi valabil în fragmentul de mai sus. Vizionez doar elementul secțiunii, astfel încât textul Lorem Ipsum din interiorul elementelor din listă să rămână neschimbat. În plus, datorită cazului nerecomandat, textul din interiorul celui de-al doilea secțiune element nu ar trebui să fie evidențiate nici. După cum puteți vedea în acest demo, exact așa se întâmplă.
Acest selector va selecta toate elementele care conțin cel puțin un element care se potrivește cu un selector dat. Selectorul care trebuie să se potrivească nu trebuie să fie un copil direct. : Are () nu face parte din specificația CSS. În browserele moderne, ar trebui să utilizați $ ( "-Css-selector pur"). Are (Selector) in loc de $ ( "-Css-selector pură: are (Selector)") pentru o performanță îmbunătățită.
O posibilă aplicare a acestui selector este manipularea elementelor care conțin un element specific în interiorul lor. În exemplul nostru, voi schimba culoarea tuturor elementelor din listă care conțin o legătură în interiorul lor.
Acesta este marcajul pentru demo:
Iată codul JavaScript pentru a schimba culoarea elementelor din listă:
$ ("li: are (a)") fiecare (funcția (index) $ (this) .css ("color";Logica din spatele acestui cod este destul de simplă. Am buclă prin toate elementele de listă care conțin o legătură și își fixează culoarea în culoarea purpurie. De asemenea, ați putea manipula textul în interiorul elementelor din listă sau le puteți elimina din DOM. Sunt sigur că acest selector poate fi folosit într-o mulțime de alte situații. Verificați o versiune live a acestui cod pe CodePen.
Pe lângă selectorii CSS : Nth-copil (), jQuery are, de asemenea, un set propriu de selectori bazați pe index. Acești selectori sunt : Eq (index), : Lt (index), și : Gt (index). Spre deosebire de selectorii bazați pe CSS, acești selectori utilizează indexarea bazată pe zero. Acest lucru implică faptul că în timp ce : Nth-copil (1) va selecta primul copil, : Eq (1) va selecta al doilea copil. Pentru a selecta primul copil, va trebui să îl utilizați : Eq (0).
Acești selectori pot accepta și valori negative. Când sunt specificate valori negative, numărarea se face înapoi începând de la ultimul element.
: Lt (index) selectează toate elementele care se află la un index mai mic decât valoarea specificată. Pentru a selecta primele trei elemente, veți folosi : Lt (3). Acest lucru se datorează faptului că primele trei elemente vor avea valori index 0, 1 și respectiv 2. Folosind un indice negativ, vom selecta toate valorile înainte de elementul pe care l-am atins după ce am numărat înapoi. asemănător, : Gt (index) selectează toate elementele cu index mai mare decât valoarea specificată.
: lt (4) // Selectează primele patru elemente: lt (-4) // Selectează toate elementele în afara ultimului 4: gt (4) // Selectează toate elementele în afară de primul 5: gt (-4) : gt (-1) // Selectează Nimic: eq (4) // Selectează al cincilea element: eq (-4) // Selectează al patrulea element din ultimul
Încercați să faceți clic pe diferite butoane din demo pentru a obține o mai bună înțelegere a selectorilor de index.
jQuery definește o mulțime de selectori pentru selectarea ușoară a elementelor de formă. De exemplu, :buton selectorul va selecta toate elementele butonului, precum și elementele cu buton de tip. asemănător, :Caseta de bifat va selecta toate elementele de intrare cu caseta de selectare de tip. Există selectori definiți pentru aproape toate elementele de intrare. Luați în considerare formularul de mai jos:
Am creat două elemente de text aici și patru casete de selectare. Formularul este destul de fundamental, dar ar trebui să vă dau o idee despre cum funcționează selectorii de forme. Vom număra numărul de elemente de text folosind :text selector și, de asemenea, să actualizeze textul din prima introducere de text.
var textCount = $ (": text") lungime; text ("Intrări de text:" + textCount); $ (": text"). eq (0) .val ('Adăugat programat!');eu folosesc :text pentru a selecta toate intrările de text și apoi metoda lungimii pentru a calcula numărul acestora. În a treia declarație, folosesc discuția discutată anterior : Eq () selector pentru a accesa primul element și pentru a-și stabili ulterior valoarea.
Rețineți că începând cu jQuery 1.5.2, :text se intoarce Adevărat pentru elementele care nu au specificat niciun atribut de tip.
Aruncați o privire la demo.
Dacă doriți vreodată să selectați toate elementele de titlu dintr-o pagină web, puteți utiliza scurtul $ ( ": Header") versiune în loc de verbose $ ("h1 h2 h3 h4 h5 h6") selector. Acest selector nu face parte din specificația CSS. Ca rezultat, o performanță mai bună ar putea fi obținută folosind un selector CSS pur și apoi folosind .se filtrează ( ": header").
De exemplu, presupuneți că există un articol element pe o pagină web și are trei titluri diferite. Acum, ai putea folosi $ ("articol: antet") in loc de $ (articolul h1, articolul h2, articolul h3) pentru scurtcircuit. Pentru a le face mai rapid, puteți folosi $ ( "Articol") se filtrează. ( ": Header"). În acest fel, aveți cele mai bune din ambele lumi.
Pentru a numera toate elementele de titlu, puteți utiliza următorul cod.
$ (this) .text ((index: +)): "+ $ (this) .text ()); // adaugă numere la rubrici );
Încercați acest demo de însoțire.
În acest tutorial, am discutat despre selectori neobișnuiți pe care i-ați putea întâlni când utilizați jQuery. În timp ce majoritatea acestor selectori au alternative pe care le puteți utiliza, este bine să știți că acești selectori există.
Sper că ați învățat ceva nou în acest tutorial. Dacă aveți întrebări sau sugestii, vă rugăm să faceți comentarii.
