Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

jQuery Kurz-Intro

2.123 Aufrufe

Veröffentlicht am

  • Login to see the comments

  • Gehören Sie zu den Ersten, denen das gefällt!

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>

×