Személyes eszközök
Keresés

 

A InfoWiki wikiből

(Változatok közti eltérés)
a (DOM elem kiválasztása)
a (DOM elem kiválasztása)
68. sor: 68. sor:
  $('p > *')    <- minden, p-n belüli elem
  $('p > *')    <- minden, p-n belüli elem
</code>
</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 onload event ==

A lap 2010. március 18., 10:13-kori változata



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
$('#container p') <- <div id="container"> <p>...</p>
 $('a img')        <- <a ...><img .../></a>
  • 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">

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)
A lap eredeti címe: „http://wiki.ektf.hu/wiki/Cgi-ea/page200
Nézetek
nincs sb_44.200.23.133 cikk