Uživatelské nástroje

Nástroje pro tento web


vyuka:jquery_i

Jquery

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);
  • poslední:
	$("#text span:last").toggle(2000);
  • lichý (pozor, číslování jde od nuly! První span je 0!):
	$("#text span:odd").toggle(2000);
  • sudý (pozor, číslování jde od nuly! První span je 0!):
	$("#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");
vyuka/jquery_i.txt · Poslední úprava: 2013/11/14 10:39 autor: verca