Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

jQuery

•Download as PPTX, PDF•
•
Jay Poojara
Jay Poojara

JQuery is a JavaScript library that simplifies HTML document manipulation, event handling, animations, and Ajax interactions. It works across browsers and makes tasks like DOM traversal and manipulation, event handling, animation, and Ajax much simpler. JQuery's versatility, extensibility, and cross-browser compatibility have made it popular, with millions of developers using it to write JavaScript.

1 of 23
JQUERY Prepared By Jay Poojara 1
WHAT IS JQUERY? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. 2
WHY IS JQUERY AWESOME? What jQuery does well: 1. 2. 3. 4. 5. Simplified AJAX DOM Manipulation Event Management Animations Normalizes Browser Differences Why It Is Successful: 1. 2. 3. 4. 5. Well Designed Easy to extend with plugins Great Documentation Large jQuery Community Cross-browser 3
JQUERY FOUNDER 4
WHO'S USING JQUERY? ….This are some of the examples…. 5
JQUERY PHILOSOPHY Find some stuff Do something to it 6
SAMPLE JQUERY Our DOM Include jQuery The „ready event‟ – Binds a function to be executed whenever the DOM is ready Select the „toggleContent‟ DOM element and bind a click event handler to it. Select the „content‟ DOM element and set the text to „Hello World!‟ Prevent the default behavior of the anchor tag by returning false 7
DOLLAR FUNCTION $(); • JavaScript identifiers can start with $ • The jQuery framework automatically assigns „$‟ to the „jQuery‟ function $ === jQuery true $(selector) is same as jQuery(selector) • Can use utility function to unassign $ $.noConflict(); $ === jQuery; false • Can reassign jQuery to another variable $j = $.noConflict(); $j === jQuery; true $j === $; false 8 $ === jQuery; false
DOCUMENT READY EVENT • $(document).ready(fn); • The bound function will be called the instant the DOM is ready to be read and manipulated. • As many as you want on the page. • Executed in the order they were added. • There is a shortcut: $(fn); 9
SELECTORS CSS3 Selectors jQuery Selects… $(„#myId‟) By ID $(„div‟) By Element Type $(„.myClass‟) By Class $(„div, span, p.myClass, #myid‟) Multiple $(„*‟) All $(„.myClass‟, this), $(„p.myClass‟) By Context (better performance) $(„#main div‟) Descendents (all levels) $(„#main > div‟) Children (first level) $(„label + input‟) The immediate element after $(„#prev ~ div‟) The first element after $(„div[id]‟) All elements that have the specified attribute $(„input[type=text]‟) By Attribute value 10
FILTERS $(„div:empty‟), $(„:empty‟), $(„div:not(:empty)‟) jQuery Filters… :first, :last, :nth(n) First, Last, Nth Element :odd, :even Odd, Even Elements :visible, :hidden Visible, Hidden Elements :enabled, :disabled Enabled, Disabled Elements :contains(“text”) Contains specified text :empty Elements w/ no children (or text) :first-child, :last-child, :nthchild(n) Child Element :lt(n), :gt(n) Elements w/ index below or after :not(selector) Does not match selector :MyCustomFilter Custom Filters (Implement your own!) Custom Filter Used 11
CHAINING • Most jQuery methods return another jQuery object (usually the same collection), which means you can chain method calls together with a fluent like syntax • Some methods that stop a chain, these methods return a value from the jQuery object .css(name), .text(), .html(), .val(), .height(), .width(), .is(„:visible‟) • Some methods will return a different jQuery collection, you can revert to the previous collection by calling .end(); 12
ATTRIBUTES & CLASSES • Getters & Setters for attr, html, text, val • Getter (returns String – breaks chain) var text = $(„#myDiv‟).text(); • Setter (returns jQuery) $(„#myDiv‟).text(„Hello World!‟); • text() escapes html() • val() used with inputs • attr() can take JSON • Add, Remove for Attributes & Classes • .removeAttr(„someAttr‟); • .addClass(„someClass‟); • .removeClass(„someClass‟); • .toggleClass(„someClass‟); 13
TRAVERSING • Family • parent, parents, siblings, children • Proximity • closest, next, prev, nextAll, prevAll • Searching • find 14
EVENTS .bind(type, data, fn) • Binds a handler to an event on all matched elements .one(type, data, fn) • Binds a handler to be executed only once for each matched element .trigger(event, data) • Trigger an event to occur on all matched elements .unbind(type, fn) • Removes event handlers from all matched elements .live(type, fn) • Binds a handler to an event on all currently matched and future matched elements. .die(type, fn) • Removes a bound live event. .hover(fnOver, fnOut) • Interaction helper that will handle mouseover and mouseout .toggle(fn1, fn2, fn3, fnN, …) • Interaction helper that will toggle among two or more function calls every other click. 15
EVENT HELPERS blur, change, click, dblclick, error, focus, keydown, keypress, k eyup, load, mousedown, mouseenter, mouseleave, mousemov e, mouseup, resize, scroll, select, submit, unload 16
MANIPULATION • Inserting Inside • append, prepend • appendTo, prependTo • Inserting Outside • after, before • insertAfter, insertBefore • Inserting Around • wrapInner • wrap • wrapAll • Replacing • replaceWith, replaceAll • Removing • empty, remove • Copying • clone 17
EFFECTS • Basics • show, hide, toggle • Sliding • slideUp, slideDown, slideToggle • Fading • fadeIn, fadeOut, fadeTo (opacity 0-1) • Custom • animate, stop 18
PLUG-INS • Extremely Simple – Promotes code reuse and DRY principle $.fn.MyPlugin = function(params) {}; • Return a jQuery object to prevent from “breaking the chain” • Unless you are returning a specific value • Best Practice is to wrap the plug-in declaration within an anonymous JavaScript function in order to prevent collisions with the use of $ 19
UTILITY FUNCTIONS • Array and Object Operations $.each(object, callback) – Callback function will run for each item in the object. The each method is meant to be an immutable iterator and returns the original array. $.map(array, callback) – Callback function will run for each item in the array. The map method can be used as an iterator, but is designed to be used for manipulation of the supplied array and returns a new array. $.merge(first, second) – Merges the second array into the first array. $.unique(array) – Removes duplicate elements (only works on arrays of DOM elements). $.extend(object) – Add functions into the jQuery namespace. $.extend(deep, target, object1, objectN) – Merge values from objects 1 to N into target object. Deep is an optional boolean that if true, tells jQuery to do a deep copy. $.grep(array, callback, invert) – Iterates through array, and returns a new array with values from the original array that satisfy the criteria specified in the callback. $.inArray(value, array) – Gets the index of the value in the array (-1 if not found). • String Operations $.trim(str) – Removes whitespace from the given string. • Test Operations $.isArray(obj) – Determines if the object is an array. $.isFunction(obj) – Determines if the object is a function. 20
JQUERY DATA • Can store data on one or more jQuery elements • .data(name, value) • value is an object • Retrieves data from the first element in the jQuery object • .data(name) 21
RESOURCES • jQuery Main • http://jquery.com • http://docs.jquery.com/Downloading_jQuery • jQuery API Documentation • http://api.jquery.com • http://docs.jquery.com • jQuery UI • http://jqueryui.com • http://jqueryui.com/themeroller/ • jQuery Blog • http://blog.jquery.com/ • Around The Web • • http://www.nettuts.com • • http://stackoverflow.com http://www.smashingmagazine.com Tools • Visual Studio JavaScript Intellisense Support (KB958502) • http://getfirebug.com/ (Firebug Firefox Plug-in) • http://jsbin.com/ (JS Bin - Collaborative JavaScript Debugging) 22
THANK YOU Even a correct decision is wrong when it was taken too late. any Queries? 23

More Related Content

jQuery

  • 2. WHAT IS JQUERY? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. 2
  • 3. WHY IS JQUERY AWESOME? What jQuery does well: 1. 2. 3. 4. 5. Simplified AJAX DOM Manipulation Event Management Animations Normalizes Browser Differences Why It Is Successful: 1. 2. 3. 4. 5. Well Designed Easy to extend with plugins Great Documentation Large jQuery Community Cross-browser 3
  • 5. WHO'S USING JQUERY? ….This are some of the examples…. 5
  • 6. JQUERY PHILOSOPHY Find some stuff Do something to it 6
  • 7. SAMPLE JQUERY Our DOM Include jQuery The „ready event‟ – Binds a function to be executed whenever the DOM is ready Select the „toggleContent‟ DOM element and bind a click event handler to it. Select the „content‟ DOM element and set the text to „Hello World!‟ Prevent the default behavior of the anchor tag by returning false 7
  • 8. DOLLAR FUNCTION $(); • JavaScript identifiers can start with $ • The jQuery framework automatically assigns „$‟ to the „jQuery‟ function $ === jQuery true $(selector) is same as jQuery(selector) • Can use utility function to unassign $ $.noConflict(); $ === jQuery; false • Can reassign jQuery to another variable $j = $.noConflict(); $j === jQuery; true $j === $; false 8 $ === jQuery; false
  • 9. DOCUMENT READY EVENT • $(document).ready(fn); • The bound function will be called the instant the DOM is ready to be read and manipulated. • As many as you want on the page. • Executed in the order they were added. • There is a shortcut: $(fn); 9
  • 10. SELECTORS CSS3 Selectors jQuery Selects… $(„#myId‟) By ID $(„div‟) By Element Type $(„.myClass‟) By Class $(„div, span, p.myClass, #myid‟) Multiple $(„*‟) All $(„.myClass‟, this), $(„p.myClass‟) By Context (better performance) $(„#main div‟) Descendents (all levels) $(„#main > div‟) Children (first level) $(„label + input‟) The immediate element after $(„#prev ~ div‟) The first element after $(„div[id]‟) All elements that have the specified attribute $(„input[type=text]‟) By Attribute value 10
  • 11. FILTERS $(„div:empty‟), $(„:empty‟), $(„div:not(:empty)‟) jQuery Filters… :first, :last, :nth(n) First, Last, Nth Element :odd, :even Odd, Even Elements :visible, :hidden Visible, Hidden Elements :enabled, :disabled Enabled, Disabled Elements :contains(“text”) Contains specified text :empty Elements w/ no children (or text) :first-child, :last-child, :nthchild(n) Child Element :lt(n), :gt(n) Elements w/ index below or after :not(selector) Does not match selector :MyCustomFilter Custom Filters (Implement your own!) Custom Filter Used 11
  • 12. CHAINING • Most jQuery methods return another jQuery object (usually the same collection), which means you can chain method calls together with a fluent like syntax • Some methods that stop a chain, these methods return a value from the jQuery object .css(name), .text(), .html(), .val(), .height(), .width(), .is(„:visible‟) • Some methods will return a different jQuery collection, you can revert to the previous collection by calling .end(); 12
  • 13. ATTRIBUTES & CLASSES • Getters & Setters for attr, html, text, val • Getter (returns String – breaks chain) var text = $(„#myDiv‟).text(); • Setter (returns jQuery) $(„#myDiv‟).text(„Hello World!‟); • text() escapes html() • val() used with inputs • attr() can take JSON • Add, Remove for Attributes & Classes • .removeAttr(„someAttr‟); • .addClass(„someClass‟); • .removeClass(„someClass‟); • .toggleClass(„someClass‟); 13
  • 14. TRAVERSING • Family • parent, parents, siblings, children • Proximity • closest, next, prev, nextAll, prevAll • Searching • find 14
  • 15. EVENTS .bind(type, data, fn) • Binds a handler to an event on all matched elements .one(type, data, fn) • Binds a handler to be executed only once for each matched element .trigger(event, data) • Trigger an event to occur on all matched elements .unbind(type, fn) • Removes event handlers from all matched elements .live(type, fn) • Binds a handler to an event on all currently matched and future matched elements. .die(type, fn) • Removes a bound live event. .hover(fnOver, fnOut) • Interaction helper that will handle mouseover and mouseout .toggle(fn1, fn2, fn3, fnN, …) • Interaction helper that will toggle among two or more function calls every other click. 15
  • 16. EVENT HELPERS blur, change, click, dblclick, error, focus, keydown, keypress, k eyup, load, mousedown, mouseenter, mouseleave, mousemov e, mouseup, resize, scroll, select, submit, unload 16
  • 17. MANIPULATION • Inserting Inside • append, prepend • appendTo, prependTo • Inserting Outside • after, before • insertAfter, insertBefore • Inserting Around • wrapInner • wrap • wrapAll • Replacing • replaceWith, replaceAll • Removing • empty, remove • Copying • clone 17
  • 18. EFFECTS • Basics • show, hide, toggle • Sliding • slideUp, slideDown, slideToggle • Fading • fadeIn, fadeOut, fadeTo (opacity 0-1) • Custom • animate, stop 18
  • 19. PLUG-INS • Extremely Simple – Promotes code reuse and DRY principle $.fn.MyPlugin = function(params) {}; • Return a jQuery object to prevent from “breaking the chain” • Unless you are returning a specific value • Best Practice is to wrap the plug-in declaration within an anonymous JavaScript function in order to prevent collisions with the use of $ 19
  • 20. UTILITY FUNCTIONS • Array and Object Operations $.each(object, callback) – Callback function will run for each item in the object. The each method is meant to be an immutable iterator and returns the original array. $.map(array, callback) – Callback function will run for each item in the array. The map method can be used as an iterator, but is designed to be used for manipulation of the supplied array and returns a new array. $.merge(first, second) – Merges the second array into the first array. $.unique(array) – Removes duplicate elements (only works on arrays of DOM elements). $.extend(object) – Add functions into the jQuery namespace. $.extend(deep, target, object1, objectN) – Merge values from objects 1 to N into target object. Deep is an optional boolean that if true, tells jQuery to do a deep copy. $.grep(array, callback, invert) – Iterates through array, and returns a new array with values from the original array that satisfy the criteria specified in the callback. $.inArray(value, array) – Gets the index of the value in the array (-1 if not found). • String Operations $.trim(str) – Removes whitespace from the given string. • Test Operations $.isArray(obj) – Determines if the object is an array. $.isFunction(obj) – Determines if the object is a function. 20
  • 21. JQUERY DATA • Can store data on one or more jQuery elements • .data(name, value) • value is an object • Retrieves data from the first element in the jQuery object • .data(name) 21
  • 22. RESOURCES • jQuery Main • http://jquery.com • http://docs.jquery.com/Downloading_jQuery • jQuery API Documentation • http://api.jquery.com • http://docs.jquery.com • jQuery UI • http://jqueryui.com • http://jqueryui.com/themeroller/ • jQuery Blog • http://blog.jquery.com/ • Around The Web • • http://www.nettuts.com • • http://stackoverflow.com http://www.smashingmagazine.com Tools • Visual Studio JavaScript Intellisense Support (KB958502) • http://getfirebug.com/ (Firebug Firefox Plug-in) • http://jsbin.com/ (JS Bin - Collaborative JavaScript Debugging) 22
  • 23. THANK YOU Even a correct decision is wrong when it was taken too late. any Queries? 23

Editor's Notes

  1. Unobtrusive JavaScriptLess code
  2. Unobtrusive JavaScriptLess code
  3. Demo
  4. Demo
  5. Demo
  6. Demo
  7. Demo
  8. Demo
  9. Demo