Creating Web Applications
using jQuery
Akshay Mathur
Let’s Know Each Other
• Do you code?
• OS?
• Programing Language?
• HTML?
• JavaScript?
• JSON?
• Why are you attending?
Akshay Mathur
• Founding Team Member of
o ShopSocially (Enabling “social” for retailers)
o AirTight Neworks (Global leader...
Advance JavaScript
• As we try creating real world web applications,
things go complex
• However, there immerges a pattern...
JS Framework
• Library for simplifying JS coding
• Provides simple interface and syntactic sugar for
common JS work
o Sele...
jQuery
• Jquery is most popular
• Takes care of cross browser and cross version
issues
• Simplifys JS coding
o Selectors f...
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
 ...
jQuery Function
• jQuery registers a function in global scope
jquery()
• For convenience, this function is also mapped to
...
jQuery Function
• This functions takes an argument of various types
and returns jQuery objects
jquery(‘selector’)
$(DOM_el...
jQuery Object
• Always a list (Array)
o Methods of Array work normally on jQuery object
$(‘’).length // 0
o Members of the...
jQuery Object
• Always has all API functions
o No error on a function call
o Does nothing, if the list in jQuery object is...
jQuery Selectors
Why Selectors
• Selecting a DOM element is needed for working
on that element
o JavaScript has many functions like getElem...
Selectors
• Allows to select one or more DOM elements
o Various selection patterns are available to use
o Selector is pass...
Basic Selectors
• All: ‘*’
o Selects all nodes on the page
o Top level nodes e.g. html, head, body are also included
• Tag...
Basic Selectors
• ID: ‘#el_id’
o Selects the node having the particular ID attribute
o Does not work properly if there are...
@akshaymathu
Reading DOM
Reading innerHTML
$(el).html()
• Reads complete HTML inside a DOM node
o Returns HTML of complete DOM tree including all c...
Reading innerText
$(‘selector’).text()
• Reads Text inside the selected DOM node
o Returns text of complete DOM tree inclu...
Advance Selectors
Combining Selectors
‘a.my_class’
Selects only the anchor nodes having having class
my_class
What does following selects do...
Combining Selectors
• Putting comma between selectors selects all of
them
‘#el_id, .my_class’
o In this case node having i...
Attribute Selectors
• Attribute selectors allow to create a selection
based on any attribute of a HTML node
o Attribute Eq...
Going Narrow
• Descendent: ‘#el_id a’
o Selects all the anchors within the node having id=el_id
o These anchors may be at ...
Filters
Narrowing Down Selection
• All possible ways to reach an element are not
available as selectors
o There are filters to fur...
Form Filters
• All text boxes:
‘:text’
• Checked checkboxes:
‘:checkbox:checked’
• Buttons with class btn:
‘.btn:button’
•...
Narrowing Down Selection
• All visible items:
‘:visiblle’
• First/Last:
‘a:first’, ‘a:last’
• Even rows:
‘tr:even’
• Nth c...
Filter Functions
• Filter functions can be applied on existing jQuery
objects for narrowing down
$(el).eq(index)
o .eq() t...
Selection Outside
• Sometimes it is needed to select parents of a
DOM node
Immediate parents
$(el).parent()
All parents up...
34@akshaymathu
Manipulating DOM
Reading DOM
•Different functions are for reading different
items
Contents of a DOM node
$(el).text()
$(el).html()
Attribut...
Writing DOM
• Same functions are used for reading and writing
Contents of a DOM node
$(el).text(‘some text’)
$(el).html(‘s...
Adding and Removing Nodes
• Add inside
$(el).append(html)
$(el).prepend(html)
• Add outside
$(el).before(html)
$(el).after...
Changing Looks
• By changing in-line style
$(el).css(‘property-name’,
‘property_value’)
• By changing class
$(el).addClass...
Chaining
• Most jQuery functions return the jQuery object
o This allows to call multiple functions one after other as a
ch...
Dealing with User Actions
Triggering Event
• Browser raises the event on actions
• The events can also be programmatically
triggered
o By using .tri...
Handling Events
• On user’s action, browser raise corresponding
event
o Handler functions can be bind to the events
• All ...
Binding Event Handlers
• The element on which the event handler is being
bind has to be present in the DOM
$(el).on(‘click...
DOM Ready Event
• It is not safe to call a function that reads or writes
DOM before the DOM is completely rendered
• So it...
Event Bubbling
• The raised event bubbles up in the HTML DOM tree
till the root node
<body>
<ul>
<li>
<a href=“#”>Click
Me...
Event Delegation
• Because events bubble, they can be handled at any
parent node in the DOM tree
<ul>
<li>
<a href=“#”>Cli...
Delegated Event Handling
• This is useful if you want to attach a handler for an
element that is going to be attached in D...
Event Object
• For browser events, an Object having data about
the event is passed to the event handler
o The element that...
Testing Selection
$(el).is(selector)
• .is function is to test if output of one selector
matches other selector
$(‘body’)....
Event Bubbling
• The raised event bubbles up in the HTML DOM
tree till the root node
o This bubbling can be stopped within...
Preventing Default Behavior
• By default browser does some default action
when event occurs
o For example, when an anchor ...
Talking to Server
Asynchronous JavaScript & XML
• A way in web browser to communicate with
server without reloading the page
• XmlHttpReques...
AJAX Call
$.ajax({
url: ‘/my_ajax_target’,
type: ‘POST’,
DataType: ‘json’,
data: {id: 2},
context: this,
success: function...
AJAX Types
• This parameter tells what HTTP method to use
for the request
• GET and POST are supported by all browser
o $....
AJAX Data Types
• This parameter tells how to interpret the data
returned from the server
o ‘text’: Read as plain text
o ‘...
AJAX Callbacks
• When AJAX events occur, callbacks registered for
those evens are called
o Similar to all callbacks, the o...
AJAX Events
• There are may AJAX events for which handlers
can be registered
o success: Called when AJAX call ends in succ...
Animations and Effects
What is Animation
• Change in visual state (looks)
• Slow and smooth
Animation Effects
• jQuery’s standard show/hide functions also
animate
o If you pass time argument (in ms)
o Animates the ...
Animation Effects
• Similar can be done by changing only height
o Easing name can be passed instead of time
o Hide
$(el).s...
Animation Effects
• There are special functions for fade effect
o Changes the opacity of the object
$(el).fadeOut(2000);
$...
Animation Effects
• Any effect can be created using .animate()
o Just pass desired set of CSS parameters as an object
$(el...
Chaining Animations
• Animation take some time to complete
• Second animation has to start after the first
• Callback func...
Movie in HTML
• Multiple animations in a sequence become a
movie
o Dialog add spice
• Hosted Movie: http://bit.ly/1c6Knuo
...
Thanks
@akshaymathu
Getting Started with jQuery
Getting Started with jQuery
Getting Started with jQuery
Getting Started with jQuery
Getting Started with jQuery
Upcoming SlideShare
Loading in...5
×

Getting Started with jQuery

1,206

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,206
On Slideshare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "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 http://jquery.com/download/
  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 ($(ev.target).is(‘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 Ev.target 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 ($(ev.target).is(‘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! ‘ + response.name); }, 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! ‘ + response.name); }});
  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: http://bit.ly/1c6Knuo • Code: https://github.com/mathurakshay/movie
  66. 66. Thanks @akshaymathu
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×