Download as KEY, PPTX
Uploaded byMatthew Taylor
JQuery: JavaScript Library of the Future
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 ofthe Future Matt Taylor
- 2.
- 3.
- 12. “Most of thepeople writing in JavaScript are not programmers” - Douglas Crockford
- 13. “Programmers who attempt touse JavaScript for non-trivial tasks often find the process frustrating if they do not have a solid understanding of the language.” - David Flanagan
- 14.
- 20.
- 25.
- 27.
- 28.
- 29.
- 30. IT IS OKAY NOTTO BE OBJECT ORIENTED
- 31. IT IS OKAY NOTTO BE OBJECT ORIENTED
- 32. jQuery Object jQuery
- 33.
- 34. jQuery Object $(...)
- 35.
- 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)’)
- 47.
- 48.
- 49. Explicit Iteration $(‘li’).each(function() { $(this).addClass(‘highlight’); });
- 50. Modifying Appearance of a Webpage
- 51. Modifying Appearance ofa Webpage .css(‘border’, ‘solid red’)
- 52. Modifying Appearance ofa Webpage .css(‘border’, ‘solid red’) .css({‘height’:‘100px’,
- 53. Modifying Appearance ofa Webpage .css(‘border’, ‘solid red’) .css({‘height’:‘100px’, ‘width’:‘200px’})
- 54. Modifying Appearance ofa Webpage .css(‘border’, ‘solid red’) .css({‘height’:‘100px’, ‘width’:‘200px’}) .height(‘100px’)
- 55. Modifying Appearance ofa Webpage .css(‘border’, ‘solid red’) .css({‘height’:‘100px’, ‘width’:‘200px’}) .height(‘100px’) .addClass() .removeClass()
- 56. Modifying Appearance ofa 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 sourceUI components built on jQuery
- 61. Plugins Nearly 500 plugins Simplyinclude the .js and call a function
- 62.
- 63.
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.