Cum se utilizează pentru a selecta selectori jquery elemente din pagină
În mod normal, selectoare jQuery sunt folosite pentru a selecta elemente din pagină pentru a apela apoi metode jQuery pentru a le manipula.
selectoare JQuery se bazează pe selectori CSS, și dacă știi CSS, are deja o înțelegere de bază a ideii de selectarea elementelor de pe pagină.
În această lecție ne vom uita la selectorii care sunt acceptate de jQuery. Multe dintre ele sunt la fel ca selectori CSS, dar există, de asemenea, specifice jQuery. Pentru fiecare selector este un exemplu de selecție pentru elementul de pagină.
Lecția cuprinde următoarele secțiuni:
jQuery acceptă numai cele selectori CSS, elemente DOM, care sunt selectate. De exemplu. Am vizitat. hover și: prima linie nu sunt acceptate.
selectori cheie
selectori cheie familiare pentru tine, dacă vreodată ați creat cel puțin un șablon CSS. cel mai probabil, veți utiliza selecții de date pentru 90% din timpul de lucru cu jQuery:
Puteți combina, de asemenea, mai multe selectoare într-una cu o virgulă. jQuery selectați toate elementele care se potrivesc cu oricare dintre selectorii. De exemplu:
Selectarea elementelor în funcție de atribute
selectori cheie sunt ideale în cazul în care aveți nevoie pentru a selecta toate punctele de pe pagina sau elementul pe care doriți să alegeți o clasă CSS sau ID-ul.
Cu toate acestea, uneori, trebuie să selectați un anumit element care nu are nici o clasă sau ID-ul, și nu puteți doar să adăugați o clasă sau ID-ul elementului din marcaj. O astfel de situație poate apărea atunci când se utilizează CMS cu un șablon HTML fix sau utilizarea conținutului creat de către utilizator.
Această situație se poate restrânge selecția folosind atributul elementului HTML care ar trebui să fie selectate. De exemplu, puteți selecta:
- Imaginea de atribut src
- Link atribut href
- Toate formele câmpurile de introducere, care au tipul de atribut = „caseta“
jQuery are o mulțime de selecții care pot fi folosite pentru a selecta elemente în funcție de atribute:
element (e) Selecteazã care conțin atribut specific indiferent de valoarea atributului.
element (e) Selectează care conțin un atribut predeterminat, cu o valoare predeterminată.
Atribut nu este egal cu
Selectează element (e) care nu conțin un atribut dat sau sozherzhat atribut dat, dar valoarea nu se potrivește.
Atribut începe cu
element (e) Selectează care conțin un atribut predeterminat, a cărui valoare începe cu o anumită linie.
element (e) Selectează care conțin atributul, a cărei valoare este dată capetele șir.
element (e) Selectează care conține un atribut a cărui valoare conține șirul specificat.
Atribut conține cuvântul
element (e) Selectează care conține un atribut a cărui valoare include un cuvânt predeterminat. „Cuvântul“ - o secvență de caractere fără spații.
Atribut conține prefixul
element (e) Selectează care conține un atribut a cărui valoare este fie egală cu linia predeterminată sau începe cu un anumit rând, urmat de o cratimă.
Puteți combina selectorii de atribute pentru a restrânge domeniul de alegere. De exemplu:
Selectorul „atribut conține prefixul“ pare ineficient, dar se face pentru o procesare a limbajului atribute, cum ar fi lang = „ro“ și lang = „en-US“.
Selectarea elementelor în funcție de conținut
Dacă nu puteți restrânge selecția selectorii de bază și atributele, este posibil să „sape“ în elementul conținut pentru a determina, este potrivit pentru selectarea sau nu. jQuery Selector 4 are în acest scop:
Element (e) Selectează care conțin textul specificat. Textul poate fi elementul în sine și în orice element dintr-un element selectat. Notă. conține () este sensibil la majuscule - „Bună ziua“ nu se potrivește cu „salut“.
// Selectați toate div, care conțin "myText":
$ ( "Div: conține ( 'myText')")
element (e) Selectează care conțin unul sau mai multe elemente care corespund liniei specificate. Selector analizează toate elementele care se potrivesc în cadrul elementului predeterminat.
// Selectați toate div, care conține paragrafe:
$ ( "Div: are (p)")
Selectează element (e) care conțin alte elemente sau noduri de text.
// Selectați toate div, care conține ceva:
$ ( "Div: părinte")
Element (e) Selectează care nu conțin alte elemente sau noduri de text.
// Selectați toate div, care nu conțin nimic:
$ ( "Div: gol")
Următorul exemplu arată modul de utilizare: conține (). împreună cu selectorul de clasă pentru selectarea secțiuni, care au o anumită clasă, condiția suplimentară este condiția ca conținutul unui anumit rând (sau rânduri):
Selectarea elementelor după structură ierarhică
Un alt mod de a selecta elemente în jQuery - este să ia în considerare modul în care acestea se referă la unul pe altul pe pagină. Probabil că știi multe dintre aceste selecții pentru a lucra cu CSS:
Element (e) Selectează că sunt copil (descendent direct) a unui anumit părinte (e).
// Selectează toate elementele de listă cu o clasă de „highlight“, care este un copil al listei cu ID-ul „nav“:
$ ( "Ul # nav> li.highlight")
Selectează element (e) care sunt descendenți (copii, nepoți, și așa mai departe) strămoș specificat (e). Aceasta este o formă mai comună a selectorului pentru copii.
// Selectați toate link-urile din lista cu ID-ul „nav“:
$ ( "Ul # nav un")
Urmatorul frate
element (e) Selectează care urmează imediat elementul dat, în care ambele elemente au același părinte.
// Selectează toate punctele care urmează imediat titlul H1:
$ ( "H1 + p")
Element frate următor
Element Selectează (e), care urmează celălalt element, în care ambele elemente sunt descendenți ai unui părinte. Aceasta este o versiune mai generalizată a următorului selector frate.
// Selectați toate celulele din tabel, după o celulă care conține cuvântul „Hello“:
$ ( „Td: conține ( 'Hello')
Element Selectează (e), care este primul copil al părintelui său.
// Selectați primele elemente din toate listele de pe pagina:
$ ( "Li: primul-copil")
Element Selectează (e), care este ultimul copil al părintelui său.
// Selectați ultimele elemente din toate listele de pe pagina:
$ ( "Li: ultimul copil")
Element (e) Selectează, care este n-lea copil al părintelui său (a se vedea nota de mai jos).
// Selectați al treilea paragraf, în toate listele pe pagina:
$ ( "Li: nth-copil (3)")
Selectează element (e), care sunt copilul părinților care au doar copii.
// Selectați numai elementele dintr-un singur element din listă:
$ ( "Li: numai copil")
În plus față de stabilirea unui anumit număr al copilului cu ajutorul: nth-copil (). poate indica chiar (pentru a selecta toți copiii chiar și număr), impar (pentru a selecta toți copiii cu numere impare) sau de exprimare (de exemplu, „li: nth-copil (3n + 2)“, selectați fiecare al treilea element din listă și numărul de Acesta începe cu al doilea element).
Exemplul următor selectează prima celulă din rândurile impare din tabel care are id-ul „MyTable“.
Alegerea câmpurilor de formular
elemente de formular au anumite proprietăți specifice, care sunt nevoite să utilizeze unele trucuri pentru alegerea lor. De exemplu, verificați cutii, împreună cu multe alte tipuri de domenii, sunt elementele de intrare. Astfel. pentru a selecta casetele de selectare din formularul trebuie să utilizați $ ( „input [type =«caseta de selectare»]“).
În mod similar, identificarea elementelor selectate din lista de culori sau casetele de selectare marcate pe formularul poate fi plictisitor. /
Din fericire, jQuery oferă o serie de forme specifice de selectoare care fac viața mai ușoară:
Selectează toate câmpurile disponibile.
Următorul exemplu caută forma care are atributul de acțiune cu o valoare de „mailform.php“. atunci toate selectează marcate în formă de butoane radio:
Selectarea elementelor în funcție de poziția lor
Uneori, trebuie să selectați un articol, despre care știm că se află într-un set de elemente selectate anterior. De exemplu, necesitatea de a evidenția primul paragraf care are „Clasa_Mea“ de clasă. Pentru a complica exemplu, să presupunem că aveți nevoie pentru a selecta toate elementele din lista care are „Clasa_Mea“ de clasă. și apoi selectați elementul cincilea din setul rezultat.
jQuery are șapte selectori care pot fi folosite pentru a limita căutarea în funcție de poziția elementului:
Selectează un prim element dintr-un set de elemente selectate.
// Selectați primul paragraf care are o clasă de „MyClass“:
$ ( "P.myClass: în primul rând")
Selectează ultimul element din setul de elemente selectate.
// Selectați ultimul paragraf care are o clasă de „MyClass“:
$ ( "P.myClass: ultima")
Selectează un singur element din setul de elemente selectate. Selectarea unui element efectuat pe numărul de serie index (0 = prim element = 1 secundă, și așa mai departe).
// Selectați primul dintr-un paragraf care are o clasă de „MyClass“:
$ ( "P.myClass: eq (2)")
Selectează elementele din setul de elemente selectate, care sunt aranjate în fața elementului la indexul specificat. De exemplu, în cazul în care indicele specificat de 2 (adică, al treilea element), primul element 2 va fi selectat (indexuri 0 și 1).
// / 2 Selectează primul paragraf, care au o clasă de „MyClass“:
$ ( "P.myClass: lt (2)")
Alegerea elementelor din setul de elemente selectate care sunt dispuse după indexul specificat. De exemplu, dacă setați indexul 2 (adică, al treilea element), acesta va selecta toate elementele după a treia.
// Selectează toate punctele care au o clasă de „MyClass“, cu excepția pentru primele trei:
$ ( "P.myClass: gt (2)")
Selectează toate elementele cu indicii, chiar și în setul de elemente selectate. Rețineți că indicii încep cu 0, și, astfel, în vigoare selectează 1, 3, și așa mai departe elemente.
// Selectați 1, 3, 5, și așa mai departe punctele care au o clasă de „MyClass“:
$ ( "P.myClass: chiar")
Selectează toate elementele cu indicii ciudate din setul de elemente deja selectate. Rețineți că indicii încep cu 0, și, astfel, de fapt, selectează 2, 4 și așa mai departe elemente
// Selectați 2, 4, 6, și așa mai departe punctele care au o clasă de „MyClass“:
$ ( "P.myClass: ciudat")
Rețineți că aceste selectori nu funcționează la fel de bine ca: primul-copil. ultimul copil. și așa mai departe. De exemplu, li.myClass: primul copil selectează doar elementul lista cu clasa „MyClass“. care este primul element din lista corespunzătoare. A li.myClass: găsi mai întâi toate elementele de pe lista de pe pagina care au o clasă de „MyClass“. și apoi selectează primul element din listă într-un set de rezultate de căutare.
În exemplul următor, toate celulele sunt selectate în primele două rânduri ale tabelului care are ID-ul „MyTable“.
Alte selectoare utile jQuery
Dacă nici unul dintre selectorii nu a vă ajuta să identificați elementele pe care doriți, încercați să utilizați următoarele selecții:
Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!
Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!
Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!