Knihovnu jquery stáhneme z: http://jquery.com/download/
Komprimovaná verze je menší – proměnné jen jednoznakové, vše na jednom řádku.
Připojení knihovny do html:
<!DOCTYPE html> <html> <head> <script src="jquery-1.10.2.min.js"></script> //tady je připojená knihovna, uvnitř těchto tagů nesmí být žádný obsah <script> /*sem se píše obsah - co se má vykonat*/ </script> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Untitled 1</title> </head> <body> </body> </html>
Funkce
Jquery poznáme tak, že je uvedeno znakem $
<script>
$(document).ready(function(){ //funkce, která se vykoná po spuštění všech elementů stránky, díky tomu je k nim možné přistupovat
/*sem budeme psát veškerý jquery kód*/
$("prvek").funkce("parametry")
});
</script>
Jquery příkazy jdou řetězit – týkají se stejného objektu:
<script>
$(document).ready(function(){
/*sem budeme psát veškerý jquery kód*/
$("prvek").funkce("parametry").funkce2("parametry2").funkce3("parametry3");
});
</script>
Pokud přistupujeme ke konkrétním objektům, uvádíme jejich jméno křížkem. Např:
$(document).ready(function(){
$("#odstavec").text("Hello!!!");
});
Příklad možností jquery:
-
přepis textu:
$("#odstavec").text("Hello!!!");
-
efekt mizení:
$("#odstavec").toggle(2000);
Selektory
Jak můžeme vybírat jednotlivé prvky na stránce:
-
podle prvku – libovolný prvek s nastaveným id, nebo podle charakteristické vlastnosti
$("#odstavec").text("Hello!!!"); /*výběr podle id*/
-
podle třídy
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("#odstavec").text("Hello!!!");
$(".cervena").toggle(2000);
$(".cervena").toggle(2000);
});
</script>
<style>
.cervena{
color:red;
}
.modra{
color:blue
}
.zelena{
color:green
}
</style>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
</head>
<body>
<div id="odstavec"></div>
<p class="cervena"> text <p>
<p class="modra"> text 2<p>
<p class="zelena"> text 3<p>
</body>
</html>
-
podle tagu (div, p, span, img, a, li, ul, …)
$("p").toggle(2000);
Kombinování selektorů
můžeme kombinovat různé typy:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("a, #text, .odstavec").toggle(2000);
$("a, #text, .odstavec").toggle(2000);
});
</script>
<style>
.odstavec{
color:teal;
}
</style>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
</head>
<body>
<a>Text A</a><br>
<span id="text">Text ID Text</span>
<p class="odstavec">Text class odstavec</p>
</body>
</html>
Výběr objektů, které splňují dvě podmínky (div a span):
<!DOCTYPE html> <html> <head> <script src="jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ $("#text span").toggle(2000); /*vybere vše v divu text s tagem span*/ }); </script> <style> .odstavec{ color:teal; } </style> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Untitled 1</title> </head> <body> <div id="text"> <span id="span1">Span 1</span> <span id="span2">Span 2</span> <p id="p1">P 1</p> </div> <span id="span3">Span 3</span><br> <p id="p2">P 2</p> </body> </html> <code> Výběr prvků podle pořadí: * první: <code> $("#text span:first").toggle(2000);
$("#text span:last").toggle(2000);
$("#text span:odd").toggle(2000);
$("#text span:even").toggle(2000);
Příklad: obarvení lichých a sudých řádků tabulky:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("tr:even").css("background-color", "aqua");
$("tr:odd").css("background-color", "silver");
});
</script>
<style>
table{
border:thin black solid;
}
</style>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
</head>
<body>
<table>
<tr><td>Řádek 0</td></tr>
<tr><td>Řádek 1</td></tr>
<tr><td>Řádek 2</td></tr>
<tr><td>Řádek 3</td></tr>
<tr><td>Řádek 4</td></tr>
<tr><td>Řádek 5</td></tr>
</table>
</body>
</html>
Výběr prvků s indexem podle pořadí:
-
rovná se
$("tr:eq(2)").css("color", "blue");
-
menší než
$("tr:lt(2)").css("color", "red");
-
větší než
$("tr:gt(2)").css("color", "violet");
-
negace – všechny kromě dané podmínky
$("tr:not(:eq(2))").css("color", "green");
Výběr úplně všech prvků:
$("*").toggle(2000);
Výběř prvků, které obsahují dané hodnoty (př. text „řádek“):
$("td:contains('řádek')").toggle(2000);
Výběr elementů, které mají určitého potomka:
$("tr:has(td)").css("color", "green");
Výběr formulářových prvků (např tlačítka):
$(":button")
Výběr elementů podle nastavitelné vlastnosti (např. vybere všechny divy, které mají nastavené id):
$("div[id]")
Výběr elementu s konkrétní vlastností:
$("div[id='mojeID']")
Výběr elementu s vlastností začínající na konkrétní znak:
$("span[class^= g]").css("color", "red");
Výběr elementu s vlastností končící na konkrétní znak:
$("span[class $= g]").css("color", "red");
Výběr jednoho elementu, který následuje za elementem s vlastností končící na konkrétní znak:
$("span[class $= g]").next("span").css("color", "red");
Výběr všech elementů, které následují za elementem s vlastností končící na konkrétní znak:
$("span[class $= g]").nextAll("span").css("color", "red");