Scribd
Upload
2 views

About JQuery

jQuery is a fast and concise JavaScript library created in 2006 to simplify tasks through less code, featuring DOM manipulation, event handling, AJAX support, and cross-browser compatibility. The library uses a specific syntax for selecting HTML elements and performing actions, with functions as the core unit of action. Additionally, jQuery supports dynamic web page creation through events and provides methods for effects, AJAX, CSS manipulation, and DOM manipulation.

Uploaded by

Chaluvadi Laxman
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
2 views

About JQuery

jQuery is a fast and concise JavaScript library created in 2006 to simplify tasks through less code, featuring DOM manipulation, event handling, AJAX support, and cross-browser compatibility. The library uses a specific syntax for selecting HTML elements and performing actions, with functions as the core unit of action. Additionally, jQuery supports dynamic web page creation through events and provides methods for effects, AJAX, CSS manipulation, and DOM manipulation.

Uploaded by

Chaluvadi Laxman
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 16

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

You might also like