A InfoWiki wikiből
(Változatok közti eltérés)
a (→Ajax egyszerűen =) |
Aktuális változat (2010. március 18., 10:19) (lapforrás) a (→DOM elem kiválasztása) |
||
(4 közbeeső változat nincs mutatva) | |||
25. sor: | 25. sor: | ||
* Egyetlen elem (id alapján kiválasztása): | * Egyetlen elem (id alapján kiválasztása): | ||
+ | <code lang="html"> | ||
$('#aziderteke') | $('#aziderteke') | ||
+ | </code> | ||
+ | * egyetlen p elem, amelynek id-je az alábbi: | ||
+ | <code lang="html"> | ||
+ | $('p#myid') | ||
+ | </code> | ||
+ | |||
+ | * összes adott tag kiválasztása | ||
+ | <code lang="html"> | ||
+ | $('div') | ||
+ | </code> | ||
+ | |||
+ | * összes adott class névvel rendelkező elem kiválasztása | ||
+ | <code lang="html"> | ||
+ | $('.myclass') <- class="myclass" | ||
+ | $('p.myclass') <- <p class="myclass" | ||
+ | $('.myclass.otherclass') <- <div class="myclass"> <span class="otherclass"> | ||
+ | </code> | ||
+ | |||
+ | * adott konténerben lévő p elemek | ||
+ | <code lang="html"> | ||
+ | $('#container p') <- <div id="container"> <p>...</p> | ||
+ | $('a img') <- <a ...><img .../></a> | ||
+ | </code> | ||
+ | |||
+ | * E > F viszony: keressük azokat az F-eket, akik E-n belül vannak. | ||
+ | <code lang="html"> | ||
+ | $('div > ul') <- azon ul amelyek div-ben vannak | ||
+ | </code> | ||
+ | |||
+ | |||
+ | * E + F viszony: keressük azokat az F-eket, amelyek az E-n belül jönnek azonnal | ||
+ | <code lang="html"> | ||
+ | $('ul + p') <- olyan p-k, amelyek egy ul utan vannak azonnal | ||
+ | </code> | ||
+ | |||
+ | * minden elem | ||
+ | <code lang="html"> | ||
+ | $('*') | ||
+ | $('p > *') <- minden, p-n belüli elem | ||
+ | </code> | ||
+ | |||
+ | * több elem kiválasztása felsorolással | ||
+ | $('code, em, strong') | ||
+ | $('p strong, .myclass') | ||
+ | |||
+ | * első elem kiválasztása | ||
+ | $('li:first-child') | ||
+ | |||
+ | * utolsó elem kiválasztása | ||
+ | $('li:last-child') | ||
+ | |||
+ | * n. elem (adott sorszámú elem) kiválasztása | ||
+ | $('li:nth-child(2)') | ||
+ | |||
+ | * olyan elemek kiválasztása, akiknek nincs gyermek tartalmuk | ||
+ | $(':empty') | ||
+ | $('p:empty') | ||
+ | |||
+ | |||
+ | * olyan E elemek, melyeknek van F elemuk | ||
+ | $('div[p]') <- olyan div-ek, amelyekben van p elem | ||
+ | $('p[.myclass]') <- olyan p-k, amelyekben van olyan elem, amelyek myclass osztályúak | ||
+ | |||
+ | * attribútuma van | ||
+ | $('a[@rel]') <- olyan a elemek, melyeknek van rel attribútumuk | ||
+ | $("[a@rel='nofollow']") <- olyan a elemek, melyek rel attr értéke "nofollow" | ||
+ | $('a[@rel!=nofollow]') <- olyan a elemek, ahol a rel értéke nem "nofollow" | ||
+ | $('a[@rel^=no]') <- olyan a elemek, ahol a rel értéke úgy kezdődik hogy "no" | ||
+ | $('a[@href$=index.htm]') <- olyan a elemek, ahol a href arra végződik hogy "index.html" | ||
+ | $('p[@class*=bar]') <- olyan p elemek, ahol a class értéke tartalmazza a "bar" szöveget | ||
+ | |||
+ | * form kiválasztók | ||
+ | $('#myForm :input') | ||
+ | $('input:radio', myForm) | ||
+ | :input Selects all form elements (input, select, textarea, button). | ||
+ | :text Selects all text fields (type="text"). | ||
+ | :password Selects all password fields (type="password"). | ||
+ | :radio Selects all radio fields (type="radio"). | ||
+ | :checkbox Selects all checkbox fields (type="checkbox"). | ||
+ | :submit Selects all submit buttons (type="submit"). | ||
+ | :image Selects all form images (type="image"). | ||
+ | :reset Selects all reset buttons (type="reset"). | ||
+ | :button Selects all other buttons (type="button"). | ||
+ | :file Selects all <input type="file"> | ||
+ | |||
+ | * egyéb kiválasztók (a kiválasztási lista szűkítése) | ||
+ | $('li:even') <- minden páros sorszámú li elem | ||
+ | $('tr:odd') <- minden páratlan sorszámú tr elem | ||
+ | $('li:eq(2)') <- 3. eleme a listának, melyben a li elemek vannak | ||
+ | $('p:nth(1)') <- 2. eleme a listának | ||
+ | $('li:gt(1)') <- gt = greater than, minden olyan sorszámú elem, kinek sorszáma nagyobb mint 1 | ||
+ | $('li:lt(2)') <- lt = less than | ||
+ | $('li:first') <- első elem (nulla sorszámú) | ||
+ | $('li:last) <- utolsó elem | ||
+ | $(td:parent') <- a td szülője (valszeg tr) | ||
+ | $('p:contains(nothing special)') <- olyan p elemek, amikben szerepel a 'nothing special' szöveg | ||
+ | $('li:visible') <- az összes jelenleg látható elem (css szerint) | ||
+ | $('li:hidden) <- az összes jelenleg nem látható elem | ||
== Document onload event == | == Document onload event == |
Aktuális változat
Tartalomjegyzék |
jQuery behívása a lapra
<!-- ha helyi masolatunk van --> <script type="text/javascript" src="jquery.js"></script> <!-- ha eredeti forrast hasznalunk van --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
DOM elem kiválasztása
- Egyetlen elem (id alapján kiválasztása):
$('#aziderteke')
- egyetlen p elem, amelynek id-je az alábbi:
$('p#myid')
- összes adott tag kiválasztása
$('div')
- összes adott class névvel rendelkező elem kiválasztása
$('.myclass') <- class="myclass" $('p.myclass') <- <p class="myclass" $('.myclass.otherclass') <- <div class="myclass"> <span class="otherclass">
- adott konténerben lévő p elemek
- E > F viszony: keressük azokat az F-eket, akik E-n belül vannak.
$('div > ul') <- azon ul amelyek div-ben vannak
- E + F viszony: keressük azokat az F-eket, amelyek az E-n belül jönnek azonnal
$('ul + p') <- olyan p-k, amelyek egy ul utan vannak azonnal
- minden elem
$('*')
$('p > *') <- minden, p-n belüli elem
- több elem kiválasztása felsorolással
$('code, em, strong') $('p strong, .myclass')
- első elem kiválasztása
$('li:first-child')
- utolsó elem kiválasztása
$('li:last-child')
- n. elem (adott sorszámú elem) kiválasztása
$('li:nth-child(2)')
- olyan elemek kiválasztása, akiknek nincs gyermek tartalmuk
$(':empty') $('p:empty')
- olyan E elemek, melyeknek van F elemuk
$('div[p]') <- olyan div-ek, amelyekben van p elem $('p[.myclass]') <- olyan p-k, amelyekben van olyan elem, amelyek myclass osztályúak
- attribútuma van
$('a[@rel]') <- olyan a elemek, melyeknek van rel attribútumuk $("[a@rel='nofollow']") <- olyan a elemek, melyek rel attr értéke "nofollow" $('a[@rel!=nofollow]') <- olyan a elemek, ahol a rel értéke nem "nofollow" $('a[@rel^=no]') <- olyan a elemek, ahol a rel értéke úgy kezdődik hogy "no" $('a[@href$=index.htm]') <- olyan a elemek, ahol a href arra végződik hogy "index.html" $('p[@class*=bar]') <- olyan p elemek, ahol a class értéke tartalmazza a "bar" szöveget
- form kiválasztók
$('#myForm :input') $('input:radio', myForm) :input Selects all form elements (input, select, textarea, button). :text Selects all text fields (type="text"). :password Selects all password fields (type="password"). :radio Selects all radio fields (type="radio"). :checkbox Selects all checkbox fields (type="checkbox"). :submit Selects all submit buttons (type="submit"). :image Selects all form images (type="image"). :reset Selects all reset buttons (type="reset"). :button Selects all other buttons (type="button"). :file Selects all <input type="file">
- egyéb kiválasztók (a kiválasztási lista szűkítése)
$('li:even') <- minden páros sorszámú li elem $('tr:odd') <- minden páratlan sorszámú tr elem $('li:eq(2)') <- 3. eleme a listának, melyben a li elemek vannak $('p:nth(1)') <- 2. eleme a listának $('li:gt(1)') <- gt = greater than, minden olyan sorszámú elem, kinek sorszáma nagyobb mint 1 $('li:lt(2)') <- lt = less than $('li:first') <- első elem (nulla sorszámú) $('li:last) <- utolsó elem $(td:parent') <- a td szülője (valszeg tr) $('p:contains(nothing special)') <- olyan p elemek, amikben szerepel a 'nothing special' szöveg $('li:visible') <- az összes jelenleg látható elem (css szerint) $('li:hidden) <- az összes jelenleg nem látható elem
Document onload event
$(document).ready( function() { // ... } );
Ajax egyszerűen
Egy elem tartalmának betöltése AJAX-ból:
$('#mydiv').load(this.href);
Manupiláció
- Attribútum érték megváltoztatása
$elem.attr('id', chapterId)