JQuery: JavaScript Library of the Future

10,820 views

Published on

jQuery is a different type of JavaScript library, with emphasis on getting the job done with the most efficient code possible. JavaScript DOM manipulation -- even with some existing JavaScript libraries -- can be tedious and uninteresting. But jQuery provides a new and exciting way to wrap existing markup with awesome dynamic functionality in a few lines of code. Not only is the approach powerful, but elegant as well. This presentation will go over the key parts of the jQuery library, including selectors, DOM transversal and manipulations, events, effects, and ajax -- including running code examples.

Published in: Technology
3 Comments
24 Likes
Statistics
Notes
No Downloads
Views
Total views
10,820
On SlideShare
0
From Embeds
0
Number of Embeds
456
Actions
Shares
0
Downloads
358
Comments
3
Likes
24
Embeds 0
No embeds

No notes for slide
  • What you get back from selectors is the jQuery object, which contains the selected elements.
  • What you get back from selectors is the jQuery object, which contains the selected elements.
  • What you get back from selectors is the jQuery object, which contains the selected elements.
  • What you get back from selectors is the jQuery object, which contains the selected elements.
  • What you get back from selectors is the jQuery object, which contains the selected elements.
  • What you get back from selectors is the jQuery object, which contains the selected elements.
  • What you get back from selectors is the jQuery object, which contains the selected elements.
  • What you get back from selectors is the jQuery object, which contains the selected elements.
  • What you get back from selectors is the jQuery object, which contains the selected elements.
  • What you get back from selectors is the jQuery object, which contains the selected elements.
  • JQuery: JavaScript Library of the Future

    1. jQuery JavaScript Library of the Future Matt Taylor
    2. YOUR WEBAPP SUCKS
    3. YOUR WEBAPP SUCKS
    4. “Most of the people writing in JavaScript are not programmers” - Douglas Crockford
    5. “Programmers who attempt to use JavaScript for non-trivial tasks often find the process frustrating if they do not have a solid understanding of the language.” - David Flanagan
    6. 1998
    7. The “Accidental” RIA Developer
    8. THEY USE jQUERY
    9. UNOBTRUSIVE
    10. UNOBTRUSIVE FUNCTIONAL
    11. UNOBTRUSIVE PRAGMATIC FUNCTIONAL
    12. IT IS OKAY NOT TO BE OBJECT ORIENTED
    13. IT IS OKAY NOT TO BE OBJECT ORIENTED
    14. jQuery Object jQuery
    15. jQuery Object jQuery(...)
    16. jQuery Object $(...)
    17. $() returns $
    18. Accessing the DOM with Selectors
    19. Accessing the DOM with Selectors $(‘#myId’)
    20. Accessing the DOM with Selectors $(‘#myId’) $(‘.myClass’)
    21. Accessing the DOM with Selectors $(‘#myId’) $(‘.myClass’) $(‘div.myClass’)
    22. Accessing the DOM with Selectors $(‘#myId’) $(‘.myClass’) $(‘div.myClass’) $(‘li > p’)
    23. Accessing the DOM with Selectors $(‘#myId’) $(‘.myClass’) $(‘div.myClass’) $(‘li > p’) $(‘a[href^=mailto:’)
    24. Accessing the DOM with Selectors $(‘#myId’) $(‘.myClass’) $(‘div.myClass’) $(‘li > p’) $(‘a[href^=mailto:’) $(‘li:even’)
    25. Accessing the DOM with Selectors $(‘#myId’) $(‘.myClass’) $(‘div.myClass’) $(‘li > p’) $(‘a[href^=mailto:’) $(‘li:even’) $(‘li:not(:last)’)
    26. Accessing the DOM with Selectors $(‘#myId’) $(‘.myClass’) $(‘div.myClass’) $(‘li > p’) $(‘a[href^=mailto:’) $(‘li:even’) $(‘li:not(:last)’) $(‘#myId .myClass’)
    27. Accessing the DOM with Selectors $(‘#myId’) $(‘.myClass’) $(‘div.myClass’) $(‘li > p’) $(‘a[href^=mailto:’) $(‘li:even’) $(‘li:not(:last)’) $(‘#myId .myClass’) $(‘#myTable tr.eq(3)’)
    28. Accessing the DOM with Selectors $(‘#myId’) $(‘.myClass’) $(‘div.myClass’) http://tinyurl.com/jlotf $(‘li > p’) $(‘a[href^=mailto:’) $(‘li:even’) $(‘li:not(:last)’) $(‘#myId .myClass’) $(‘#myTable tr.eq(3)’)
    29. WHAT YOU GET BACK
    30. Implicit Iteration $(‘li’).addClass(‘highlight’)
    31. Explicit Iteration $(‘li’).each(function() { $(this).addClass(‘highlight’); });
    32. Modifying Appearance of a Webpage
    33. Modifying Appearance of a Webpage .css(‘border’, ‘solid red’)
    34. Modifying Appearance of a Webpage .css(‘border’, ‘solid red’) .css({‘height’:‘100px’,
    35. Modifying Appearance of a Webpage .css(‘border’, ‘solid red’) .css({‘height’:‘100px’, ‘width’:‘200px’})
    36. Modifying Appearance of a Webpage .css(‘border’, ‘solid red’) .css({‘height’:‘100px’, ‘width’:‘200px’}) .height(‘100px’)
    37. Modifying Appearance of a Webpage .css(‘border’, ‘solid red’) .css({‘height’:‘100px’, ‘width’:‘200px’}) .height(‘100px’) .addClass() .removeClass()
    38. Modifying Appearance of a Webpage .css(‘border’, ‘solid red’) .css({‘height’:‘100px’, ‘width’:‘200px’}) .height(‘100px’) .addClass() .removeClass() .toggleClass()
    39. EVENTS $(‘p’).click(function() { // do stuff }); $(‘p’).click() // triggers $(‘p’).live(‘click’, function() { // do stuff }
    40. AJAX $.ajax({ type: "POST", url: "saveUrl", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } }); Ajax Event Callbacks ajaxStart, ajaxStop, ajaxComplete, beforeSend, ajaxError, ajaxSend, etc.
    41. EFFECTS .hide() .show() speeds .fadeIn() callbacks .fadeOut() compound effects .toggle() .slideToggle() animate()
    42. jQuery UI Open source UI components built on jQuery
    43. Plugins Nearly 500 plugins Simply include the .js and call a function
    44. Matthew Taylor rhyolight@gmail.com http://dangertree.net @rhyolight
    45. Matthew Taylor rhyolight@gmail.com http://dangertree.net @rhyolight

    ×