jQuery
Download as PPTX, PDF5 likes1,756 views
jQuery is a JavaScript framework that simplifies client-side scripting. It allows for selecting elements, traversing DOM structures, handling events, and developing animations and AJAX interactions. jQuery abstracts away cross-browser issues and its API is designed to reduce code for common tasks. It has a simple plug-in model for extending functionality and a large community that has built many plug-ins.
More Related Content
What's hot (9)
Viewers also liked (6)
Similar to jQuery (20)
Recently uploaded (20)
![Fast Screen Recorder v2.1.0.11 Crack Updated [April-2025]](https://cdn.slidesharecdn.com/ss_thumbnails/dataanalysisforbusiness-250322061148-eeff8a831-250401123246-f36be9ca-250401141614-87b01766-thumbnail.jpg?width=560&fit=bounds)
jQuery
- 2. What is jQuery?JavaScript framework that makes your life easierSelectors & ChainingDOM TraversingDOM ManipulationEvent HandlingAnimations/EffectsAJAXBuilt-in UtilitiesExtensibleTons of plug-ins built by the community for our use
- 3. Why jQuery?I¡¯m not an expert at JavaScriptThe people who created jQuery are!Do not need to worry about cross-browser issues (all abstracted)Light Weight (19 kb compressed)DRY ¨C Simple plug-in model allows for code reuseAnimations/Effects are simpleCommunity support is growing rapidlyMicrosoft adoption (included in MVC template)Tutorials, plug-ins, etc.Client-side scripting is fun with jQuery and breathes some new life into your applicationsFocus more on the code that solves your problemAmazon, BBC, Dell, Google, IBM, NBC, Netflix, Twitter
- 4. Sample jQueryOur DOMInclude jQueryThe ¡®ready event¡¯ ¨C Binds a function to be executed whenever the DOM is readySelect 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
- 5. Dollar Function $();JavaScript identifiers can start with $The jQuery framework automatically assigns ¡®$¡¯ to the ¡®jQuery¡¯ function$ === jQuerytrue$(selector) is same as jQuery(selector)Can use utility function to unassign $$.noConflict();$ === jQuery; falseCan reassign jQuery to another variable$j = $.noConflict(); $j === jQuery; true$j === $; false$ === jQuery; false
- 6. 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. ChainingMost jQuery methods return another jQuery object (usually the same collection), which means you can chain method calls together with a fluent like syntaxSome 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();
- 10. Attributes & ClassesGetters & Setters for attr, html, text, valGetter (returns String ¨C breaks chain)var text = $(¡®#myDiv¡¯).text();Setter (returns jQuery)$(¡®#myDiv¡¯).text(¡®Hello World!¡¯);text() escapes html()val() used with inputsattr() can take JSONAdd, Remove for Attributes & Classes.removeAttr(¡®someAttr¡¯);.addClass(¡®someClass¡¯);.removeClass(¡®someClass¡¯);.toggleClass(¡®someClass¡¯);
- 11. TraversingFamilyparent, parents, siblings, childrenProximityclosest, next, prev, nextAll, prevAllSearchingfind
- 12. 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.Event Helpers blur, change, click, dblclick, error, focus, keydown, keypress, keyup, load, mousedown, mouseenter, mouseleave, mousemove, mouseup, resize, scroll, select, submit, unload
- 13. ManipulationInserting Insideappend, prependappendTo, prependToInserting Outsideafter, beforeinsertAfter, insertBeforeInserting AroundwrapInnerwrapwrapAllReplacingreplaceWith, replaceAllRemovingempty, removeCopyingclone
- 14. EffectsBasicsshow, hide, toggleSlidingslideUp, slideDown, slideToggleFadingfadeIn, fadeOut, fadeTo (opacity 0-1)Customanimate, stop
- 15. Plug-insExtremely Simple ¨C 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 valueBest Practice is to wrap the plug-in declaration within an anonymous JavaScript function in order to prevent collisions with the use of $Within the plug-in ¡®this¡¯ refers to the jQuery object
- 16. AJAXHelpersload, get, getJSON, getScript, post (all use $.ajax behind the scenes)$.ajaxSetup(options) can be used to globally set the default options for all AJAX request. You can still override these within each AJAX request object.Local Events ¨C subscribed to within AJAX request objectGlobal Events ¨C broadcast to all elements in the DOMCan be disabled within the AJAX request object¡¯s ¡®global¡¯ property.bind(¡®ajaxStart¡¯, fn) or .ajaxStart(fn)G | ajaxStartL | beforeSendG | ajaxSendL | successG | ajaxSuccessL | errorG | ajaxErrorL | completeG | ajaxCompleteG | ajaxStop
- 17. Utility FunctionsArray and Object Operations$.each(object, callback) ¨C 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) ¨C 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) ¨C Merges the second array into the first array.$.unique(array) ¨C Removes duplicate elements (only works on arrays of DOM elements).$.extend(object) ¨C Add functions into the jQuery namespace.$.extend(deep, target, object1, objectN) ¨C 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) ¨C 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) ¨C Gets the index of the value in the array (-1 if not found).String Operations$.trim(str) ¨C Removes whitespace from the given string.Test Operations$.isArray(obj) ¨C Determines if the object is an array.$.isFunction(obj) ¨C Determines if the object is a function.
- 18. jQuery DataCan store data on one or more jQuery elements.data(name, value)value is an objectRetrieves data from the first element in the jQuery object.data(name)
- 19. ResourcesjQuery Mainhttp://jquery.comhttp://docs.jquery.com/Downloading_jQueryjQuery API Documentationhttp://api.jquery.comhttp://docs.jquery.comjQuery UIhttp://jqueryui.comhttp://jqueryui.com/themeroller/jQuery Bloghttp://blog.jquery.com/Around The Webhttp://stackoverflow.comhttp://www.nettuts.comhttp://www.smashingmagazine.comToolsVisual Studio JavaScript Intellisense Support (KB958502)http://getfirebug.com/ (Firebug Firefox Plug-in)http://jsbin.com/ (JS Bin - Collaborative JavaScript Debugging)Twitter@jquery, @jqueryui, @jresig, @rem, @codylindley , @reybango, @elijahmanor, @jamespadolsey, @brandonaaron, @malsup, @pbakaus, @rworth