JQuery: JavaScript Library of the Future
Download as KEY, PDF23 likes9,688 views
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.
Ad
More Related Content
What's hot (20)
Viewers also liked (7)
Ad
Similar to JQuery: JavaScript Library of the Future (20)
Ad
More from Matthew Taylor (8)
Recently uploaded (20)
JQuery: JavaScript Library of the Future
- 1. jQuery JavaScript Library of the Future Matt Taylor
- 12. “Most of the people writing in JavaScript are not programmers” - Douglas Crockford
- 13. “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
- 14. 1998
- 25. THEY USE jQUERY
- 27. UNOBTRUSIVE
- 30. IT IS OKAY NOT TO BE OBJECT ORIENTED
- 31. IT IS OKAY NOT TO BE OBJECT ORIENTED
- 32. jQuery Object jQuery
- 34. jQuery Object $(...)
- 35. $() returns $
- 36. Accessing the DOM with Selectors
- 37. Accessing the DOM with Selectors $(‘#myId’)
- 38. Accessing the DOM with Selectors $(‘#myId’) $(‘.myClass’)
- 39. Accessing the DOM with Selectors $(‘#myId’) $(‘.myClass’) $(‘div.myClass’)
- 40. Accessing the DOM with Selectors $(‘#myId’) $(‘.myClass’) $(‘div.myClass’) $(‘li > p’)
- 41. Accessing the DOM with Selectors $(‘#myId’) $(‘.myClass’) $(‘div.myClass’) $(‘li > p’) $(‘a[href^=mailto:’)
- 42. Accessing the DOM with Selectors $(‘#myId’) $(‘.myClass’) $(‘div.myClass’) $(‘li > p’) $(‘a[href^=mailto:’) $(‘li:even’)
- 43. Accessing the DOM with Selectors $(‘#myId’) $(‘.myClass’) $(‘div.myClass’) $(‘li > p’) $(‘a[href^=mailto:’) $(‘li:even’) $(‘li:not(:last)’)
- 44. Accessing the DOM with Selectors $(‘#myId’) $(‘.myClass’) $(‘div.myClass’) $(‘li > p’) $(‘a[href^=mailto:’) $(‘li:even’) $(‘li:not(:last)’) $(‘#myId .myClass’)
- 45. 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)’)
- 46. 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)’)
- 49. Explicit Iteration $(‘li’).each(function() { $(this).addClass(‘highlight’); });
- 50. Modifying Appearance of a Webpage
- 51. Modifying Appearance of a Webpage .css(‘border’, ‘solid red’)
- 52. Modifying Appearance of a Webpage .css(‘border’, ‘solid red’) .css({‘height’:‘100px’,
- 53. Modifying Appearance of a Webpage .css(‘border’, ‘solid red’) .css({‘height’:‘100px’, ‘width’:‘200px’})
- 54. Modifying Appearance of a Webpage .css(‘border’, ‘solid red’) .css({‘height’:‘100px’, ‘width’:‘200px’}) .height(‘100px’)
- 55. Modifying Appearance of a Webpage .css(‘border’, ‘solid red’) .css({‘height’:‘100px’, ‘width’:‘200px’}) .height(‘100px’) .addClass() .removeClass()
- 56. Modifying Appearance of a Webpage .css(‘border’, ‘solid red’) .css({‘height’:‘100px’, ‘width’:‘200px’}) .height(‘100px’) .addClass() .removeClass() .toggleClass()
- 57. EVENTS $(‘p’).click(function() { // do stuff }); $(‘p’).click() // triggers $(‘p’).live(‘click’, function() { // do stuff }
- 58. 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.
- 59. EFFECTS .hide() .show() speeds .fadeIn() callbacks .fadeOut() compound effects .toggle() .slideToggle() animate()
- 60. jQuery UI Open source UI components built on jQuery
- 61. Plugins Nearly 500 plugins Simply include the .js and call a function
Editor's Notes
- #40: What you get back from selectors is the jQuery object, which contains the selected elements.
- #41: What you get back from selectors is the jQuery object, which contains the selected elements.
- #42: What you get back from selectors is the jQuery object, which contains the selected elements.
- #43: What you get back from selectors is the jQuery object, which contains the selected elements.
- #44: What you get back from selectors is the jQuery object, which contains the selected elements.
- #45: What you get back from selectors is the jQuery object, which contains the selected elements.
- #46: What you get back from selectors is the jQuery object, which contains the selected elements.
- #47: What you get back from selectors is the jQuery object, which contains the selected elements.
- #48: What you get back from selectors is the jQuery object, which contains the selected elements.
- #49: What you get back from selectors is the jQuery object, which contains the selected elements.