jQuery Javascript mit CSS-Tricks Eine Präsentation von Brigitte Jellinek cc share alike
&quot;Funktioniert auch ohne&quot; <ul><li>Prinzip:  </li></ul><ul><ul><li>Ohne Javascript benutzbar </li></ul></ul><ul><u...
jQuery einbauen im Head <ul><li><script src=&quot;jquery.js&quot;></script> </li></ul><ul><li><script> </li></ul><ul><li>$...
Komische Schreibweisen <ul><li>$(document) </li></ul><ul><li>Eine Funktion mit Namen $ </li></ul><ul><li>Ein Argument: das...
Funktion mit Namen daniel <ul><li>function daniel () {  </li></ul><ul><li>// Your code here  </li></ul><ul><li>}  </li></u...
Anonyme Funktion <ul><li>$(document).ready(function(){  </li></ul><ul><li>// Your code here  </li></ul><ul><li>});  </li><...
Auswählen + Manipulieren <ul><li>$(&quot;a&quot;).addClass(&quot;wichtig&quot;); </li></ul><ul><li>$(&quot;h1&quot;).appen...
Bei Klick, bei MouseOver <ul><li><p>Es war einmal  <span class=&quot;more&quot;>mehr</span> <span class=&quot;extra&quot;>...
Weiter? <ul><li>http://jquery.com </li></ul>
Upcoming SlideShare
Loading in...5
×

jQuery Kurz-Intro

1,743

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,743
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery Kurz-Intro

  1. 1. jQuery Javascript mit CSS-Tricks Eine Präsentation von Brigitte Jellinek cc share alike
  2. 2. &quot;Funktioniert auch ohne&quot; <ul><li>Prinzip: </li></ul><ul><ul><li>Ohne Javascript benutzbar </li></ul></ul><ul><ul><li>Mit Javascript besser benutzbar </li></ul></ul><ul><li>Beispiele </li></ul><ul><ul><li>Navigation ein/ausblenden </li></ul></ul><ul><ul><li>Teile eines Formulars ein/ausblenden </li></ul></ul><ul><li>Wird von jQuery optimal unterstützt </li></ul>
  3. 3. jQuery einbauen im Head <ul><li><script src=&quot;jquery.js&quot;></script> </li></ul><ul><li><script> </li></ul><ul><li>$(document).ready(function(){ </li></ul><ul><li>// Your code here </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul>
  4. 4. Komische Schreibweisen <ul><li>$(document) </li></ul><ul><li>Eine Funktion mit Namen $ </li></ul><ul><li>Ein Argument: das document-Objekt </li></ul><ul><li>$(&quot;a&quot;) </li></ul><ul><li>Eine Funktio mit Namen $ </li></ul><ul><li>Ein Argument: der String &quot;a&quot; </li></ul><ul><li>$.get(&quot;backend.php&quot;, callback) </li></ul><ul><li>Ein Objekt mit Namen $ </li></ul><ul><li>Eine Methode des Objekts mit Namen get </li></ul>
  5. 5. Funktion mit Namen daniel <ul><li>function daniel () { </li></ul><ul><li>// Your code here </li></ul><ul><li>} </li></ul><ul><li>$(document).ready(daniel); </li></ul>
  6. 6. Anonyme Funktion <ul><li>$(document).ready(function(){ </li></ul><ul><li>// Your code here </li></ul><ul><li>}); </li></ul>
  7. 7. Auswählen + Manipulieren <ul><li>$(&quot;a&quot;).addClass(&quot;wichtig&quot;); </li></ul><ul><li>$(&quot;h1&quot;).append(&quot;:&quot;); </li></ul><ul><li>$(&quot;h1&quot;).prepend(&quot;Titel:&quot;); </li></ul><ul><li>$(&quot;p .extra&quot;).hide(); </li></ul>
  8. 8. Bei Klick, bei MouseOver <ul><li><p>Es war einmal <span class=&quot;more&quot;>mehr</span> <span class=&quot;extra&quot;>eine Prinzessin, die lebte</span></p> </li></ul><ul><li>$(&quot;p .extra&quot;).hide(); </li></ul><ul><li>$(&quot;p .more&quot;).click(function() { </li></ul><ul><li>$(this).next(&quot;.extra&quot;).toggle(); </li></ul><ul><li>}); </li></ul>
  9. 9. Weiter? <ul><li>http://jquery.com </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×