What is jQuery?
JQuery
is great library for developing ajax based application and it is great library for the
JavaScript programmers, which simplifies the development of web applications.
You can use jQuery to develop cool web applications. jQuery helps the programmers to
keep code simple and concise. The jQuery library is designed to keep the things
very simple and reusable.
In
order to work with jQuery you should be aware of basics of JavaScript, HTML and
CSS.
JQuery
is a great tool which provides a rich set of AJAX methods to develope next
generation web application.
It helps to
• Improve the performance of the application.
• Develop most browser compatible web page
• Implement UI related critical functionality without
writing hundreds of lines of
Code.
• No need to learn fresh new syntaxes to use jQuery, knowing
simple JavaScript syntax is enough.
• Simple and Cleaner code, no need to write several lines of
codes to achieve complex functionality.
Here are the features of
jQuery :
- DOM element selections
functions
- DOM traversal and
modification
- Events
- CSS manipulation
- Effects and animations
- Ajax
- Extensibility
- Utilities - such as
browser version and the each function.
- JavaScript Plugins.
jQuery Syntax:
With jQuery
you select (query) HTML elements and perform "actions" on them.
Basic syntax is: $(selector).action()
- A dollar sign to define jQuery
- A (selector) to "query (or
find)" HTML elements
- A jQuery action() to be performed on the
element(s)
Examples:
$(this).hide() - hides
current element
$("p").hide() -
hides all paragraphs
$("p.test").hide()
- hides all paragraphs with class="test"
$("#test").hide()
- hides the element with id="test"
jQuery Selectors :
It is a key point to learn how jQuery selects exactly the elements you
want to apply an effect to.
jQuery selectors allow you to select HTML elements (or groups of
elements) by element name, attribute name or by content.
jQuery Element Selectors:
jQuery uses CSS selectors
to select HTML elements.
$("p") selects
all <p> elements.
$("p.intro")
selects all <p> elements with class="intro".
$("p#demo")
selects all <p> elements with id="demo".
jQuery Attribute Selectors:
jQuery uses XPath expressions
to select elements with given attributes.
$("[href]")
select all elements with an href attribute.
$("[href='#']")
select all elements with an href value equal to "#".
$("[href!='#']")
select all elements with an href attribute NOT equal to "#".
$("[href$='.jpg']")
select all elements with an href attribute that ends with ".jpg".
jQuery CSS Selectors:
jQuery CSS selectors can be
used to change CSS properties for HTML elements.
The following example
changes the background-color of all p elements to yellow:
Example :
$("p").css("background-color","yellow");
jQuery - Events
Handling:
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:
- A mouse click
- A web page loading
- Taking mouse over an element
- Submitting an HTML form
- A keystroke on your keyboard
When these events are triggered you can then use a custom function to do
pretty much whatever you want with the event. These custom functions call Event
Handlers.
Binding event
handlers:
Using the jQuery Event Model, we can
establish event handlers on DOM elements with the bind()method as follows:
$('div').bind('click',
function( event ){
alert('Hi there!');
});
The full syntax of the bind() command is as follows:
selector.bind( eventType[, eventData], handler)
The description of the parameters is :
·
eventType: A
string containing a JavaScript event type, such as click or submit. Refer to
the next section for a complete list of event types.
·
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:
Typically, once an event
handler is established, it remains in effect for the remainder of the life of
the page. There may be a need when you would like to remove event handler.
jQuery provides the unbind() command to remove an exiting event handler.
The syntax of unbind() is as follows:
selector.unbind(eventType, handler) ( or)
selector.unbind(eventType)
the description of the parameters:
·
eventType: A
string containing a JavaScript event type, such as click or submit. Refer to
the next section for a complete list of event types.
·
handler: If
provided, identifies the specific listener that.s to be removed.
Event Types:
The following are cross platform and
recommended event types which you can bind using JQuery:
Here
is a complete list of all the support methods provided by jQuery:
|
Method
|
Description
|
|
blur( )
|
Triggers the blur event of each matched element.
|
|
blur( fn )
|
Bind a function to the blur event of each matched element.
|
|
change( )
|
Triggers the change event of each matched element.
|
|
change( fn )
|
Binds a function to the change event of each matched element.
|
|
click( )
|
Triggers the click event of each matched element.
|
|
click( fn )
|
Binds a function to the click event of each matched element.
|
|
dblclick( )
|
Triggers the dblclick event of each matched element.
|
|
dblclick( fn )
|
Binds a function to the dblclick event of each matched element.
|
|
error( )
|
Triggers the error event of each matched element.
|
|
error( fn )
|
Binds a function to the error event of each matched element.
|
|
focus( )
|
Triggers the focus event of each matched element.
|
|
focus( fn )
|
Binds a function to the focus event of each matched element.
|
|
keydown( )
|
Triggers the keydown event of each matched element.
|
|
keydown( fn )
|
Bind a function to the keydown event of each matched element.
|
|
keypress( )
|
Triggers the keypress event of each matched element.
|
|
keypress( fn )
|
Binds a function to the keypress event of each matched element.
|
|
keyup( )
|
Triggers the keyup event of each matched element.
|
|
keyup( fn )
|
Bind a function to the keyup event of each matched element.
|
|
load( fn )
|
Binds a function to the load event of each matched element.
|
|
mousedown( fn )
|
Binds a function to the mousedown event of each matched element.
|
|
mouseenter( fn )
|
Bind a function to the mouseenter event of each matched element.
|
|
mouseleave( fn )
|
Bind a function to the mouseleave event of each matched element.
|
|
mousemove( fn )
|
Bind a function to the mousemove event of each matched element.
|
|
mouseout( fn )
|
Bind a function to the mouseout event of each matched element.
|
|
mouseover( fn )
|
Bind a function to the mouseover event of each matched element.
|
|
mouseup( fn )
|
Bind a function to the mouseup event of each matched element.
|
|
resize( fn )
|
Bind a function to the resize event of each matched element.
|
|
scroll( fn )
|
Bind a function to the scroll event of each matched element.
|
|
select( )
|
Trigger the select event of each matched element.
|
|
select( fn )
|
Bind a function to the select event of each matched element.
|
|
submit( )
|
Trigger the submit event of each matched element.
|
|
submit( fn )
|
Bind a function to the submit event of each matched element.
|
|
unload( fn )
|
Binds a function to the unload event of each matched element.
|
Loading simple data:
This is very easy to load any static or
dynamic data using JQuery AJAX. JQuery provides load()method to do the job:
Syntax:
Here
is the simple syntax for load() method:
[selector].load( URL, [data], [callback] );
the description of all the
parameters:
·
URL: The URL
of the server-side resource to which the request is sent. It could be a CGI,
ASP, JSP, or PHP script which generates data dynamically or out of a database.
·
data: This
optional parameter represents an object whose properties are serialized into
properly encoded parameters to be passed to the request. If specified, the
request is made using the POST method.
If omitted, the GET method
is used.
·
callback: A
callback function invoked after the response data has been loaded into the
elements of the matched set. The first parameter passed to this function is the
response text recieved from the server and second parameter is the status code.
Getting JSON data:
There would be a situation when server would
return JSON string against your request. JQuery utility function getJSON() parses the returned JSON string and makes the resulting string
available to the callback function as first parameter to take further action.
Syntax:
Here
is the simple syntax for getJSON() method:
[selector].getJSON( URL, [data], [callback] );
the description of all the parameters:
·
URL: The URL
of the server-side resource contacted via the GET method.
·
data: An
object whose properties serve as the name/value pairs used to construct a query
string to be appended to the URL, or a preformatted and encoded query string.
·
callback: A
function invoked when the request completes. The data value resulting from
digesting the response body as a JSON string is passed as the first parameter
to this callback, and the status as the second.
What is JSON:
JSON (JavaScript Object Notation) is a
lightweight data-interchange format. It is easy for humans to read and write.
It is easy for machines to parse and generate. It is based on a subset of the JavaScript
Programming Language.
JSON is a text format that is
completely language independent but uses conventions that are familiar to
programmers of the C-family of languages, including C, C++, C#, Java,
JavaScript, Perl, Python, and many others. These properties make JSON an ideal
data-interchange language.
JSON is limited
to text and numeric values. Binary values are not supported.
JSON is a
subset of the JavaScript Specification (ECME-Script) and is therefore directly
in JavaScript.
An
example JSON might look like the following.
{
firstName:'Lars',
lastName:'Vogel',
address:
{
street:'Examplestr.',
number: '31'
}
}
