jQuery Kurz-Intro
-
Upload
brigitte-jellinek -
Category
Documents
-
view
1.720 -
download
0
Transcript of jQuery Kurz-Intro
![Page 1: jQuery Kurz-Intro](https://reader036.fdocuments.net/reader036/viewer/2022082810/5581540fd8b42ab9548b503f/html5/thumbnails/1.jpg)
<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
![Page 2: jQuery Kurz-Intro](https://reader036.fdocuments.net/reader036/viewer/2022082810/5581540fd8b42ab9548b503f/html5/thumbnails/2.jpg)
<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
![Page 3: jQuery Kurz-Intro](https://reader036.fdocuments.net/reader036/viewer/2022082810/5581540fd8b42ab9548b503f/html5/thumbnails/3.jpg)
<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>
![Page 4: jQuery Kurz-Intro](https://reader036.fdocuments.net/reader036/viewer/2022082810/5581540fd8b42ab9548b503f/html5/thumbnails/4.jpg)
<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
![Page 5: jQuery Kurz-Intro](https://reader036.fdocuments.net/reader036/viewer/2022082810/5581540fd8b42ab9548b503f/html5/thumbnails/5.jpg)
<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);
![Page 6: jQuery Kurz-Intro](https://reader036.fdocuments.net/reader036/viewer/2022082810/5581540fd8b42ab9548b503f/html5/thumbnails/6.jpg)
<br><html>
a:link { text-decoration: none; }<a href="x.htm">x</a>
Anonyme Funktion
$(document).ready(function(){ // Your code here });
![Page 7: jQuery Kurz-Intro](https://reader036.fdocuments.net/reader036/viewer/2022082810/5581540fd8b42ab9548b503f/html5/thumbnails/7.jpg)
<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();
![Page 8: jQuery Kurz-Intro](https://reader036.fdocuments.net/reader036/viewer/2022082810/5581540fd8b42ab9548b503f/html5/thumbnails/8.jpg)
<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();});
![Page 9: jQuery Kurz-Intro](https://reader036.fdocuments.net/reader036/viewer/2022082810/5581540fd8b42ab9548b503f/html5/thumbnails/9.jpg)
<br><html>
a:link { text-decoration: none; }<a href="x.htm">x</a>
Weiter?
http://jquery.com