View
1.717
Download
0
Category
Preview:
Citation preview
<br>
<html><a href="x.htm">x</a>a:link { text-decoration: none; }
jQuery
Javascript mit CSS-Tricks
Eine Präsentation von Brigitte Jellinekcc share alike
<br><html>
a:link { text-decoration: none; }<a href="x.htm">x</a>
"Funktioniert auch ohne"
Prinzip: - Ohne Javascript benutzbar- Mit Javascript besser benutzbar
Beispiele- Navigation ein/ausblenden- Teile eines Formulars ein/ausblenden
Wird von jQuery optimal unterstützt
<br><html>
a:link { text-decoration: none; }<a href="x.htm">x</a>
jQuery einbauen im Head
<script src="jquery.js"></script><script>$(document).ready(function(){ // Your code here }); </script>
<br><html>
a:link { text-decoration: none; }<a href="x.htm">x</a>
Komische Schreibweisen
$(document)Eine Funktion mit Namen $Ein Argument: das document-Objekt
$("a")Eine Funktio mit Namen $Ein Argument: der String "a"
$.get("backend.php", callback)Ein Objekt mit Namen $Eine Methode des Objekts mit Namen get
<br><html>
a:link { text-decoration: none; }<a href="x.htm">x</a>
Funktion mit Namen daniel
function daniel () { // Your code here }
$(document).ready(daniel);
<br><html>
a:link { text-decoration: none; }<a href="x.htm">x</a>
Anonyme Funktion
$(document).ready(function(){ // Your code here });
<br><html>
a:link { text-decoration: none; }<a href="x.htm">x</a>
Auswählen + Manipulieren
$("a").addClass("wichtig");$("h1").append(":");$("h1").prepend("Titel:");$("p .extra").hide();
<br><html>
a:link { text-decoration: none; }<a href="x.htm">x</a>
Bei Klick, bei MouseOver
<p>Es war einmal <span class="more">mehr</span> <span class="extra">eine Prinzessin, die lebte</span></p>
$("p .extra").hide();$("p .more").click(function() { $(this).next(".extra").toggle();});
<br><html>
a:link { text-decoration: none; }<a href="x.htm">x</a>
Weiter?
http://jquery.com
Recommended