JQuery: JavaScript Library of the Future
23 likes9,689 views
The document discusses the use of jQuery, emphasizing its unobtrusive and functional nature for web developers unfamiliar with programming. It covers various jQuery functionalities such as DOM access, modification of webpage appearance, event handling, AJAX integration, and effects. The document also highlights the availability of numerous open source UI components and plugins built on jQuery.
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.