Jquery

- A JavaScript Library

By : Anita M. Rooge
 What is Jquery ?
 JQuery is a lightweight, "write less, do
more", JavaScript library.

 An open source JavaScript library that

simplifies the interaction between HTML
and JavaScript.

 Jquery is easy to learn and master.

 Installing JQuery
Steps for adding Jquery to your web pages :

 Go to http://docs.jquery.com/Main_Page

OR

 Go to https://
ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
 Use following code snippet
 jQuery Syntax

$(selector).action()

 A $ sign to define/access jQuery

 A (selector) HTML elements
 A jQuery action() to be performed on the
element(s)
 Examples:
 $("p").hide() - hides all <p> elements.
 $("#test").hide() - hides the element with id="test".
 $(".test").hide() - hides all elements with
class="test".
 The Document Ready Event

$(document).ready(function(){

// jQuery methods go here...

});

This is to prevent any jQuery code from running

before the document is finished loading (is
ready).
 Jquery Selectors
 jQuery selectors allow you to select and manipulate
HTML element(s).

 All type of selectors in jQuery, start with the dollar

sign and parentheses: $().

 Types of jquery selectors :

 Element selector
 Id (#) selector
 Class (.) selector
 Element Selector
 The jQuery element selector selects elements
based on their tag names.
 Example :

$(document).ready(function(){
$(“#button").click(function(){
$("p").hide();
});
});
HTML Tag <P> is specified as element here
Written as <p> text goes here</p>
 Id (#) Selector
 The jQuery #id selector uses the id attribute of
an HTML tag to find the specific element.
 Example :

$(document).ready(function(){
$(“#bt1").click(function(){
$("#test").hide();
});
});
#button and #test used as id here. The html tags
used as
<input type =“button” id = “bt1” value =“Click”>
<p id = “test”>Para txt goes here </p>
 Class (.) Selector
 The jQuery class selector finds elements with a
specific class.
 Example :

$(document).ready(function(){
$(“#button").click(function(){
$(".test").hide();
});
});
.test used as class here. The html tags used as
<p class = “test”>Para txt goes here </p>
 More Jquery Selectors
Syntax Description
$("*") Selects all elements

$(this) Selects the current HTML element

$("p.intro") Selects all <p> elements with class="intro"

$("p:first") Selects the first <p> element

$("ul li:first") Selects the first <li> element of the first <ul>

$("ul li:first-child") Selects the first <li> element of every <ul>

$("[href]") Selects all elements with an href attribute

Jquery Hide and Show Methods
 With jQuery you can Hide or Show an element visibility.
 jQuery has the following methods:

 hide() : used to hide element

 show() : used show element
 toggle() : toggle between hide and fade show


 Syntax :
$(selector).hide(speed, callback);
$(selector).show(speed, callback);
$(selector).toggle(speed, callback);

Example : hodeshow.html
 Jquery Fading
Methods
 With jQuery you can fade an element in and out of visibility.
 jQuery has the following fade methods:

 fadeIn() : used to fade in a hidden element

 fadeOut() : used to fade out a visible element
 fadeToggle() : toggle between fade in and fade out
 fadeTo() : used to fade element to opacity value (0 and 1)

 Syntax :
$(selector).fadeIn(speed, callback);
$(selector).fadeOut(speed, callback);
$(selector).fadeToggle(speed, callback);
$(selector).fadeTo(speed, callback);

Example : fadeinout1.html
 Jquery Effects : Sliding
 With jQuery you can create a sliding effect on elements.
 jQuery has the following slide methods :

slideDown() : used to slide down an element

slideUp() : used to slide up an element
slideToggle() : toggles between the slideDown() and slideUp()

 Syntax :

$(selector).slideDown(speed, callback);
$(selector). slideUp(speed, callback);
$(selector).slideToggle(speed, callback);

 Example : slide.html
 Jquery Effects :
Animation
The jQuery animate() method lets you create custom
animations.
 Syntax :
$(selector).animate( { params }, speed, callback);
 Here is the description of all the parameters used by this
method
 params − A map of CSS properties that the animation will
move toward.
 speed − This is optional parameter representing how long
the animation will run.
 callback − This is optional parameter representing a
function to call once the animation is complete

 Example : animate.html
 Jquery Effects :Stop
 The jQuery stop() method is used to stop an
animation or effect before it is finished.
 The stop() method works for all jQuery effect
functions, including sliding, fading and custom
animations.
 Syntax :
$(selector).stop(stopAll , goToEnd );
 The optional stopAll Boolean parameter specifies
whether to remove queued animation or not. Default
value is false, that means only the current animation
will be stopped, rest of the animations in the queue will
run afterwards.
 The optional goToEnd Boolean parameter specifies
whether to complete the current animation
immediately. Default value is false.
 Jquery : Callback
 A callback function is executed after the current effect is 100%
finished.
 JavaScript statements are executed line by line. However, with
effects, the next line of code can be run even though the effect is
not finished. This can create errors.
 To prevent this, you can create a callback function.
 Syntax :

$(selector).hide(speed, callback);

 Example : callback1.html
 Jquery : chaining
 The jQuery provides another robust feature called method
chaining that allows us to perform multiple action on the same set
of elements, all within a single line of code.
 This is possible because most of the jQuery methods return a
jQuery object that can be further used to call another method.

 Syntax :

$(selector).hide(speed, callback);

 Example : chain.html
 Jquery : Get & Set Content &
Attributes
 jQuery contains powerful methods for changing and manipulating
HTML elements and attributes.
 Three simple, but useful, jQuery methods for DOM manipulation is:
 text() - Sets or returns the text content of selected elements
 html() - Sets or returns the content of selected elements (including
HTML markup)
 val() - Sets or returns the value of form fields

 Syntax :

$(selector).text( ) ; Get the content of selector

$(selector).html( ) ; Get the content with html markup of selector
$(selector).val( ) ; Get value of form elements
$(selector).attr( attribute name) ; Get value elements attribute

Example : contentattributes.html
jQuery text() Method : get text
The jQuery text() method is either used to get the
combined text contents of the selected elements,
including their descendants

jQuery text() Method : set text

The jQuery text() method is also used to set the
combined text contents of the selected elements,
including their descendants.
settext.html
Usesettext.html
 jQuery html() Method

The jQuery html() method is used to get or set the

HTML contents of the elements.

If multiple elements are selected, the html() method

only returns the HTML contents of the first element
from the set of matched elements.

Get content eg. : gethtml.html

Set content eg : sethtml.html

jQuery attr() Method
 You can use the jQuery attr() method to
either get the value of an element's
attribute or set one or more attributes for
the selected element.

 Getattr.html
 Setattr.html
jQuery val() Method
 You can use the jQuery val() method to
either get the value of an form elements or
set value for selected form element.

 getsetval.html
Jquery : Add remove
Elements/Content
 With jQuery, it is easy to add new elements/content.
 append() : The jQuery append() method is used to

insert specified content as the last child (at the end

of) the selected elements in the jQuery collection.

 remove() :The jQuery remove() method is used to

remove the selected elements out of the DOM.

Example :appdel.html
jquery - Get and Set CSS Classes
 Query provides several methods as follows to
manipulate the CSS classes assigned to HTML
elements.
 addClass() - Adds one or more classes to the
selected elements
 removeClass() - Removes one or more classes
from the selected elements
 toggleClass() - Toggles between adding/removing
classes

 Example : addclass.html
 jQuery CSS() Method
 The jQuery CSS() method is used to get (return)or
set style properties or values for selected
elements. It facilitates you to get one or more
style properties.
 Syntax:

1. get CSS property Value : css("propertyname");

2. Set CSS Property :
css("propertyname","value");

 Eg:

alert("Background color = " + $("p").css("background-color"));
 $("p").css("background-color", "violet");
jQuery noConflict() Method
 The $ (dollar) sign in jQuery is used as an alias or
shortcut. Many JavaScript libraries also use the $ sign as
the shortcut, along with the jQuery on the same page. But
if two different frameworks use the same alias, a conflict
could occur, and one of the frameworks might stop its
working.
 The noConflict() method implemented in jQuery to deal
with such situations. It is used to avoid the conflict of
using $ variable with other libraries. This method releases
the hold on the $ (dollar) identifier so that other libraries
can use it.
When the document is loaded, jQuery goes into noConflict
mode. Here, we are creating a new alias using the
jQuery noConflict(). We are declaring a variable named
as j and assigning the noConflict() method to it. Now, this
variable will work as an alias for the jQuery code. This new
alias will be used instead of using $. So, it avoids conflict
jQuery noConflict Method
var j = $.noConflict();
j(document).ready(function(){
j("#b1").click(function(){
alert("jQuery is working fine");
});
});
AJAX
• It stands for “Asynchronous JavaScript and XML”
• It was first mentioned by Jesse James Garrett in 2005. [1]
• It is not a new technology. It is several technologies. [1]
 standards-based presentation: XHTML and CSS
 dynamic display and interaction: DOM
 data interchange and manipulation: XML and XSLT
 asynchronous data retrieval: XMLHttpRequest
 binding everything together: JavaScript
• Intuition: Static web site vs. AJAX site

• AJAX engine: XMLHttpRequest object

 It allows for asynchronous communication
 Instead of freezing up until the completeness, the browser can
communicate with server and continue as normal.
AJAX
• Intuition: Static web site vs. AJAX site
• AJAX engine: XMLHttpRequest object
 It allows for asynchronous communication
 Instead of freezing up until the completeness,
the browser can communicate with server and
continue as normal.
Jquery AJAX
 The jQuery library includes various methods to send Ajax
requests. These methods internally use XMLHttpRequest
object of JavaScript.
jQuery
Ajax Description
Methods
ajax() Sends asynchronous http request to the
server.
get() Sends http GET request to load the data
from the server.
Post() Sends http POST request to submit or
load the data to the server.
Jquery AJAX : ajax() method
 The jQuery ajax() method provides core functionality of
Ajax in jQuery. It sends asynchronous HTTP requests to
the server.
 Syntax :
$.ajax(url);

$.ajax(url,[options]);

 url: A string URL to which you want to submit or

retrieve the data
 options: Configuration options for Ajax request. An
options parameter can be specified using JSON format.
This parameter is optional.
Jquery AJAX : get() method
 The jQuery get() method sends asynchronous http GET
request to the server and retrieves the data..
 Syntax :
$.get(url, [data],[callback]);

 url: request url from which you want to retrieve the

data
 data: data to be sent to the server with the request as
a query string
 callback: function to be executed when request
succeeds
Jquery AJAX : post() method
 The $.post() method requests data from the server
using an HTTP POST request.
 Syntax :
$.post(url, [data],[callback]);

 The required URL parameter specifies the URL you wish

to request.
 The optional data parameter specifies some data to
send along with the request.
 The optional callback parameter is the name of a
function to be executed if the request succeeds.
• POST and GET calls in AJAX
 GET places arguments in the query string, but POST doesn’t.

 No noticeable difference in AJAX - AJAX request does

not appear in the address bar.
 GET call in AJAX still has the size limitation on the amount
of data that can be passed.
 General principle:

o GET method: it is used to retrieve data to display in the

page and the data is not expected to be changed on the
server.
o POST method: it is used to update information on the
server.