Lapforrás

<cim	cim3="jQuery"
	cim2="" 
	cim1="CGI és Űrlap feldolgozás" 
	kep="hz_csik.png" 
	back="cgi-ea/Nyitolap" 
	prev="cgi-ea/page126"
	next="Cgi-ea/Nyitolap"
	szerzo="hz|Hernyák Zoltán"/>

<path l1="cgi-ea/Nyitolap|Előadás"  l2="cgi-ea/Tematika|Vizsga"  l3="cgi-ea/Foliak|Fóliák"  lx="-" 
      l4="cgi-gy/Nyitolap|Gyakorlat"/>


== jQuery behívása a lapra ==

<code lang="html">
  <!-- 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>
</code>

== DOM elem kiválasztása ==

* Egyetlen elem (id alapján kiválasztása):
<code lang="html">
 $('#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">

== 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)