Copyright © 2013 Tech Mahindra. All rights reserved.
1
jQuery
Copyright © 2013 Tech Mahindra. All rights reserved. 2
What is jQuery?
•jQuery is a fast and concise JavaScript Library created by John Resig in 2006
with a nice motto − Write less, do more
•jQuery is a JavaScript toolkit designed to simplify various tasks by writing less
code. Here is the list of important core features supported by jQuery
DOM Manipulation.
Event Handling.
AJAX Support.
Animations.
Lightweight.
Cross Browser support.
Latest Technology.
Copyright © 2013 Tech Mahindra. All rights reserved. 3
jQuery Syntax
The jQuery syntax is tailor-made for selecting HTML elements and performing
some action on the elements.
Basic syntax is:$(selector).action().
A $ sign to define/access jQuery.
A (selector ) to “query (or find )” HTML elements.
A jQuery action() to be performed on the elements.
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
Copyright © 2013 Tech Mahindra. All rights reserved. 4
Basics
jQuery is a framework built using JavaScript capabilities. So while developing your
applications using jQuery, you can use all the functions and other capabilities
available in JavaScript.
Concepts:
Functions.
Arguments.
Context.
Scope.
Callback.
Closures
Copyright © 2013 Tech Mahindra. All rights reserved. 5
Datatypes
It has dynamic types inherited from javascript.It is a important concept to be
able to operate on variables.
Strings.
Numbers.
Booleans.
Arrays.
Objects.
typeOf.
Undefined.
Empty values.
Null.
Copyright © 2013 Tech Mahindra. All rights reserved. 6
Selectors
A jQuery Selector is a function which makes use of expressions to find out
matching elements from a DOM based on the given criteria.
The $() factory function
The factory function $() makes use of following three building blocks while
selecting elements in a given document .
Tag Name--- $(‘p’).
Tag Id---$(‘#id’).
Tage Class--$(“.Class”).
NOTE − The factory function $() is a synonym of jQuery() function. So in case
you are using any other JavaScript library where $ sign is conflicting with
some thing else then you can replace $ sign by jQuery name and you can use
function jQuery() instead of $().
Copyright © 2013 Tech Mahindra. All rights reserved. 7
Functions
Functions are the basic unit of action in jQuery. The main entry point of most
jQuery applications is a block of code that looks like this:
Example
$(document).ready(function(){
Do something…
})
$(document) is a jQuery object. The$() is actually a function in disguise; it
turns the document into a jQuery object.
.ready() is a type of function; you can think of it as sort of a helper that runs
the code inside its parentheses as soon as the HTML document is ready.
function(){} is the action that.ready() will perform as soon as the HTML
document is loaded. (In the above example, the Do somethingplaceholder is
where those actions would go.)
Copyright © 2013 Tech Mahindra. All rights reserved. 8
Events
We have the ability to create dynamic web pages by using events. Events are
actions that can be detected by your Web Application.
Following are the examples events :
Mouse Click Event
Mouse Double Click Event.
Mouse Enter Event.
Mouse Leave Event
The full syntax of the bind() command is as follows
−selector.bind( eventType[, eventData], handler) Following is the description
of the parameters
eventType − A string containing a JavaScript event type, such as click or
submit.
eventData − This is optional parameter is a map of data that will be passed to
the event handler.
handler − A function to execute each time the event is triggered.
Removing event handlers
selector.unbind(eventType, handler)
Copyright © 2013 Tech Mahindra. All rights reserved. 9
Traversing
jQuery traversing, which means "move through", are used to "find" (or select)
HTML elements based on their relation to other elements. Start with one
selection and move through that selection until you reach the elements you
desire.
Copyright © 2013 Tech Mahindra. All rights reserved. 10
Traversing
Ancestors contains methods to traversing
Parent()
Parents()
ParentUntil()
Descendants contains methods to traversing
children()
find()
Siblings contains methods to traversing
Siblings()
next()
nextAll()
nextUntil()
Prev()
PrevAll()
PrevUntil()
Filtering contains methods to traversing
first()
last()
Filter()
Copyright © 2013 Tech Mahindra. All rights reserved. 11
Effects
jQuery provides a trivially simple interface for doing various kind of amazing
effects. jQuery methods allow us to quickly apply commonly used effects with
a minimum configuration.
Hide/Show
Fade
slide
animate
stop
callback
chaining
Copyright © 2013 Tech Mahindra. All rights reserved. 12
Ajax
AJAX is an acronym standing for Asynchronous JavaScript and XML and this
technology help us to load data from the server without a browser page
refresh.
The load() method loads data from a server and puts the returned data into
the selected element.
HTTP Request: GET vs. POST
Two commonly used methods for a request-response between a client and
server are: GET and POST.
GET - Requests data from a specified resource
POST - Submits data to be processed to a specified resource
GET is basically used for just getting (retrieving) some data from the
server. Note: The GET method may return cached data.
POST can also be used to get some data from the server. However, the
POST method NEVER caches data, and is often used to send data along with
the request.
Copyright © 2013 Tech Mahindra. All rights reserved. 13
css
The jQuery library supports nearly all of the selectors included in Cascading
Style Sheet (CSS) specifications 1 through 3, as outlined on the World Wide
Web Consortium's site.
Using JQuery library developers can enhance their websites without worrying
about browsers and their versions as long as the browsers have JavaScript
enabled.
Most of the JQuery CSS Methods do not modify the content of the jQuery
object and they are used to apply CSS properties on DOM elements.
$(“#selector”). css( PropertyName, PropertyValue ).
Copyright © 2013 Tech Mahindra. All rights reserved. 14
DOM Manipulation
JQuery provides methods to manipulate DOM in efficient way. You do not
need to write big code to modify the value of any element's attribute or to
extract HTML code from a paragraph or division
It provides methods as
Attr()
Html()
Val()
Removing DOM Elements
empty()
remove()
Inserting DOM Elements
after()
before()
Copyright © 2013 Tech Mahindra. All rights reserved. 15
Thank You
Copyright © 2013 Tech Mahindra. All rights reserved. 16
