0
jQuery <ul><li>The write less, do more JavaScript Framework </li></ul>
Agenda <ul><li>jQuery - Was ist jQuery? </li></ul><ul><li>jQuery Basics </li></ul><ul><li>jQuery Plugins </li></ul><ul><li...
Was ist jQuery? <ul><li>JavaScript Framework </li></ul><ul><li>einfache DOM / HTML manipulation </li></ul><ul><li>Animatio...
Wer ist jQuery? <ul><li>John Resig </li></ul><ul><li>Barcamp New York </li></ul><ul><li>derzeit > 20 developers </li></ul>
Wie arbeitet jQuery? <ul><li>Find this, do something! </li></ul><ul><li>$('#message1').show('medium'); </li></ul><ul><li>$...
$ <ul><li>$(CSS Selector) </li></ul><ul><li>$(Attribute matching) </li></ul><ul><li>$(XPath) </li></ul>
$ <ul><li>CSS: </li></ul><ul><ul><ul><li>$('p'); </li></ul></ul></ul><ul><ul><ul><li>$('p.message'); </li></ul></ul></ul><...
$ <ul><li>Attribute Matching: </li></ul><ul><ul><li>$('img[@alt]'); </li></ul></ul><ul><ul><li>$('a[@href*=google]'); </li...
Learning by doing! <ul><li>http://jquery.jowe.biz </li></ul>
$ <ul><li>$('#message2') .fadeIn('slow') .addClass('alert');  </li></ul>
Learning by doing! <ul><li>http://jquery.jowe.biz </li></ul>
DOM ready? <ul><li>$(document).ready(function() { </li></ul><ul><li>// start coding </li></ul><ul><li>}); </li></ul>
Was kann jQuery? <ul><li>Animations </li></ul><ul><ul><li>fadeIn(speed, callback) </li></ul></ul><ul><ul><li>fadeOut(s, c)...
Was kann jQuery? <ul><li>.children() </li></ul><ul><li>.children(expression) </li></ul><ul><li>.parent() </li></ul><ul><li...
Plugins <ul><li>plugins.jquery.com </li></ul><ul><li>google.com </li></ul>
Documentation <ul><li>docs.jquery.com </li></ul><ul><li>visualjquery.com </li></ul>
Fragen / Anregungen?
 
Upcoming SlideShare
Loading in...5
×

jQuery - Write less, do more!

1,451

Published on

jQuery Präsentation vom 2. Dezember 2008 an der FH St. Pölten

Published in: Self Improvement
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Transcript of "jQuery - Write less, do more!"

  1. 1. jQuery <ul><li>The write less, do more JavaScript Framework </li></ul>
  2. 2. Agenda <ul><li>jQuery - Was ist jQuery? </li></ul><ul><li>jQuery Basics </li></ul><ul><li>jQuery Plugins </li></ul><ul><li>jQuery Documentation </li></ul>
  3. 3. Was ist jQuery? <ul><li>JavaScript Framework </li></ul><ul><li>einfache DOM / HTML manipulation </li></ul><ul><li>Animationen </li></ul><ul><li>Event handling </li></ul><ul><li>AJAX </li></ul>
  4. 4. Wer ist jQuery? <ul><li>John Resig </li></ul><ul><li>Barcamp New York </li></ul><ul><li>derzeit > 20 developers </li></ul>
  5. 5. Wie arbeitet jQuery? <ul><li>Find this, do something! </li></ul><ul><li>$('#message1').show('medium'); </li></ul><ul><li>$('#message1').addClass('alert'); </li></ul>
  6. 6. $ <ul><li>$(CSS Selector) </li></ul><ul><li>$(Attribute matching) </li></ul><ul><li>$(XPath) </li></ul>
  7. 7. $ <ul><li>CSS: </li></ul><ul><ul><ul><li>$('p'); </li></ul></ul></ul><ul><ul><ul><li>$('p.message'); </li></ul></ul></ul><ul><ul><ul><li>$('#message .text'); </li></ul></ul></ul><ul><ul><ul><li>$('ul#menu > li'); </li></ul></ul></ul><ul><ul><ul><li>$('ul#menu ul'); </li></ul></ul></ul>
  8. 8. $ <ul><li>Attribute Matching: </li></ul><ul><ul><li>$('img[@alt]'); </li></ul></ul><ul><ul><li>$('a[@href*=google]'); </li></ul></ul><ul><li>Many more: XPath, :eq(n), :gt(n), etc... </li></ul>
  9. 9. Learning by doing! <ul><li>http://jquery.jowe.biz </li></ul>
  10. 10. $ <ul><li>$('#message2') .fadeIn('slow') .addClass('alert'); </li></ul>
  11. 11. Learning by doing! <ul><li>http://jquery.jowe.biz </li></ul>
  12. 12. DOM ready? <ul><li>$(document).ready(function() { </li></ul><ul><li>// start coding </li></ul><ul><li>}); </li></ul>
  13. 13. Was kann jQuery? <ul><li>Animations </li></ul><ul><ul><li>fadeIn(speed, callback) </li></ul></ul><ul><ul><li>fadeOut(s, c) </li></ul></ul><ul><ul><li>hide(s, c) </li></ul></ul><ul><ul><li>show(s, c) </li></ul></ul><ul><ul><li>slideDown(s, c) </li></ul></ul>slideUp(s, c) toggle(s, c) slideToggle(s, c) fadeTo(s, c) animate(s, c)
  14. 14. Was kann jQuery? <ul><li>.children() </li></ul><ul><li>.children(expression) </li></ul><ul><li>.parent() </li></ul><ul><li>.parent(expression) </li></ul><ul><li>.find(expression) </li></ul><ul><li>.filter(function) </li></ul><ul><li>.eq(index) </li></ul><ul><li>dsad </li></ul>
  15. 15. Plugins <ul><li>plugins.jquery.com </li></ul><ul><li>google.com </li></ul>
  16. 16. Documentation <ul><li>docs.jquery.com </li></ul><ul><li>visualjquery.com </li></ul>
  17. 17. Fragen / Anregungen?
  1. A particular slide catching your eye?

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

×