Elementu izvēle
CSS selektoru izmantošana
jQuery izmanto standarta CSS-selektorus. Visticamāk, ka esat ar tiem jau pazīstami.
Atmiņas atsvaidzināšanai daži piemēri:
a - tiks izvēlētas visas hipersaites (<a>);
#someid - tiks izvēlēts elements ar id = someid;
.someclass - tiks izvēlēti visi elementi ar klasi someclass;
a#someid.someclass - tiks izvēlēta hipersaite ar id = someid un klasi someclass;
p a.someclass - tiks izvēlētas visas hipersaites ar klasi someclass , kas iekļautas paragrāfā (<p>); Tādējādi, lai jQuery izmantotu selektoru, tas jāieraksta mums jau zināmajā konstrukcijā $(), piemēram šādi:
$('p a.someclass') Selektori pēc atribūtiem, meitas-elementiem un konteineriem
Šie ir vairāk attīstīti selektori, ko izmanto meitas-elementu izvēlei, kā arī elementu, kuri seko citiem DOM elementiem un elementiem ar atribūtiem, atbilstošiem noteiktiem nosacījumiem.
Izmantojot meitas-elementu selektorus (child selector) no mātes-selektora tas tiek atdalīts ar simbolu >, piemēramp > a
Ja šī hipersaite būs bijusi iekļauta kādā starpelementā, tā netiks izvēlēta.
Apskatīsim selektorus pēc to atribūtiem (attribute selectors).
Piemēram, ja vēlamies izvēlēties visas hipersaites, kuras ved ārpus mājaslapas (uz citām lapām).
Tas tiek darīts šādi:
a[href^=http://]Šis selektors norāda uz visām hipersaitēm, kuru href vērtība sākas ar на http://. Simbols ^ nozīmē to, ka meklējamā izteiksme būs pārbaudāmās rindas sākumā.
Cits piemērs selektoram pēc tā atribūta:
form[method]Selektors izvēlas visus elementus <form> kuriem uzrādīts atribūts method.
Lai izvēlētos konkrētu atribūta vērtību, sastādām šādu izteiksmi:
input[type=text]Nākamais piemērs ataino jau apskatīto meklēšanu rindas sākumā, bet tagad pielietosim to atribūta vērtības meklēšanai:
div[title^=my]Tādējādi mēs izvēlēsimies visus <div>, kuriem title sākas ar my.
Bet kā būtu ar meklēšanu rindas beigās?
Skatāmies:
a[href$=.pdf]Šādi mēs varam atrast visas hipersaites, kas norāda uz PDF failiem.
Ja vēlamies atrast vērtību jebkurā rindas pozīcijā, rīkojamies sekojoši:
a[href*=jquery.com]Sapratāt? Tiks atrastas jebkādas hipersaites uz mājaslapu jquery.com.
Nākamais selektoru veids - konteineru selektors (container selector):
li:has(a)Šis selektors izvēlas visus elementus <li>, kuri satur <a>. Pie kam šādus selektorus var iekļaut vienu otrā līdz vienam līmenim:
li:has(p:has(a));Šāds variants jau nedarbosies:
li:has(p:has(a:has(b)));Tabulā attēloti jQuery atbalstītie CSS selektori.
| Selektors | Apraksts |
|---|---|
| * | Visi elementi |
| Е | Visi Е elementi |
| E F | Visi elementi F kuri seko aiz E |
| E>F | Visi elementi F, kuri ir tieši meitas-elementi elementam E |
| E+F | Visi elementi F, kuri atrodas tieši pirms elementa E, pie kam F un E abi ir meitas-elementi. |
| E~F | Visi elementi F, kuri atrodas pirms elementa E, pie kam F un E abi ir meitas-elementi. |
| E:has(F) | Visi elementi E, kam ir kaut viens meitas-elements F |
| E.C | Visi elementi E ar klasi С. Lai izvēlētos jebkādus elementus ar klasi С, izmantojiet selektoru *.С |
| E#I | Visi elementi E ar identifikātoru I. Lai izvēlētos jebkādus elementus ar identifikātoru I, izmantojiet selektoru *#I |
| E[A] | Visi elementi E ar jebkādas vērtības A atribūtu |
| E[A=V] | Visi elementi E ar atribūtu A , kurš vienāds ar V |
| E[A^=V] | Visi elementi E ar atribūtu A , kura vērtība sākas ar V |
| E[A$=V] | Visi elementi E ar atribūtu A , kura vērtība beidzas ar V |
| E[A*=V] | Visi elementi E ar atribūtu A , kura vērtība satur V |
Izvēle pēc pozīcijas.
Dažreiz nepieciešams izvēlēties elementu pēc tā pozīcijas attiecībā pret citiem lapas elementiem. jQuery tas ir iespējams.
Skatāmies:
a:first
// Šādi tiks izvēlēts pirmais <a> elements lapā.
p:odd
// Šāds selektors izvēlēsies visus nepāra paragrāfus lapā.
p:even
// Šeit tiks izvēlēti pāra paragrāfi.Tabulā var apskatīt citus piemērus elementu izvēlai pēc to pozīcijas lapā.
| Selektors | Apraksts |
|---|---|
| :first | Pirmais elements lapā. |
| li a:first | Pirmā hipersaite, kas atrodas saraksta elementa li iekšienē. |
| :last | Pēdējais elements lapā. |
| :odd | Visi nepāra elementi lapā. |
| :even | Visi pāra elementi lapā. |
| :first-child | Pirmais meitas-elements. |
| li:first-child | Izvēlēsies katra saraksta pirmo elementu. |
| :last-child | Pēdējais meitas-elements. |
| :only-child | Izvēlēsies elementus, kuriem ir [kaut] viens meitas-elements. |
| :nth-child(n) | Izvēlēsies n-to meitas-elementu. Piemēram, li:nth-child(2) izvēlēsies katra saraksta otro elementu. |
| :nth-child(even|odd) | Pāra vai nepāra meitas-elements. Piemēram, :nth-child(even) izvēlēsies visus pāra elementus katrā sarakstā. |
| :nth-child(Xn+Y) | Izvēlēsies meitas-elementu, Kura pozīcija izskaitļota pēc formulas. Ja Y vienāds ar 0, to var izlaist. Piemērs: li:nth-child(3n) izvēlēsies elementus 0, 3, 6 u.t.t., li:nth-child(5n+1) izvēlēsies elementus 1,6,11 u.t.t. |
| :eq(n) | Izvēlēsies n-to elementu. |
| :gt(n) | Izvēlēsies elementu, kurš seko aiz n-tā. |
| :lt(n) | Izvēlēsies elementu, kurš atrodas pirms n-tā. |
| Nianse: selektors nth-child sāk skaitīt no 1, izņemot nth-child(Xn+Y), kurš sāk skaitīt n tomēr no nulles; visi pārējie tabulā apskatītie selekori elementus skaita no 0. | |
Speciālo selektoru izmantošana jQuery kodā
CSS selektori, protams, ir labi, tomēr dažreiz mums nepieciešams izvēlēties īpašus elementus, piemēram, visus čekboksus, kurus lietotājs atzīmējis.
Šādam nolūkam jQuery piedāvā izmantot selektoru :checked.
Piemēram šādā formā:
input:checked| Selektoru tabula | |
|---|---|
| Selektors | Apraksts |
| :animated | Izvēlas elementus, kuri izpilda animāciju. |
| :button | Izvēlas visas pogas (input[type=submit], input[type=reset], input[type=button], vai vienkārši button). |
| :checkbox | Izvēlas visus čekboksus (input[type=checkbox]). |
| :checked | Izvēlas visus atzīmētos čekboksus. |
| :contains(foo) | Izvēlas elementus, kuri satur tekstu foo. |
| :disabled | Izvēlas visus elementus ar īpašību disabled. |
| :enabled | Izvēlas visus elementus ar īpašību enabled. |
| :file | Izvēlas failu ielādes laukus (input[type=file]). |
| :header | Izvēlas visus HTML virsrakstu elementus (no <h1> līdz <h6>). |
| :hidden | Izvēlas visus slēptos elementus. |
| :image | Izvēlas visus elementus input ar tipu image (input[type=image]). |
| :input | Izvēlas visus formas elementus (input, select, textarea, button). |
| :not(filter) | Izvēlas visus elementus, kuri neatbilst filtram (par to vēlāk). |
| :parent | Izvēlas visus elementus, kuriem ir kaut ko saturoši meitas-elementi. |
| :password | Izvēlas paroles ievades laukus(input[type=password]). |
| :radio | Izvēlas radio elementus (input[type=radio]). |
| :reset | Izvēlas attīrīšanas pogas (input[type=reset] vai button[type=reset]). |
| :selected | Izvēlas visus elementus ar īpašību selected. |
| :submit | Izvēlas formas nosūtīšanas pogas (input[type=submit] vai button[type= submit]). |
| :text | Izvēlas tikai teksta ievades laukus (input[type=text]). |
| :visible | Izvēlas tikai redzamos elementus. |
| Pieļaujamas šādas selektoru kopsakarības | |
Pieļaujamas šādas selektoru kopsakarības
Piemēram:
:radio:checkedvai
:checkbox:checked:enabledFiltra vērtības inversijai tiek izmantots tabulā norādītais filtrs :not:
input:not(:checkbox)Šādi mēs izvēlēsimies visus elementus input, izņemot čekboksus.
Pievērsiet uzmanību, ka
div p:not(:hidden) - pareizi
div :not(p:hidden) - nepareizi.
HTML ģenerēšana
Koda ģenerēšanā tiek izmantota mums jau zināmā funkcija $().
Piemēram,
$('<div>Sveiki</div>');Ja vēlamies izveido tukšu elementu <div>, tas ir vēl vienkāršāk:
$('<div>');kas ir tas pats, kā $('<div></div>') vai $('<div/>').
Tomēr saīsinātā veidā nevar ģenerēt pilnvērtīgus elementus <script>.
Iekļauto elementu vadība
Šeit mēs apgūsim elementārākās darbības ar iekļautajiem elementiem.
Iekļaušanas izmēra noteikšana
Iekļauto elementu komplekts iekš jQuery ir ļoti līdzīgs JavaScript masīvam.
Tam ir pat īpašība length, kura satur iekļauto elementu skaitu.
Metode size() ļauj mums šo skaitu uzzināt.
Piemēram, saskaitīsim visas lapas hipersaites:
$('#someDiv').html('Lappusē atrodas '+$('a').size()+' hipersaites.');Šajā gadījumā meklēšana notika elementā ar identifikātoru #someDiv.
Metode html() tiks apskatīta nedaudz vēlāk.
Elementu izvilkšana no iekļāvumu komplekta.
Kā jau tika minēts, iekļāvumu komplekts ļoti līdzīgs JavaScript masīvam, tāpēc elementu izvilkšana no komplekta iespējama pēc to numerācijas pēc indeksa, piemēram:
$('img[alt]')[0]dod mums pirmo elementu no visiem <img> lapā, kam ir atribūts alt.
Pie kam, jQuery ir speciāla funkcija get(), kura izpilda līdzīgu darbību:
$('img[alt]').get(0)Ja elementa indekss nav norādīts, saņemsim visu elementu komplektu.
Bet ko darīt, ja mums jāveic pretēja operācija - jāatrod konkrēta elementa indekss? Šādam nolūkam ir funkcija index().
var n = $('img').index($('img#findMe'));Šādi mēs uzzināsim indeksu attēlam ar identifikātoru findMe starp pārējiem attēliem šajā lapā.
Ja meklējamais elements netiek atrasts, funkcija atgriež vērtību -1.
Komplekta izmēru maiņa
Elementu pievienošana komplektam
Sākumam šāds piemērs: mēs vēlamies izvēlēties visus attēlus, kuriem ir atribūts title vai alt.
Darīsim to šādi:
$('img[alt], img[title]')To pašu var paveikt ar speciālu metodi add():
$('img[alt]').add('img[title]')Šī metode apvieno selektorus, pielietojot loģisko VAI. Metodē add() var tikt izmantots selektors-rinda, HTML koda fragments (šajā gadījumā elementi tiks izveidoti un pievienoti komplektam) vai DOM elementi (kuri tiks pievienoti komplektam).
Piemēram:
$('p').add('<div>Sveicināti, tautieši!</div>')Komplekta satura filtrēšana
Izslēgt elementu no komplekta pēc kāda tā parametra ļauj metode not().
Pieņemsim, mums jāizvēlas visi attēli, izņemot tos, kuru atribūts alt satur tekstu puppy.
Tādējādi rakstām:
$('img[title]').not('[title*=puppy]')Jāatzīmē, ka metodei not() netiek nodots elementa tips, bet tikai tā parametrs, pēc kura elements jāizslēdz no komplekta (tāpēc mēs rakstījām not('[title*=puppy]') nevis not('img[title*=puppy]')).
Bet ko darīt, ja komplekts jāatfiltrē, izmantojot izteiksmi? Tam paredzēta metode filter(), kura izmanto tai nodoto funkciju attiecībā pret katru komplekta elementu.
Piemēram, izvēlēsimies tabulas elementus, kuri satur skaitliskas vērtības:
$('td').filter(function(){return this.innerHTML.match(/^d+$/)})Ja funkcijas rezultāts būs false, elements tiks izslēgts no komplekta.
Apakškomplektu veidošana
Dažreiz rodas vajadzība izdalīt no komplekta daļu elementu, balstoties uz to pozīcijām komplektā.
Tam jQuery paredz metodi slice(), kura atgriež jauno elementu komplektu (pie kam vecais komplekts paliek bez izmaiņām).
Sintakse ir sekojoša:
slice(begin, end)kur begin - pirmā elementa numurs, ar kuru jāsāk izdalīt apakškomplektu (numerācija sākas ar 0), bet end - elementa numurs, kurš vairs netiks iekļauts apakškomplektā (ja to nenorāda, apakškomplektā tiks iekļauta visa atlikusī komplekta daļa).
Piemēram, izvēlēsimies pirmos četrus komplekta elementus:
$('*').slice(0,4)Komplektu veidošana uz attiecību pamata
jQuery ļauj izveidot jaunu komplektu uz vecā pamata, balstoties uz iekļautā elementa stāvokli attiecībā pret citiem.
Tabulā attēlotas šādas metodes un to apraksti.
| Metodes un to apraksti | |
|---|---|
| Selektors | Apraksts |
| children() | Atgriezīs elementa unikālos meitas-elementus. |
| contents() | Atgriezīs visus komplekta meitas-elementus (ieskaitot teksta elementus) |
| next() | Atgriezīs visus sekojošos konkrētā elementa unikālos māsas-elementus. |
| nextAll() | Atgriezīs visus sekojošos konkrētā elementa māsas-elementus. |
| parent() | Atgriezīs unikālos elementa mātes-elementus. |
| parents() | Atgriezīs visus unikālos elementa mātes-elementus. |
| prev() | Atgriezīs visus iepriekšējos konkrētā elementa unikālos māsas-elementus. |
| prevAll() | Atgriezīs visus iepriekšējos konkrētā elementa māsas-elementus. |
| siblings() | Atgriezīs visus konkrētā elementa māsas-elementus |
Piemēram, $('li').children() atgriezīs elementu komplektu, kurš iekļauts elementā <li>.
Vēl daži piemēri darbam ar iekļautajiem elementiem
Metode find() atgriež jaunu komplektu, kurš satur selektoram atbilstošus elementus.
Piemēram, izvēlēsimies visus citātus <cite> paragrāfa <p> iekšienē no komplekta, kuru satur mainīgais wrappedSet:
wrappedSet.find('p cite')Metode contains() elementu komplektu, kuri satur metodei nodoto rindu.
Piemēram:
$('p').contains('Lorem ipsum')Piemērs atgriezīs komplektu no elementiem <p>, kuri satur tekstu «Lorem ipsum».
Pēdējā metode šajā sarakstā ļauj pārbaudīt, vai komplekts satur kaut vienu elementu, ar metodei nodoto atbilstošo selektoru.
Metode is() atgriezīs true, ja tiks atrasts kaut viens atbilstošs elements, vai false, ja selektoram atbilstoši elementi atrasti netiks.
Piemērs:
var hasImage = $('*').is('img');Tādējādi mainīgajam hasImage tiks piešķirta vērtība true, ja lappusē atrodas elements <img>.
Virkņu vadība iekš jQuery
Iekš jQuery ir iespēja savienot metodes virknēs, kas ļauj izveidot efektīvas operācijas. Apskatīsim pāris metodes.
Par piemēru ņemsim metodi clone() (sīkāk par šo metodi - vēlāk). Šī metode veido komplekta elementu kopiju. Apskatīsim sekojošu piemēru:
$('img').clone().appendTo('#somewhere');Rezultātā tiks izveidoti divi komplekti: viens - no visiem elementiem <img> lapā, bet otrs no šo elementu kopijām.
Metode clone() atgriezīs mums šo otro komplektu un pielietos tam metodi appendTo().
Bet ko darīt, ja mēs vēlamies, piemēram, izmainīt oriģinālā komplekta klasi pēc tam, kad tas ticis nodublēts.
Tas ir, veikt kādu darbību nevis ar kopiju, bet ar oriģinālu? Jo pēc metodes clone() strādāsim mēs tieši ar kopiju.
Šādā situācijā mums palīdzēs end(). Ar tā palīdzību mēs pārslēgsimies darbam ar oriģinālo komplektu.
Skatāmies piemēru:
$('img').clone().appendTo('#somewhere').end().addClass('beenCloned');Šajā gadījumā addClass() tiks pielietots oriģinālajam komplektam, bet ja netiktu izmantots end() - tas tiktu pielietots klonētajam komplektam.
Un pēdējā metode šajā daļā - andSelf(), pielieto metodi pret diviem iepriekšējajiem komplektiem.
Piemērs:
$('div').find('p').andSelf().addClass('border');
$('div').find('p').addClass('background');Meklējam visus elementus div un visus elementus p tajos, bet pēc tam piešķiram tiem divas atšķirīgas klases.
Tomēr pievērsiet uzmanību, ja pirmajā rindā mēs p elementu komplektam pievienojām arī pirms tā esošo div, tad otrajā rindā mēs noteicām klasi, kura nosaka fona krāsu elementiem p kuri atrodas div iekšienē, bet ne pašam elementam div.
