Social Executive and a programmer by passion
Microsoft’s Asp.Net community contributor
Member – Career Advice Expert Panel, C#Corner
Blogger at : C#Corner , codePattern.net/blog
Who am I ?
Introduction, using or installing, understanding Ready
function, DOM, Selectors, Basic Events
Events and CSS manipulation (animation)
Asynchronous mechanism and practices
How to write Plugins , Discussing open source useful plugins
Events and propagation handling
Introduction to jQuery
Start Coding with jQuery [Demo] with jsFiddle
An application for fetching data from server, presenting it with
Capable o listen users activities and response
First browser created in 1990, and in 1993 innovated more as
Mosaic(later known as Netscape). In 1995, Microsoft came with IE
Famous browsers Chrome, IE, Firefox, Safari, Opera
Support HTML, XHTML and provide facility of Cache, Cookies
Each Browser bundled with their vendor specific scripting language
with extra functionality (in competition of each other)to attract users
All Browsers are not same in terms of Features and
ex.- ActiveX object works in IE but not in others!!!
We don’t know which Browser user will use and so which
Cross Browser Compatibility issue arises in use of Scripting
handling this issue.
Different Browser, Different Scripting
It is the base script that get executed by Browser
Created by Netscape as “LiveScript” for their browser
version 2.0. Later they renamed it with "Java Script".
Dynamic Type support
Host computer resources can’t be access (except
Follow same origin policy
(jQuery uses JSONP to avoid same
File upload value is not handled
Well written & Tested functions by experts
Many libraries have documents on how to use
….. And many more….
I have taken this image
you can find more there
DOM – Document Object Model (Hierarchical structure of our web-page)
A Web Page is basically a tree structure in terms of nodes & attributes
Node? Each HTML element is treated as a node and these nodes can have many
On the fly, we can
add, delete DOM elements
change the properties of DOM elements
Browsers are programmed to recognize the user actions like page
loading, clicking, mouse movement etc.
We write programs to respond these events
Multiple event listeners can be assigned on an
Execution order of these listeners can’t be relied
When triggered, the event propagates
From top to down (capure phase)
From bottom to up (bubble phase)
Browser vendors handle event propagation in
different way ex.- IE doesn’t supports capture phase
Browsers as Event Listeners
Solve your all problems
Your coding Chores
What jQuery Will Not Do
Documentation, Resource availability and community support
Evolution : Continuous upgrade and bug removal by dedicated
Developed by John Resig in 2005 and released in 2006
Cross Browser compatibility
Simplifies AJAX development
Now supported by Microsoft also
A lot of third party Plugins available
Separation of style from Behavior (CSS)
Why jQuery ?
Event handling of HTML element
Usage of Common Utilities written in jQuery
Easy AJAX calls with flexible options (raw Ajax with many customized APIs)
Applying effects and animations
DOM/Html elements manipulations
DOM traversal and modifications
DOM filtering APIs
Use of Chaining and Call-back functionality
Access to third parties well written/developed plug-ins for more beautification.
Multi browser support
Power of jQuery
Re-usable jQuery code?
Create own package of it.
It is now a Plugin because it will run on plug into jQuery
There are many thousands famous free plugins from
experts over the internet.
What is jQuery Plugin?
Why so popular
MooTools (Created by Valerio Proietti and released in September 2006. It has gained much
popularity due to its plugins. Bing and Joomla are using this library framework. Its Plugins are
widely being used on Wordpress blogging platform. It is little bit harder to use as compare to
Prototype (Created by Sam Stephenson in February 2005 for Ajax support in "Ruby on Rails" . It
supports XMLHttpRequest protocol that reduce entire webpage reload at browser for dynamic
web pages. Ex. used in Ruby on Rails)
Dojo Toolkit (Created by Alex Russell, Dylan Schiemann, David Schontzler, and others in 2004. This
library is providing much more than other libraries in terms of Classes, Constructors, and inheritance
components: Dojo core, Dijit and DojoX. It is little bit harder to use as compare to jQuery)
Ext (Created by Jack Slocum in 2008 as an add-on library extension of YUI. Now don't have any
dependency on other library. This is known for its compatibility with jQuery and Prototype though
its syntax is differing. It has predefined UI objects and easily can be called into web pages. This gives
rich controls handling like radio buttons, toolbars etc.)
Framework" and has very rich set of effects functionality. Used on Ruby on Rails platform.)
Few Other Popular Libraries
jQuery library file is shipped with Visual Studio.
Intelligence is available
Microsoft actively contribute to jQuery Templates
How Microsoft support?
Just reference to its library file and start using.
Reference can be given to –
Local / self hosted or stored file
CDN (Content Delivery Network)
How to use it? (setup)
jQuery(selector, [ context ])
By default context if not provided => DOM
var c = $(); alert( $.isEmptyObject(c) );
Output : False
jQuery functions always return an array like object(even for ID based selectors)
=> jQuery object.
$("#myElementId"); OR $("#myElementId").get(0);
If not found matched selectors = > an empty jQuery-object I
var emptyJqueryObject = $();
Some destructive methods like find() and filter() that change the object others
returns itself as object
Use of returning jQuery Object => method calls can be chained and minimize
$('div').css ('color','red').find ('.myCSSname').css ('color','yellow');
jQuery =window.jQuery = window.$ = $
There are two variant of jQuery usage-
(1) jQuery.fn namespace and (2) jQuery namespace
1) jQuery(context).functioncall (works on jQuery object)
2) jQuery.functioncall (works globally and not on jQuery object, generally all utility functions
are accessed in this way)
jQuery Notation & Namespaces
It does not fires until the DOM is ready
waits for all content to be fully loaded including
This Document ready events further can be kept on
hold by using jQuery hold !!!
jQuery Ready function
Different style of writing DOM ready
Document / Window Events
Load , Resize
Submit, Reset, focus, blur change
Keydown, keypress etc.
Click, dbClick, mouseup, mousedown etc.
There are many other properties and we can get their
values as well
Its better than old fashion: return false;
No form submit, no hyperlink etc
Do you thing it actually triggers the event? No, It just call
the appropriate function as called on actual event.
Selectors play important roles to find or select DOM
Elements can be selected based on their tagname, ID,
classes, attributes, attribute’s value, types etc.
jQuery is very rich in terms of selectors
$('div') , $('p') etc
Demo : How to using jQuery in asp.net application
Demo 1 : Using element tag as selector
Demo 2 : Using element id as selector
Demo3 : Using class name as selector
Demo4 : Using attribute as selector
Demo 5 : Using type with group-name and attribute as
Demo 6 : Validating a from on submit
Demo 7 : Checking for Numeric value for an input field
Let’s talk Less, Code more…
Using element type, name and attribute as a selector
.trim() should be also used!!!
Validating a form on Submit
How we do magic –
Identifying the element (using selector)
Assign an event (binding event)
Create a function that will run when event will occur
written and tested common functions. We can also add our
methods/functions to it.
Like other libraries, jQuery is not standardized by ECMAScript.