Getting Started with jQuery


Published on

This slide set was used for a online classroom session on jQuery.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Getting Started with jQuery

  1. 1. Creating Web Applications using jQuery Akshay Mathur
  2. 2. Let’s Know Each Other • Do you code? • OS? • Programing Language? • HTML? • JavaScript? • JSON? • Why are you attending?
  3. 3. Akshay Mathur • Founding Team Member of o ShopSocially (Enabling “social” for retailers) o AirTight Neworks (Global leader of WIPS) • 15+ years in IT industry o Currently Principal Architect at ShopSocially o Mostly worked with Startups  From Conceptualization to Stabilization  At different functions i.e. development, testing, release  With multiple technologies
  4. 4. Advance JavaScript • As we try creating real world web applications, things go complex • However, there immerges a pattern of requirements o Common functions can be created
  5. 5. JS Framework • Library for simplifying JS coding • Provides simple interface and syntactic sugar for common JS work o Selecting DOM element o DOM traversal and manipulation o Event handling o Takes care of cross browser and cross version issues
  6. 6. jQuery • Jquery is most popular • Takes care of cross browser and cross version issues • Simplifys JS coding o Selectors for easy DOM traversal o Everything is via functions o Same function for get and set o …
  7. 7. jQuery Versions • 2.x series doesn’t work on old IE browser o Do not use if you need to support  Internet Explorer 6.0  Internet Explorer 7.0  Internet Explorer 8.0 • 1.x series support old IE browsers • Please carefully read jQuery download page
  8. 8. jQuery Function • jQuery registers a function in global scope jquery() • For convenience, this function is also mapped to a single character $ $()
  9. 9. jQuery Function • This functions takes an argument of various types and returns jQuery objects jquery(‘selector’) $(DOM_element)
  10. 10. jQuery Object • Always a list (Array) o Methods of Array work normally on jQuery object $(‘’).length // 0 o Members of the list are DOM elements o Empty list, if no element • Native JavaScript methods and properties are o NOT available on jQuery Objects o Available on the members of the Array $(‘img’)[0].src
  11. 11. jQuery Object • Always has all API functions o No error on a function call o Does nothing, if the list in jQuery object is empty $(‘’).text() //’’ $(‘’).html() //undefined
  12. 12. jQuery Selectors
  13. 13. Why Selectors • Selecting a DOM element is needed for working on that element o JavaScript has many functions like getElemetByID, getElementsByTagName etc. • Instead, jQuery provides support of CSS selectors plus some jQuery specific selectors o Look at selectors page of jQuery API documentation for complete list
  14. 14. Selectors • Allows to select one or more DOM elements o Various selection patterns are available to use o Selector is passed as string to jQuery function • When jQuery function is called on the selector, jQuery object is returned o Selected nodes include the complete DOM tree under the node o DOM manipulation can be done on the selected nodes
  15. 15. Basic Selectors • All: ‘*’ o Selects all nodes on the page o Top level nodes e.g. html, head, body are also included • Tag: ‘tagname’ o Selects all nodes of a particular type e.g. div, a, span etc.
  16. 16. Basic Selectors • ID: ‘#el_id’ o Selects the node having the particular ID attribute o Does not work properly if there are more than one node with same ID o This is equivalent to getElementById • Class: ‘.el_class’ o Selects all the nodes having the particular class attribute o This is equivalent to getElementsByClassName
  17. 17. @akshaymathu
  18. 18. Reading DOM
  19. 19. Reading innerHTML $(el).html() • Reads complete HTML inside a DOM node o Returns HTML of complete DOM tree including all child nodes o All HTML tags and attributes are preserved o The output can be inserted somewhere else in the DOM
  20. 20. Reading innerText $(‘selector’).text() • Reads Text inside the selected DOM node o Returns text of complete DOM tree including all child nodes o All HTML tags and attributes are removed
  21. 21. Advance Selectors
  22. 22. Combining Selectors ‘a.my_class’ Selects only the anchor nodes having having class my_class What does following selects do? ‘span.clas1’ ‘table#my_tbl’
  23. 23. Combining Selectors • Putting comma between selectors selects all of them ‘#el_id, .my_class’ o In this case node having id el_id as well as all nodes having class my_class will become part of returned jQuery object
  24. 24. Attribute Selectors • Attribute selectors allow to create a selection based on any attribute of a HTML node o Attribute Equals: “div[el_id=‘my_id’]” o Attribute Not Equals: “div[el_id!=‘my_id’]” o Attribute Starts with: “div[el_id^=‘my_id’]” o Attribute Ends with: “div[el_id$=‘my_id’]” o Attribute Contains: “div[el_id*=‘my_id’]” • These work on custom (non-standard) attributes as well
  25. 25. Going Narrow • Descendent: ‘#el_id a’ o Selects all the anchors within the node having id=el_id o These anchors may be at any level deep in the DOM tree • Children: ‘#el_id>.el_class’ o Selects first level nodes having class=el_class within the node having id=el_id o Only one level deep DOM tree is searched in this case
  26. 26. Filters
  27. 27. Narrowing Down Selection • All possible ways to reach an element are not available as selectors o There are filters to further narrowing down • Filters are applied on selectors o They can be part of selector string o Filter functions can be used for filtering items selected jQuey object
  28. 28. Form Filters • All text boxes: ‘:text’ • Checked checkboxes: ‘:checkbox:checked’ • Buttons with class btn: ‘.btn:button’ • Everything disabled: ‘:disabled’ • Currently focused: ‘:focus’
  29. 29. Narrowing Down Selection • All visible items: ‘:visiblle’ • First/Last: ‘a:first’, ‘a:last’ • Even rows: ‘tr:even’ • Nth column of a row: ‘tr.item>td:eq(N-1)’ • All header nodes: ‘:header’
  30. 30. Filter Functions • Filter functions can be applied on existing jQuery objects for narrowing down $(el).eq(index) o .eq() takes an index (0 based) as parameter and selects only the item with specific index $(el).find(selector) o .find() takes another selector as parameter o It is used for selecting within a DOM tree instead of full page
  31. 31. Selection Outside • Sometimes it is needed to select parents of a DOM node Immediate parents $(el).parent() All parents up in the tree $(el).parents(selector) Closest parent in the tree $(el).closest(selector)
  32. 32. 34@akshaymathu
  33. 33. Manipulating DOM
  34. 34. Reading DOM •Different functions are for reading different items Contents of a DOM node $(el).text() $(el).html() Attribute of an HTML node $(el).attr(‘attr_name’) $(el).css(‘style_attr_name’) Form elements $(el).val() $(el).prop(‘property_name’)
  35. 35. Writing DOM • Same functions are used for reading and writing Contents of a DOM node $(el).text(‘some text’) $(el).html(‘some HTML’) Attribute of an HTML node $(el).attr(‘attr_name’, ‘attr_value’) $(el).css(‘style_attr_name’, ‘value’) Form elements $(el).val(‘Value’) $(el).prop(‘property_name’, true)
  36. 36. Adding and Removing Nodes • Add inside $(el).append(html) $(el).prepend(html) • Add outside $(el).before(html) $(el).after(html) • Remove $(el).remove()
  37. 37. Changing Looks • By changing in-line style $(el).css(‘property-name’, ‘property_value’) • By changing class $(el).addClass(‘a_class’) $(el).removeClass(‘cls’)
  38. 38. Chaining • Most jQuery functions return the jQuery object o This allows to call multiple functions one after other as a chain without having to select again $(‘#a_id’) .addClass(‘bold’) .removeClass(‘heading’);
  39. 39. Dealing with User Actions
  40. 40. Triggering Event • Browser raises the event on actions • The events can also be programmatically triggered o By using .trigger() function $(el).trigger(‘change’); o By using the same shortcut function (that registers the handler) without argument $(el).click(); $(el).focus();
  41. 41. Handling Events • On user’s action, browser raise corresponding event o Handler functions can be bind to the events • All the handlers registered for the events get called o Order in which the handlers (if more than one registered) are called is not fixed
  42. 42. Binding Event Handlers • The element on which the event handler is being bind has to be present in the DOM $(el).on(‘click’, handler_fn); or $(el).click(handler_fn); • Event handlers can also be removed $(el).off(‘click’)
  43. 43. DOM Ready Event • It is not safe to call a function that reads or writes DOM before the DOM is completely rendered • So it is wise to write all the code in Ready Event handler $(document).ready(function(){ //Code goes here });
  44. 44. Event Bubbling • The raised event bubbles up in the HTML DOM tree till the root node <body> <ul> <li> <a href=“#”>Click Me</a> </li> </ul> </body>
  45. 45. Event Delegation • Because events bubble, they can be handled at any parent node in the DOM tree <ul> <li> <a href=“#”>Click Me</a> </li> </ul> • When user clicks on the link, click handlers registered at ‘a’, ‘li’ as well as at ‘ul’ will be fired
  46. 46. Delegated Event Handling • This is useful if you want to attach a handler for an element that is going to be attached in DOM later $(‘body’).click(function(ev){ if ($(‘a.yes’)){ handler(); } }); or $(‘body’).on(‘click’, ‘a.yes’, handler)
  47. 47. Event Object • For browser events, an Object having data about the event is passed to the event handler o The element that initiated the event o Coordinates on the page where user acted Ev.pageX and Ev.pageY o Code of keyboard key or mouse button Ev.which
  48. 48. Testing Selection $(el).is(selector) • .is function is to test if output of one selector matches other selector $(‘body’).click(function(ev){ if ($(‘a.yes’)){ handler(); } });
  49. 49. Event Bubbling • The raised event bubbles up in the HTML DOM tree till the root node o This bubbling can be stopped within the even handler $(a).click(function(ev){ ev.stopPropagation(); });
  50. 50. Preventing Default Behavior • By default browser does some default action when event occurs o For example, when an anchor is clicked, it takes user to the location specified by ‘href’ • This default behavior can be stopped in the event handler $(a).click(function(ev){ ev.preventDefault(); });
  51. 51. Talking to Server
  52. 52. Asynchronous JavaScript & XML • A way in web browser to communicate with server without reloading the page • XmlHttpRequest (XHR) object can also create HTTP request and receive response o The request happens asynchronously  Other operations on page are allowed during the request o Received data does not render automatically  Data needs to be received in a callback function and used programmatically
  53. 53. AJAX Call $.ajax({ url: ‘/my_ajax_target’, type: ‘POST’, DataType: ‘json’, data: {id: 2}, context: this, success: function(response){ alert(‘Hello! ‘ +; }, error: function(){ alert(‘Please try later’); } });
  54. 54. AJAX Types • This parameter tells what HTTP method to use for the request • GET and POST are supported by all browser o $.get(url) and $.post(url) can be used as shortcut • Some browsers do not support PUT and DELETE o For some web frameworks (e.g. pylons), POST with _method data parameter can be used as proxy
  55. 55. AJAX Data Types • This parameter tells how to interpret the data returned from the server o ‘text’: Read as plain text o ‘xml’: Parse into XML document o ‘html’: Parse as HTML o ‘script’: Interpret and execute as JavaScript o ‘json’: Convert into a JavaScript Object o ‘jsonp’: Load as cross-domain script and convert into JSON
  56. 56. AJAX Callbacks • When AJAX events occur, callbacks registered for those evens are called o Similar to all callbacks, the original context and variables are lost by default o A context object can be passed using context parameter $.ajax({ context: $(this).find(‘.greeting’), success: function(response){ $(this).text(‘Hello! ‘ +; }});
  57. 57. AJAX Events • There are may AJAX events for which handlers can be registered o success: Called when AJAX call ends in success o error: Called when AJAX call ends in error o complete: Called when AJAX call ends in success or in error o beforeSend: Called before sending the AJAX call
  58. 58. Animations and Effects
  59. 59. What is Animation • Change in visual state (looks) • Slow and smooth
  60. 60. Animation Effects • jQuery’s standard show/hide functions also animate o If you pass time argument (in ms) o Animates the content by changing size of the content  Both height and width are changed $(el).show(2000); $(el).hide(2000);
  61. 61. Animation Effects • Similar can be done by changing only height o Easing name can be passed instead of time o Hide $(el).slideUp(‘slow’); o Show $(el).slideDown(‘fast’);
  62. 62. Animation Effects • There are special functions for fade effect o Changes the opacity of the object $(el).fadeOut(2000); $(el).fadeIn(3000);
  63. 63. Animation Effects • Any effect can be created using .animate() o Just pass desired set of CSS parameters as an object $(el).animate({ height: 10, opacity: 0.1 }, 5000);
  64. 64. Chaining Animations • Animation take some time to complete • Second animation has to start after the first • Callback functions can be passed to all animation functions $(el).fadeOut(3000, function(){ next_animation(); });
  65. 65. Movie in HTML • Multiple animations in a sequence become a movie o Dialog add spice • Hosted Movie: • Code:
  66. 66. Thanks @akshaymathu