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>
Prochain SlideShare
Chargement dans…5
×

jQuery Kurz-Intro

1 921 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 921
Sur SlideShare
0
Issues des intégrations
0
Intégrations
16
Actions
Partages
0
Téléchargements
11
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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>

×