Deepak Gulati
Lead Architect
Cricinfo.com
Agenda
 What is jQuery and why you need it
 Javascript: Advanced Basics
 DOM Traversal and Manipulation Using jQuery
 jQue...
quot;The DOM is a Messquot;
 DOM traversal without jQuery
    getElementById
    getElementsByName
    getElementsByTagNam...
getElementById
 IE and older versions of Opera returning
 elements with a name == id
getElementsByTagName
 “*” returns no elements on <object> elements
 in IE 7
 .length gets overwritten in IE if an element ...
getElementsByClassName
 Available in Firefox 3, Safari 3, Opera 9.6
 Opera doesn’t match a second-specified class
 (e.g. cl...
querySelectorAll
 Relatively very new: In Firefox 3.1, Safari
 3.1, Opera 10, IE 8
 Doesn’t exist in quirks mode, in IE 8
...
Enter jQuery
 Fast, lightweight, cross-browser Javascript
 library
    ~19 kb when minified+gzipped
    Excellent support ...
Browser Support Grid

           IE    Firefox   Safari   Opera   Chrome

Previous
           6.0     2.0       3.0      9...
Some advanced basics
 Anonymous functions
 Functions as objects
 “Length” of a Function
 JSON
Demo: Javascript – Advanced Basics
$ - one function to bind them all
 $ is an alias for jQuery function
 It accepts a selector string
 It returns a “wrapper”...
A selector can be
 #id, element
 .class
 And others (we’ll see more shortly)
 You can do things with values returned by
 s...
Demo: Hello World
Selector Syntax – Basic Filters
 :first, :last
 :not(selector)
 :even, :odd
 :eq(index), :gt(index), :lt(index)
 :header
 ...
Selector Syntax - Content Filters
 :contains
 :empty
 :has(selector)
 :parent
Selector Syntax – Attribute Filters
 [attribute]
 [attribute=value]
 [attribute!=value]
 [attribute^=value]
 [attribute$=v...
Selector Syntax - Heirarchy
 Ancestor Descendant
 Parent > Child
 Prev + Next
 Prev ~ Siblings
Selector Syntax - Child Filters
 :nth-child(index/even/odd/equation)
 :first-child
 :last-child
 :only-child
Selector Syntax – Forms
 :input
 :text, :password
 :radio, :checkbox
 :submit, :reset, :button
 :image
 :file
 :hidden
Selector Syntax: Form Filters
 :enabled
 :disabled
 :checked
 :selected
Demo:
1. More Selectors
2. Fun with Checkboxes
Event handling using jQuery
 jQuery “unifies” event handling models across
 browsers
 Allows you to cleanly separate the d...
Event handling using jQuery
 $(document).ready(fn) binds a function to be
 executed whenerver DOM is ready
    Can have mu...
Ajax and jQuery
 Several ways to Ajax depending on scenario
 .load(url, [data], [callback])
    loads html from a remote u...
Ajax and jQuery
 jQuery.get(url, [data], [callback], [type])
    allows you to specify key value pairs that are sent
    u...
Ajax and jQuery
 jQuery.getJSON(url, [data], [callback])
    Specialized for loading JSON data across domains
    Used wit...
Ajax and jQuery
 jQuery.ajax(options)
    Gives you more control over your ajax calls
    Can monitor and ajax call using ...
Demo: jQuery and AJAX
Effects Using jQuery and Plugins
 jQuery has built-in functions that allows you to
 hide/show/animate elements
    show() ...
Effects Using jQuery and Plugins
 jQuery is extensible using a plugin model
    Hundreds of plugins exist
    Writing one ...
Demo: Animations and Plugins
jQuery Utility Functions
 Browser detection
    jQuery.browser, jQuery.browser.version
 Iterator
    jQuery.each(object, c...
jQuery and Microsoft
 jQuery now part of official ASP.NET stack
 Can download a ‘development’ version that
 adds intellise...
Demo: jQuery and Visual Studio
Summary
 Cross browser Javascript programming tedious
 jQuery makes it easy to write compact, reliable
 cross-browser code...
Resources
 Online:
    Documentation: docs.jquery.com
    Blogs: learningjquery.com, ejohn.org
    deepakg.com/prog/
 Offl...
J Query   The Write Less Do More Javascript Library
Upcoming SlideShare
Loading in...5
×

J Query The Write Less Do More Javascript Library

2,926

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,926
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
140
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • [attribute] Returns: Array<Element(s)> Matches elements that have the specified attribute. Note the \"@\" before the attribute name was deprecated as of version 1.2. [attribute=value] Returns: Array<Element(s)> Matches elements that have the specified attribute with a certain value. [attribute!=value] Returns: Array<Element(s)> Matches elements that either don't have the specified attribute or do have the specified attribute but not with a certain value. [attribute^=value] Returns: Array<Element(s)> Matches elements that have the specified attribute and it starts with a certain value. [attribute$=value] Returns: Array<Element(s)> Matches elements that have the specified attribute and it ends with a certain value. [attribute*=value] Returns: Array<Element(s)> Matches elements that have the specified attribute and it contains a certain value. [attributeFilter1][attributeFilter2][attributeFilterN] Returns: Array<Element(s)> Matches elements that match all of the specified attribute filters.
  • J Query The Write Less Do More Javascript Library

    1. 1. Deepak Gulati Lead Architect Cricinfo.com
    2. 2. Agenda What is jQuery and why you need it Javascript: Advanced Basics DOM Traversal and Manipulation Using jQuery jQuery’s Event Handling Model Ajax and jQuery Special Effects Using jQuery and Plugins jQuery Utility Functions
    3. 3. quot;The DOM is a Messquot; DOM traversal without jQuery getElementById getElementsByName getElementsByTagName getElementsByClassName querySelectorAll Verbose Different/buggy across browsers
    4. 4. getElementById IE and older versions of Opera returning elements with a name == id
    5. 5. getElementsByTagName “*” returns no elements on <object> elements in IE 7 .length gets overwritten in IE if an element with an ID=quot;lengthquot; is found
    6. 6. getElementsByClassName Available in Firefox 3, Safari 3, Opera 9.6 Opera doesn’t match a second-specified class (e.g. class=quot;a bquot;, b isn’t found)
    7. 7. querySelectorAll Relatively very new: In Firefox 3.1, Safari 3.1, Opera 10, IE 8 Doesn’t exist in quirks mode, in IE 8 Safari 3.2 can’t match uppercase characters in quirks mode #id doesn’t match in XML documents
    8. 8. Enter jQuery Fast, lightweight, cross-browser Javascript library ~19 kb when minified+gzipped Excellent support for most browsers – including IE6, IE7, IE8, FF2, FF3, Safari, Chrome and Opera Open source and part of official Microsoft Ajax stack Started as a one-person effort in Jan 2006 John Resig. Now a team of contributors runs it.
    9. 9. Browser Support Grid IE Firefox Safari Opera Chrome Previous 6.0 2.0 3.0 9.5 Current 7.0 3.0 3.2 9.6 1.0 Next 8.0 3.1 4.0 10.0 2.0
    10. 10. Some advanced basics Anonymous functions Functions as objects “Length” of a Function JSON
    11. 11. Demo: Javascript – Advanced Basics
    12. 12. $ - one function to bind them all $ is an alias for jQuery function It accepts a selector string It returns a “wrapper” A special Javascript object Contains an array of elements that match selector Has a number of useful methods that act on a group of elements
    13. 13. A selector can be #id, element .class And others (we’ll see more shortly) You can do things with values returned by selectors Hide/Show Change html Change attributes Animate
    14. 14. Demo: Hello World
    15. 15. Selector Syntax – Basic Filters :first, :last :not(selector) :even, :odd :eq(index), :gt(index), :lt(index) :header :animated
    16. 16. Selector Syntax - Content Filters :contains :empty :has(selector) :parent
    17. 17. Selector Syntax – Attribute Filters [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attributeFilter1][attributeFilter2][attributeFilter N]
    18. 18. Selector Syntax - Heirarchy Ancestor Descendant Parent > Child Prev + Next Prev ~ Siblings
    19. 19. Selector Syntax - Child Filters :nth-child(index/even/odd/equation) :first-child :last-child :only-child
    20. 20. Selector Syntax – Forms :input :text, :password :radio, :checkbox :submit, :reset, :button :image :file :hidden
    21. 21. Selector Syntax: Form Filters :enabled :disabled :checked :selected
    22. 22. Demo: 1. More Selectors 2. Fun with Checkboxes
    23. 23. Event handling using jQuery jQuery “unifies” event handling models across browsers Allows you to cleanly separate the design of a page from its behavior
    24. 24. Event handling using jQuery $(document).ready(fn) binds a function to be executed whenerver DOM is ready Can have multiple $(document).ready Executed in the order they were added bind(type, [data], fn) associates events with elements. unbind(type, fn) does the opposite one(type, [data], fn) same as bind but executes the handler only once Shortcuts exist for common events like click
    25. 25. Ajax and jQuery Several ways to Ajax depending on scenario .load(url, [data], [callback]) loads html from a remote url and injects it into dom Very easy to use
    26. 26. Ajax and jQuery jQuery.get(url, [data], [callback], [type]) allows you to specify key value pairs that are sent using GET type sends that correct data type to your callback and can be one of xml, html, script, json, jsonp or text jQuery.post(url, [data], [callback], [type]) uses POST to send data to the url
    27. 27. Ajax and jQuery jQuery.getJSON(url, [data], [callback]) Specialized for loading JSON data across domains Used with jsonp callback jQuery.getScript(url, [callback]) Loads and executes scripts Useful for “delay-loading” scripts
    28. 28. Ajax and jQuery jQuery.ajax(options) Gives you more control over your ajax calls Can monitor and ajax call using events ajaxStart ajaxSend, ajaxSuccess, ajaxError, ajaxComplete ajaxStop Can use jQuery.ajaxSetup(options) to specify options for jQuery.ajax once
    29. 29. Demo: jQuery and AJAX
    30. 30. Effects Using jQuery and Plugins jQuery has built-in functions that allows you to hide/show/animate elements show() .hide() slideDown(speed, [callback]) slideUp(speed, [callback]) fadeIn(speed, [callback]), fadeOut(speed, [callback] ), fadeTo(speed, [callback]) animate allows you a fine-grained control over animations
    31. 31. Effects Using jQuery and Plugins jQuery is extensible using a plugin model Hundreds of plugins exist Writing one yourself is easy too! Plugins can Enhance UIs (auto-complete, calendars, sort tables etc.) Provide custom animations (advanced sliding, fading) Provide utility functions (cookie handling, JSON handling)
    32. 32. Demo: Animations and Plugins
    33. 33. jQuery Utility Functions Browser detection jQuery.browser, jQuery.browser.version Iterator jQuery.each(object, callback) String handling jQuery.trim(str) Array handling jQuery.grep(array, callback, [invert]) jQuery.map(array, callback)
    34. 34. jQuery and Microsoft jQuery now part of official ASP.NET stack Can download a ‘development’ version that adds intellisense to VS Ships with ASP.NET MVC Will possibly ship with future versions of Visual Studio
    35. 35. Demo: jQuery and Visual Studio
    36. 36. Summary Cross browser Javascript programming tedious jQuery makes it easy to write compact, reliable cross-browser code Robust support for AJAX 100s of 3rd party plugins Vibrant community
    37. 37. Resources Online: Documentation: docs.jquery.com Blogs: learningjquery.com, ejohn.org deepakg.com/prog/ Offline Manning Press: jQuery In Action Manning Press: Secrets of Javascript Ninjas Packt Publishing: Learning jQuery Packt Publishing: jQuery Reference Guide
    1. A particular slide catching your eye?

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

    ×