jQuery Kurz-Intro

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


jQuery einbauen im Head

<script src="jquery.js"></script><script>$(document).ready(function(){ // Your code here }); </script>

<br><html>


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>


Funktion mit Namen daniel

function daniel () { // Your code here }

$(document).ready(daniel);

<br><html>


Anonyme Funktion

$(document).ready(function(){ // Your code here });

<br><html>


Auswählen + Manipulieren

$("a").addClass("wichtig");$("h1").append(":");$("h1").prepend("Titel:");$("p .extra").hide();

<br><html>


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>


Weiter?

http://jquery.com

jQuery Kurz-Intro

Documents

Transcript of jQuery Kurz-Intro