Exerciții practice pentru biblioteca jQuery
Toate paragrafele p, în interiorul cărora
există tagul b, împăturile-le
în tagul div.
Găsiți toate paragrafele p cu clasa
www, puneți-le la început textul
'!', apoi adăugați la aceste paragrafe
și titlurile h1-h6 și
vopsiți aceste paragrafe și titluri în roșu.
Găsiți toate paragrafele p și înlocuiți-le
cu tagul div cu același conținut.
Găsiți toate căsuțele de bifat pe pagină și blocați pe cele pare dintre cele găsite.
Puneți tuturor
neblocate
căsuțelor de bifat
starea <a href="/ro/markup/manual/html/attr/checked/">'bifat'</a>.
Este dat elementul #test. Puneți vecinului său
direct de sus textul '!', iar vecinului
de jos - textul '?'. Rezolvați problema cu un singur
lanț.
Este dat elementul #test. Puneți vecinilor săi direcți
de sus și de jos textul elementului #test.
Este dat elementul #test. Găsiți printre vecinii săi de sus
cel mai apropiat paragraf și puneți-i textul elementului
#test.
Găsiți al doilea li de pe pagină,
adaugați-i clasa www, împăturiți-l
în interior cu tagul i, inserați după
el li cu textul 'salut'.
Găsiți al zecelea li de pe pagină,
găsiți părintele său, obțineți vecinul
direct al părintelui de sus, împăturiți-l în
<div class="www"></div>.
Fiecărui paragraf p, cu excepția paragrafelor
cu clasa www, adăugați la sfârșit numărul său
de ordine.
Găsiți toate paragrafele p și puneți
înaintea fiecărui paragraf o copie a lui. Copia vopsiți-o
în roșu, iar paragraful original în verde.
Găsiți paragrafele p, care stau
direct sub h2
și mutați fiecare paragraf astfel încât acesta
să se pună direct deasupra h2.
Găsiți toate paragrafele goale p
(fără text) și inserați în ele textul
vecinului direct de sus.
Părintelui tagului b, dacă acesta este
un element cu clasa www sau un paragraf
p, puneți culoarea roșie și
dimensiunea
textului în 30px.
Tuturor paragrafelor goale p puneți
textul celui mai apropiat tag h2 de deasupra lor.
Sunt date câmpurile de introducere cu numere. Faceți astfel încât în câmpurile de introducere să se afle pătratele acestor numere.
Este dat elementul #test. Puneți-i la început textul
vecinului direct de sus, iar la sfârșit
- textul vecinului direct de jos.
Este dat elementul #test. Găsiți al doilea vecin al său
de sus și al doilea vecin al său de jos. Faceți
astfel încât elementele găsite să schimbe
textul (vecinul de sus să ia textul vecinului
de jos și invers).
Este dat elementul div. Selectați
din el toți descendenții direcți, care
nu sunt titluri și vopsiți-i în
roșu.
Găsiți toate paragrafele p, vopsiți-le
în roșu. Apoi selectați dintre paragrafele găsite
paragrafele cu clasa www și puneți-le
textul '!'.
Găsiți toate paragrafele p cu clasa
www, vopsiți-le în roșu.
Apoi selectați dintre paragrafele găsite primul
și puneți-i textul '!', apoi selectați
ultimul și acestuia puneți-i textul '?'.
Rezolvați problema cu un singur lanț.
Găsiți toate paragrafele p, puneți
fiecăruia dintre ele la sfârșit același text, care
se află în interiorul lui (adică textul din paragraf
va fi scris de două ori).
Găsiți toate paragrafele p, puneți
fiecăruia dintre ele la sfârșit numărul său de ordine
în set.
Sunt date paragrafe cu numere. Puneți fiecăruia dintre ele la sfârșit numărul, care este stocat în el, înmulțit cu numărul său de ordine în set.
La click pe paragraful p ștergeți
vecinii săi direcți de sus și de jos.
La click pe paragraful p ștergeți
toți vecinii săi de sus până la primul titlu
h1-h6 (adică elementele, care stau
deasupra acestui titlu și titlul însuși
să nu fie șterse).
La click pe paragraful p ștergeți
cel mai apropiat vecin de jos al său cu
clasa www.
La click pe paragraful p ștergeți
al cincilea vecin al său de jos.
La click pe paragraful p ștergeți
al cincilea vecin al său de jos, dacă acesta nu este
h2.
La click pe paragraful p ștergeți
al cincilea vecin al său de jos, dacă acest vecin
nu are în interiorul său tagul b.
La click pe paragraful p ștergeți
al cincilea vecin al său de jos, dacă acest vecin
nu stă direct după h2.
Este dat elementul #test. Schimbați acest
element pe loc cu vecinul său direct
de jos.
Este dat elementul #test. După
vecinul său direct de jos inserați
o copie a elementului nostru.
Este dat elementul #test. Schimbați acest
element pe loc cu cel mai apropiat vecin
de jos cu clasa www.
Găsiți toate paragrafele p, care
în interiorul unui părinte se află între un
și alt h2.
Împăturiți fiecare paragraf p în exterior
și în interior în div.
Găsiți toate paragrafele p, la
care părintele direct nu este div
și împăturiți fiecare dintre ele în <div class="www"></div>.
Găsiți toate paragrafele p. Ștergeți
părintele lor (faceți-i unwrap),
dacă acest părinte nu este div cu clasa
www. Apoi pentru acele paragrafe, la care
a fost șters părintele, împăturiți-le în div
cu clasa zzz.
Găsiți toți părinții elementului #test
și creați un array din clasele CSS ale acestor părinți.
Găsiți toate paragrafele p, la care există
atributul class, și fiecare dintre ele
împăturiți în div cu aceleași clase,
ca și la paragraful găsit, iar clasele fiecărui
paragraf ștergeți împreună cu atributul class.
Găsiți toate paragrafele p din
#test, puneți-le la sfârșit textul
'!', apoi excludeți dintre paragrafele găsite
paragrafele cu clasa www și celor rămase
puneți culoarea roșie.
Găsiți toate li de pe pagină,
apoi înaintea penultimului dintre cele găsite inserați
încă un li cu textul 'punct'.
Găsiți toate li de pe pagină,
apoi selectați dintre cele găsite al doilea, al treilea
și al patrulea de la sfârșit și puneți-le textul
'!'.
Găsiți ol cu #test
și rearanjați toate li
din el în ordine inversă.
Este dat elementul #test. Găsiți toți
vecinii săi de sus și toți vecinii săi de jos și
schimbați-le pe loc (adică tot ce stă
înaintea elementului, să treacă după el și invers).
Obțineți toate li cu clasa
www, faceți-le culoarea roșie, apoi
găsiți dintre cele găsite acele li,
la care există clasa bbb și ștergeți-le.
Rezolvați totul cu un singur lanț.
Obțineți toate li de pe pagină. Cele pare
dintre cele obținute faceți-le goale, iar
cele impare ștergeți-le.
Găsiți toate tagurile div și dublați-le
înălțimea.
Găsiți suma înălțimilor tuturor div
de pe pagină.
Pentru elementul #test găsiți cel mai apropiat
părinte cu clasa www, la sfârșitul acestui
părinte adăugați un paragraf cu textul '!'.
La click pe elementul #test găsiți
cel mai apropiat părinte cu clasa www, în interiorul
acestui părinte găsiți toate paragrafele și vopsiți-le
în roșu.
Vopsiți primele 10 li
de pe pagină în roșu.
Vopsiți de la 5-lea până la 10-lea li
de pe pagină în roșu.
Găsiți ultimele 10 li
de pe pagină, vopsiți-le în roșu.
Apoi dintre cele găsite găsiți li pare
și împăturiți-le în interior în tagul b.
Pe pagină sunt date căsuțe de bifat. Numărați câte dintre ele sunt bifate.
Sunt date 5
căsuțe de bifat.
Faceți astfel încât după ce utilizatorul
a bifat două dintre ele, toate căsuțele de bifat
să se blocheze.
Faceți astfel încât toate bifatele căsuțe de bifat și să-și schimbe starea pe nebifat și invers.
Este dat câmpul de introducere.
Mutați conținutul atributului value în atributul
placeholder,
iar atributul value ștergeți-l cu totul.
Este dată legătura.
Dacă atributul href începe cu http://,
adaugați legăturii atributul target="_blank".
Este dat câmpul de introducere, în care se poate introduce un număr. Faceți astfel, încât la introducerea numărului în acest câmp și la pierderea focusului pe pagină să se caute căsuța de bifat cu acest număr și să devină bifată, iar celelalte căsuțe de bifat să devină nebifate.
Sunt date selectorul și butoanele radio, numărul de butoane radio este egal cu numărul de puncte din selector. Faceți astfel încât la alegerea punctului în selector să devină automat bifat butonul radio corespunzător (corespondența după numărul de ordine: primul punct din listă - primului radio și așa mai departe).