- jQuery uses CSS-style selectors to select elements and create wrapped sets that allow accessing and manipulating elements - Objects in JavaScript can contain functions and properties, and functions are also objects that can be passed around and assigned to properties - Event handling in jQuery provides a cross-browser way to attach multiple handlers to events and prevent default behavior - jQuery methods like bind(), live(), delegate() allow attaching handlers to current and future elements, and events can be hijacked to make AJAX requests instead of full page posts

1. Presented by Arsalan Ahmed jQuery Goodness – part 1

2. Different species than POCOs Properties added dynamically upon first use A typo creates a new property – yikes! Properties accessed via: Dot notation (Object.Property) Subscript notation (Object[‘Property’]) Literal syntax: varsomeObj = { someProp: ‘some value’, otherProp: 2 }; Variables are properties. Equivalent statements in the global scope: var prop = ‘x’; window.prop = ‘x’; prop = x; Objects in Javascript

3. Functions are also objects Functions can contain other functions! have properties! be assigned to a property be passed to a method and also returned from it Smoke and mirrors. Equivalent statements: function someFunc(someParam) { return ‘wow!’ } someFunc = function(someParam) { return ‘wow!’ } window. someFunc = function(someParam) { return ‘wow!’ } So what’s the deal with these functions?

4. Local variables stick around Great way to avoid using global variables Avoids potential naming conflicts Example: var f = function() { varartifactID = 5553333; return function() { processArtifact(artifactID++); } } And then we found closure…

5. Structure and behavior separated Behavior can change independent of structure Avoids spaghetti code Event handling not performed inline Unobtrusive Javascript

6. Start Assume javascript not available Implement acceptable functionality End Layer javascript goodness on top Implement javascript-enhanced functionality Degrade gracefully when javascript cannot be used Progressive Enhancement

7. jQuery uses CSS-style selectors Creates wrapped sets when passed to jQuery jQuery(‘tr:nth-child(2)’) Alias: $(‘tr:nth-child(2)’) Class selectors slower than ID selectors What’s with these selectors?

8. p > a [all anchor tags, direct children of p tags] div.items a [all anchor tags, descendents of div tags with class of items] div.items:has(a) [all div tags with a class of items that contain anchor tags] a[href^=‘http://’] [all anchor tags, href attribute starts with http://] div#coolness.gunit [all div tags with the id of coolness and class of gunit] Selectors: Child, Container, Attribute

9. table#itemListtr:even[all even rows in the table with an ID of itemList] :checkbox:checked:enabled[all enabled and checked checkboxes] :enabled:visible[all enabled and visible elements] Selectors: Filters

11. In wrapper methods, set to the current element

12. Within functions, ‘this’ => function context of the invocationx.desc = ‘x’; y.desc = ‘y’; x.show = function() { alert(this.desc); } x.show(); [outputs ‘x’] x.show.call(y); [outputs ‘y’]

13. var counter = 1; $(window).bind('click contextmenu', function() { $('#demo').css('font-size', '40') .append('<div>Timestamp: ' + new Date() + ', counter = ' + counter + '</div>'); counter++; }); Selectors and Closures Demo

14. Methods on wrapped sets size() => # of elements contained within first(), last() => first or last element within toArray() => array of DOM elements not(exp), filter(exp) => copy of original minus exp exp = selector, function, element, or array slice(begin, end) => subset within the indices each(iterator) => invokes iterator for every element end() => back up to previous wrapped set andSelf() => merges two previous wrapped sets to another Manipulating wrapped sets

15. Browsers implement events differently Event object creation differs Event propagation differs Event handler location differs In other words, it’s great fun! Browser Event Models

16. Handlers defined inline Limit: One handler per event elem.onclick = function(event) { … } Event bubbles up through the DOM Return false to cancel event propagation <form onsubmit=“return false;” … Basic Event Model

17. DOM Level 2 Event Model Allows multiple event handlers per event addEventListener('click', function(event) { ... }, useCapture) useCapture = true => handle capture phase (top to target) event useCapture = false => handle bubble phase (target to top) event Not supported by IE! IE event model uses legacy event names (onclick vs. click) In IE event model, event instance not passed to handler (use window.event) Newer, Fancier Event Model

18. Works on all browsers Allows multiple event handlers per event Uses standard event names Event instance passed as parameter to handler Like Level 2 model but no capture phase Lots of ways to attach handlers to events jQuery Event Model

19. Multiple Event Handlers Demo

20. Event Bubbling Demo

21. Fun With Event Handlers

22. Hijacking form posts Use Ajax POST requests Used in ASP.NET Update Panel jQuery makes it super simple Encourages progressive enhancement The wonderful world of Hijaxing

23. $('form').submit(function(event) { event.preventDefault(); $.ajaxSetup({ type: 'POST', timeout: 10000, dataType: 'html' }); $.ajax({ url: 'http://localhost/Demo/Information.asmx/GetInfo', … success: function(response) { $('#info').html(response) } }); }); Hijaxing: Code Sample

24. jQuery.event.special.eventName Special Events have these optional methods: setup Executes when first event handler is bound to element teardown Executes when last event handler is bound to element add Executes when each event handler is added to element remove Executes when each event handler is removed from element _default (not that interesting) Executes after event has bubbled to “document” Executes for custom events fired by “trigger” method The Wonders Of Special Events

25. Setup event handlers Calculate width and height Element position Ancestry Progeny Containment Filter and Each Merge and Extend Quick Rundown of jQueryConfusicons

26. bind() attaches handler to all elements in wrapped set bind() allows binding multiple events with a handler live() attaches handler to current and FUTURE elements via DOM Scripting live() binds only one event live() can only be invoked on the ORIGINAL wrapped set $('#item', 'tr').closest('table').live('click', function() { ... }); delegate() attaches handlers for current and FUTURE elements delegate() allows filtering to bind to a subset of wrapped set $('#item').delegate('a', 'click', function() { ... }); Binding Event Handlers

27. css('width') and css('height') return strings e.g. '200px‘ width() and height() return integers width() and height() can return dimensions of window and document css('width') and css('height') throw errors for above css('width') and css('height') not always reliable IE returns ‘auto’ for computed dimensions Width And Height

28. position() calculates the offset from nearest ancestor with relative positioning If none found, defaults to document offset() ALWAYS calculates the offset from document Element Position

29. parent(selector) returns the immediate parent if it matches the selector parents(selector) returns all ancestors that match the selector closest(selector) returns the closest ancestor that matches the selector Ancestry

30. children(selector) returns immediate children that match the selector find(selector) returns all descendants that match the selector Progeny

31. not(selector) returns filtered elements that do not match the selector is(selector) returns true if any element in the wrapped set matches the selector $('p:not(.info)') SAME AS $('p').not(‘.info’) $(‘table:has(tr)’) returns all tables with at least one row Containment

32. filter(selector) returns wrapped set of elements that match the selector filter(function) returns wrapped set of all elements for which the function returns true each(function) executes the function over all elements in the wrapped set $.each(function) runs on any array like object function context set to the current element being processed Filter and Each

33. $.merge() combines 2 arrays and saves result to first array $.extend() combines 2+ objects and saves result to first object jQuery.extend([recursive?], target, object1, ... ) Common idiom to use $.extend() to provide default values function(options) { var settings = $.extend({ prop1: 200, prop2: null, }, options || {} ); } Merge And Extend

34. Simply assign a function to a property on jQuery ($) Good Idea: Namespacing $.kCura = {}; $.kCura.somethingWonderful = function(awesomeness) { … }; Bad Idea: Assume $ has not been appropriated (function($) { // awesome code goes here }) (jQuery); Extending jQuery: Utility Functions

35. Create a property on the fn object of jQuery Function context within main body refers to wrapped set Use each() to work on elements individually If iterating via functions, above iteration automatic $.fn.kCurafy = function() { this.each(function() { makeAwesome($(this).data(‘identifier’)); } function makeAwesome(id) { … } }; Usage Example: $(‘img’).kCurafy(); Extending jQuery: Wrapper Functions

36. Questions?