Skripta OVI

JQuery – Selektory

Selektory nám umožňují vybírat jednotlivé prvky na stránce:

  • jednotlivě – podle unikátního ID objektu
  • skupinově – podle třídy (class), nastavené vlastnosti

Výběr podle ID:

$("#odstavec") /*výběr podle id*/

Výběr podle elementu (tagu) (div, p, span, img, a, li, ul, …)

$("p");

Výběr 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>

Kombinování selektorů

Při výběru objektů můžeme kombinovat různé typy selektorů. Při oddělení selektorů čárkou se vybere víc objektů současně:

<!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é jsou uvnitř jiného objektu (span uvnitř divu s id „text“)

 <!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í: (vybere span uvnitř divu s id #text v daném pořadí)

// první	
$("#text span:first")

// poslední:
$("#text span:last")

// lichý (pozor, číslování jde od nuly! První span je 0!):
$("#text span:odd")

// sudý (pozor, číslování jde od nuly! První span je 0!):
$("#text span:even")

Příklad: obarvení lichých a sudých řádků tabulky
– :even – sudé řádky
– :odd – liché řádky

<!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í 

// pořadí = 2
$("element:eq(2)")

// pořadí < 2
$("element:lt(2)")

// pořadí > 2
 $("element:gt(2)")

//negace – všechny kromě dané podmínky
$("element:not(:eq(2))")

Výběr úplně všech prvků:

$("*")

Výběř prvků, které obsahují dané hodnoty (např. text „řádek“):

$("element:contains('řádek')")

Výběr elementů, které mají potomka (vnořený element) určitého typu:

$("element:has(potomek)")

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]")

Výběr elementu s vlastností končící na konkrétní znak:

$("span[class $= g]")

Výběr jednoho elementu, který následuje za elementem s vlastností končící na konkrétní znak:

$("span[class $= g]").next("span")

Výběr všech elementů, které následují za elementem s vlastností končící na konkrétní znak:

$("span[class $= g]").nextAll("span")

admin

, ,