elso oldal
„ELSŐOLDAL” PROJEKT
< Programozás > < Túraproject > < CSS > < JQuery > < Javascript > < PHP > < Táblázatok >
programozás 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:
<head>
<script src="php/javascript.js" type="text/javascript"></script>
</head>
<body>
	<style>
		<!-- .sti {border:1px solid #ff0000;
		background:#fffc00;
		color:#000000;
		font-weigh:bold} -->
	</style>
	//IDE KERÜL A KIPRÓBÁLANDÓ RÉSZ
</body>

Az alap elemkijelölés módja példákkal:
JQuery("#doboz p a");
vagy egyszerűbben
$("#doboz p a");

	// Célszerű minél egyszerűbben körülírni, nem kell bonyolítani, csak az
	// egyértelműségre kell figyelni! Például:
	//
	//		$("body div#doboz p a") helyett elég $("#doboz p a");

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

A kijelölések persze ennél bonyolultabbak is lehetnek! Lásd:
*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")
			

:firstAz 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

:lastAz 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

:evenA 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

:oddA 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>

:hiddenA 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"

:visibleA 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"