Gestern habe ich mich ein wenig mit jQuery beschäftigt. Dazu erst einmal ein kleineres Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a#hide").click(function(){
$("#valuesInit").animate({ height: 'hide', opacity: 'hide' }, 'slow');
})
});
</script>
<title>jQuery Test</title>
</head>
<body>
<div id="valuesInit" style="background-color:#ADADAD">
<p><b>Initialwerte</b></p>
Lorem Ipsum dolor sit amet...
</div>
<p><a href="#" id="hide">Verstecken</a></p>
</body>
</html>
In diesem Beispiel wird eine div Box mit der ID valuesInit und der Klasse divbox angelegt. Oben wird für den Link mit der ID hide eine Klickfunktion definiert. Diese Klickfunktion sucht dabei das Element mit der ID valuesInit und lässt es verschwinden. Nun gibt es verschiedene Möglichkeiten etwa zu selektieren:
- nach Element
$("div").animate({ height: 'hide', opacity: 'hide' }, 'slow');
- nach ID
$("#valuesInit").animate({ height: 'hide', opacity: 'hide' }, 'slow');
- nach Klasse
$(".divbox").animate({ height: 'hide', opacity: 'hide' }, 'slow');
Weitere Informationen gibt es unter:
http://docs.jquery.com/Main_Page
http://www.very-clever.com/jquery-tutorial.php
http://www.andreas-schlapsi.at/2008/10/10/jquery-dom-elemente-auswahlen/