A JQuery a javascript továbbfejlesztett változataként megkönnyíti a webprogramozást. Beépített rutinjai segítségével könnyen kijelölhetünk elemeket, majd ezen elemekhez stílusokat, funkciókat rendelhetünk. Ezt itt nem részletezem! Jelen oldalon az elemkijelölésről írok bővebben.
A rutinok kipróbálásához írt kis program az alábbi (a rutinok kipróbálásához a php alkönyvtárba elhelyeztem a "javascript.js" névre keresztelt JQuery fordítót - ez bármelyik verzió lehet, de érdemes valami frisset letölteni:
Ez a kijelölés minden "a" linkelemet kijelöl a "doboz" ID-jű elemen belül található bekezdéselemekben. A kijelölés után aztán bármi állhat, ezt most itt nem taglalom (funkciók, stílusbeállítások, animációk).
* | Minden kijelölése |
---|
...egyértelmű! Minden leszármazottat jelöl.
$("#pro *");
vagy $("*","#pro");
<ul id="pro">
<li><a href="xy0">XY(0)</a></li>
<li><span><a href="xy1">XY(1)</a></span></li>
<li><a href="xy2">XY(2)</a></li>
</ul>
> | Közvetlen gyermek elem |
---|
Olyan elemek kijelölése, amelyek közvetlen gyermeke a szülőnek (a leszármazott és a gyermek NEM ugyanazt jelenti: a gyermek és a szülő közt nincs más elem!)
$("#pro li > a");
vagy $("> a","#pro li");
<ul id="pro">
<li><a href="xy0">XY(0)</a></li>
<li><span><a href="xy1">XY(1)</a></span></li>
<li><a href="xy2">XY(2)</a></li>
</ul>
// A fenti kijelölés innen az XY(0) és XY(2) részeket jelöli ki, mivel
// az XY(1) a "<span>" leszármazottja, nem a "<li>"-é!
children() | Közvetlen gyermekek elem |
---|
Olyan elemek kijelölése, amelyek közvetlen gyermeke a szülőnek (a leszármazott és a gyermek NEM ugyanazt jelenti: a gyermek és a szülő közt nincs más elem!)
Gyakorlatilag pl. a $("#pro").children() megegyezik a $("#pro > *") -el
$("#pro li").children("a")
<ul id="pro">
<li><a href="xy0">XY(0)</a></li>
<li><span><a href="xy1">XY(1)</a></span></li>
<li><a href="xy2">XY(2)</a></li>
</ul>
// A fenti kijelölés innen az XY(0) és XY(2) részeket jelöli ki, mivel
// az XY(1) a "<span>" leszármazottja, nem a "<li>"-é!
+ | Szomszédos testvér elem |
---|
Olyan elemek kijelölése, amelyek testvérei az adott elemnek és közvetlenül szomszédosak is.
$("h1 + h2")
<div id="pro">
<h1>Valami...</h1>
<h2>XY(0)</h2>
<span>valami...</span>
<h2>XY(1)</h2>
</div>
// A fenti kijelölés innen az XY(0) részt jelöli ki, mivel ugyan az XY(1)
// is testvére a <h1>-nek, de nem közvetlen szomszédja!
siblings() | Minden testvér elem |
---|
Mind olyan elem kijelölése, amelyek testvére az adott elemnek (függetlenül attól, hogy közvetlen szomszédja-e).
$("h1").siblings("h2, p")
<div id="pro">
<p>P(0)</p>
<h1>Valami...</h1>
<h2>XY(0)</h2>
<span>valami...</span>
<h2>XY(1)</h2>
</div>
// A fenti kijelölés innen az P(0),XY(0) és XY(1) részt jelöli ki.
// Ha azt írtuk volna, hogy $("h1").siblings(), akkon MINDEN testvért kijelölt volna
nextAll() | Minden elemet követő testvér elem |
---|
Mind olyan elem kijelölése, amelyek testvére az adott elemnek és őt követi
$("h1").nextAll("h2")
vagy $("h1 ~ h2")
<div id="pro">
<p>Valami...</p>
<h1>Valami más...</h1>
<h2>XY(0)</h2>
<span>valami...</span>
<h2>XY(1)</h2>
</div>
// A fenti kijelölés innen az XY(0) és XY(1) részt jelöli ki, mivel mindkettő testvére h1-nek
// és utána következnek!
// Ha azt írtuk volna, hogy $("h1").nextAll(), akkon MINDEN utána következő testvért kijelölt volna
next() | Az elemet közvetlenül követő testvér elem |
---|
Olyan elem kijelölése, amelyek testvére az adott elemnek és őt közvetlenül követi
$("h1").next("h2")
<div id="pro">
<p>Valami...</p>
<h1>Valami más...</h1>
<h2>XY(0)</h2>
<h2>XY(1)</h2>
</div>
// A fenti kijelölés innen az XY(0) részt jelöli ki, mivel bár XY(1) is testvére h1-nek
// de nem közvetlenül utána következnek!
// Ha azt írtuk volna, hogy $("h1").next(), akkon BÁRMILYEN közvetlenül utána következő testvért kijelölt volna
Szűrők
Ha a szűrőknél nem adunk meg előhalmazt, akkor a teljes halmazt tekinti mérvadónak:
pl. $(":even") = $("*.even")
:first | Az első kijelölt elemre illeszkedik |
---|
Az előkijelölésből a legelsőt választja ki
$("#pro h1:first")
<div id="pro">
<p>Valami...</p>
<h1>XY(0)</h1>
<h1>XY(1)</h1>
<h1>XY(2)</h1>
<h2>Valami más...</h2>
<h2>Valami más...</h2>
...
...
<h1>XY(n)</h1>
</div>
// A fenti kijelölés innen az XY(0) részt jelöli ki, mivel az h1 elemek közül
// ez a legelső a #pro-ban
:last | Az utolsó kijelölt elemre illeszkedik |
---|
Az előkijelölésből a legutolsót választja ki
$("#pro h1:last")
<div id="pro">
<p>Valami...</p>
<h1>XY(0)</h1>
<h1>XY(1)</h1>
<h1>XY(2)</h1>
<h2>Valami más...</h2>
<h2>Valami más...</h2>
...
...
<h1>XY(n-1)</h1>
<h1>XY(n)</h1>
</div>
// A fenti kijelölés innen az XY(n) részt jelöli ki, mivel az h1 elemek közül
// ez a legutolsó a #pro-ban
:even | A páros kijelölt elemre illeszkedik |
---|
Az előkijelölésből azokat választja ki, amelyek páros számuak (0-tól számol)
$("#pro h1:even")
<div id="pro">
<p>Valami...</p>
<h1>XY(0)</h1>
<h1>XY(1)</h1>
<h1>XY(2)</h1>
<h2>Valami más...</h2>
<h2>Valami más...</h2>
...
...
<h1>XY(2n-1)</h1>
<h1>XY(2n)</h1>
</div>
// A fenti kijelölés a páros indexű előkijelölt elemeket jelöli ki
:odd | A páratlan kijelölt elemre illeszkedik |
---|
Az előkijelölésből azokat választja ki, amelyek páratlan számuak (0-tól számol)
$("#pro h1:odd")
<div id="pro">
<p>Valami...</p>
<h1>XY(0)</h1>
<h1>XY(1)</h1>
<h1>XY(2)</h1>
<h1>XY(3)</h1>
<h2>Valami más...</h2>
<h2>Valami más...</h2>
...
...
<h1>XY(2n)</h1>
<h1>XY(2n+1)</h1>
</div>
// A fenti kijelölés a páratlan indexű előkijelölt elemeket jelöli ki
:eq(n) | Az n. kijelölt elemre illeszkedik |
---|
Az előkijelölésből az n. elemet választja ki (0-tól számol)
$("#pro h1:eq(2)")
<div id="pro">
<p>Valami...</p>
<h1>XY(0)</h1>
<h1>XY(1)</h1>
<h1>XY(2)</h1>
<h1>XY(3)</h1>
<h2>Valami más...</h2>
<h2>Valami más...</h2>
<h1>XY(4)</h1>
</div>
// A fenti kijelölés csak és kizárólag az n. elemeket jelöli ki
:lt(n) | Az n-nél kisebb indexű kijelölt elemre illeszkedik |
---|
Az előkijelölésből azokat az elemet választja ki, amelyek n-nl kisebb sorszámúak (0-tól számol)
$("#pro h1:eq(4)")
<div id="pro">
<p>Valami...</p>
<h1>XY(0)</h1>
<h1>XY(1)</h1>
<h1>XY(2)</h1>
<h1>XY(3)</h1>
<h2>Valami más...</h2>
<h2>Valami más...</h2>
<h1>XY(4)</h1>
</div>
:gt(n) | Az n-nél nagyobb indexű kijelölt elemre illeszkedik |
---|
Az előkijelölésből azokat az elemet választja ki, amelyek n-nl nagyobb sorszámúak (0-tól számol)
$("#pro h1:eq(1)")
<div id="pro">
<p>Valami...</p>
<h1>XY(0)</h1>
<h1>XY(1)</h1>
<h1>XY(2)</h1>
<h1>XY(3)</h1>
<h2>Valami más...</h2>
<h2>Valami más...</h2>
<h1>XY(4)</h1>
</div>
:animated(n) | Animált elem kiválasztása |
---|
Az kijelölt elemek közül arra illeszkedik, amelyik volt már animálva
$("#pro h1:animated")
// Az összes olyan h1 elemet ki fogja választani a #pro dobozból,
// amelyen már lefutott animáció
:contains("n") | Az "n" tartalmú kijelölt elemre illeszkedik |
---|
Az előkijelölésből azokat az elemet választja ki, amelyek tartalmazzák az "n" szöveget
$("#pro contains:'talán'")
<div id="pro">
<p>Valami...</p>
<h1>Ez jó?</h1>
<h1>Vagy ez?</h1>
<h1>Vagy talán ez?</h1>
<h1>Esetleg ez?</h1>
<h2>Valami más...</h2>
<h2>Valami más...</h2>
<h1>De csak egy a jó</h1>
<h1>Talán lehetne jobb is!</h1>
</div>
// Bár az utolsó h1 elem is tartalmazza a "talán" szót, mégsem igaz rá a szűrő értéke,
// mert számít a kis- és nagybetű!
:not("n") | Az "n" tartalmú kijelölt elemeken kívül mindenre illeszkedik |
---|
Az előkijelölésből minden elemet kiválaszt, az "n" elemek kivételével
$("#pro:not'h2'")
<div id="pro">
<p>Valami...</p>
<h1>Ez jó?</h1>
<h1>Vagy ez?</h1>
<h1>Vagy talán ez?</h1>
<h1>Esetleg ez?</h1>
<h2>Valami más...</h2>
<h2>Valami más...</h2>
<h1>De csak egy a jó</h1>
<h1>Talán lehetne jobb is!</h1>
</div>
:hidden | A nem látható elemeket jelöli ki |
---|
Az előkijelölésből minden elemet kiválaszt, ami nem látható
$("#pro h1:hidden")
<div id="pro">
<p>Valami...</p>
<h1>Ez jó?</h1>
<h1>Vagy ez?</h1>
<h1>Vagy talán ez?</h1>
<h1 style="dislay:none">Esetleg ez?</h1>
<h2>Valami más...</h2>
<h2>Valami más...</h2>
<h1>De csak egy a jó</h1>
<h1>Talán lehetne jobb is!</h1>
</div>
// Fordítottja a ":visible"
:visible | A látható elemeket jelöli ki |
---|
Az előkijelölésből minden elemet kiválaszt, ami látható
$("#pro h1:visible")
<div id="pro">
<p>Valami...</p>
<h1 style="dislay:none">Ez jó?</h1>
<h1 style="dislay:none">Vagy ez?</h1>
<h1 style="dislay:none">Vagy talán ez?</h1>
<h1>Esetleg ez?</h1>
<h2>Valami más...</h2>
</div>
// Fordítottja a ":hidden"