Getting Started with jQuery
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Getting Started with jQuery

Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 161 98 34 4 3 3 2 2 2 2 2 1 1 1 1 1 1 1 1 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Creating Web Applications using jQuery Akshay Mathur
  • 2. Let’s Know Each Other • Do you code? • OS? • Programing Language? • HTML? • JavaScript? • JSON? • Why are you attending?
  • 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. 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. 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. 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. 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. jQuery Function • jQuery registers a function in global scope jquery() • For convenience, this function is also mapped to a single character $ $()
  • 9. jQuery Function • This functions takes an argument of various types and returns jQuery objects jquery(‘selector’) $(DOM_element)
  • 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. 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. jQuery Selectors
  • 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. 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. 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. 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. @akshaymathu
  • 18. Reading DOM
  • 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. 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. Advance Selectors
  • 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. 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. 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. 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. Filters
  • 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. Form Filters • All text boxes: ‘:text’ • Checked checkboxes: ‘:checkbox:checked’ • Buttons with class btn: ‘.btn:button’ • Everything disabled: ‘:disabled’ • Currently focused: ‘:focus’
  • 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. 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. 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. 34@akshaymathu
  • 33. Manipulating DOM
  • 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. 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. Adding and Removing Nodes • Add inside $(el).append(html) $(el).prepend(html) • Add outside $(el).before(html) $(el).after(html) • Remove $(el).remove()
  • 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. 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. Dealing with User Actions
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Talking to Server
  • 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. 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. 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. 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. 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. 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. Animations and Effects
  • 59. What is Animation • Change in visual state (looks) • Slow and smooth
  • 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. 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. Animation Effects • There are special functions for fade effect o Changes the opacity of the object $(el).fadeOut(2000); $(el).fadeIn(3000);
  • 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. 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. Movie in HTML • Multiple animations in a sequence become a movie o Dialog add spice • Hosted Movie: • Code:
  • 66. Thanks @akshaymathu