Bevezetés a JQuery használatába Modern Javaszkript Bevezetés a JQuery használatába
Alapok http://jquery.com/ <html> <head> <script type="text/javascript" src="jquery.js"></script> <script> $(document).ready(function(){ // betöltés után végrehajtandó kód }); </script> </head> <body> <a href="http://jquery.com/">jQuery</a> </body> </html>
A kattintás esemény kiterjesztése: $("a").click(function(event){ alert("Rákattintott a linkre"); }); A kattintás esemény felüldefiniálása: $("a").click(function(event){ alert("Ez a link már nem müködik"); event.preventDefault(); }); A CSS osztályok manipulálása $("a").addClass("test"); $("a").removeClass("test"); Speciális hatások (http://docs.jquery.com/Effects) $("a").click(function(event){ event.preventDefault(); $(this).hide("slow"); });
Ajax támogatás (egyszerű szavazás – kliens oldal) $(document).ready(function() { $("#rating").append("Please rate: "); for ( var i = 1; i <= 5; i++ ) $("#rating").append("<a href='#'>" + i + "</a> "); // a kattintás átdefiniálása $("#rating a").click(function(e){ // az eredeti mukodes kikapcsolása e.preventDefault(); // Ajax kérés postázása $.post("rate.php", {rating: $(this).html()}, function(xml) { // az eredmény kiirása $("#rating").html("Köszönjük a szavazatát, a jelenlegi átlag: " + $("average", xml).text() + ", szavazatok száma: " + $("count", xml).text() ); });
Kiszolgáló oldal (php) http://jquery.bassistance.de/example-rateme.html <?php define('STORE', 'ratings.dat'); function put_contents($file,$content) { $f = fopen($file,"w"); fwrite($f,$content); fclose($f); } if(isset($_REQUEST["rating"])) { $rating = $_REQUEST["rating"]; $storedRatings = unserialize(file_get_contents(STORE)); $storedRatings[] = $rating; put_contents(STORE, serialize($storedRatings)); $average = round(array_sum($storedRatings) / count($storedRatings), 2); $count = count($storedRatings); $xml = "<ratings><average>$average</average><count>$count</count></ratings>"; header('Content-type: text/xml'); echo $xml; } ?>
Összetettebb példa