JQUERY
Jquery
is a light-weight cross browser javascript library(A collection of predefined
functions). Jquery is most popular JavaScript library in use today. It was
released in 2006 by john Resig at Barcamp NewYork. (Barcamp is an international
conference network of use generated conference primarily focus around
technologies and web) Jquery greatly simplifies JavaScript programming model. Jquery
is free, open source software. Jquery library is designed to keep the things
very simple and reusable. Latest library of Jquery is jquery-1.9.1.js or
jquery-2.0.js.These two libraries called as core libraries.
All
the jquery libraries are available in two forms.
1.Development phase(Uncompressed
version)
2. Production phase(Compressed
version) or it is also known as minified version.
jquery-1.9.1.js
is uncompressed
jquery-1.9.1.min.js
is compressed or minified
Jquery
syntax is designed to make it easier to navigate a document, select DOM
element, create or apply effects and animation, handling css, events and
interacting jqueryUI as well as Ajax application.
3. Features of jquery:-
These
are namely following features of jquery:-
1.DOM
element selection and functions(It is also known as selectors)
2.DOM
element traversal.
3.DOM
element manipulation.
4.Event
handling.
5.CSS
handling.
6.Effects
and Animations.
7.JqueryUI
8.AJAX
interactions
9.JQUERY
plug-ins.
4.WHY JQUERY
The
jquery library is providing many easy to se functions(methods) to make reach
web applications. These functions are very easy to learn and even a designer
can also learn it very fast. Due to all these features jquery is very popular
and in high demand among the developers.
We
can use jquery in all web based applications irrespective of the technologies
such as servlets/jsp/classic asp/asp.net/php etc
5. Pre-requisities of jquery:-
1.HTML
2.CSS
3.JavaScript
6. Installation of jquery:-
Jquery
does not require any installation process because it is a just library which
comes as single .js file. So it is required to download and just place it in
our web application folder.
Jquery library:-
jquery-1.9.1.js
jquery-1.9.1.min.js
Download the above library from official
website http://jquery.com
7. How to use jquery library:-
In
order to use a jquery library we first create any webpage such as .html or .asp
or .jsp or .php etc.Include the jquery library in our html page or any other
webpage as follows. Inorder to include jquery library(.js file), we use a
<script> tag with following attributes.
A
<script> tag is highly recommended to place inside head section but it is
not mandatory.
<script
src="jq/jquery-1.9.1.js" type="text/javascript"
language="javascript"></script>
Once
the jquery library is included in our webpage as above, we can start using
jquery programe. In order to start writing a jquery program/code, we write a
<script> tag and in that we follow the syntax as follows.
<script
type="text/javascript" language="javascript">
.
.
.
</script>
Jquery
code should be inside the $(document).ready()
function.This function must be declared inside a script tag as follows.
<script type="text/javascript"
language="javascript">
$(document).ready(function(){
.
.
.
});
</script>
$(document).ready()
function is
mainly used to indicate everything inside it. It will load as soon as DOM is
ready.
8. JQUERY SYNTAX
The
jquery syntax is for the selecting html elements and perform some action on
them as follows.
$(selection).action()
A
$ sign is used to define jquery selector function.
selector
is used to find or select html elements.
action()
is used to perform jquery function on selected DOM element.
Example1:-
$("p").hide():-
It hides all the
elements matched by <p> tag
Example2:-
$("p").show():-
It shows all the
elements matched by <p> tag
9. jquery selectors:-
jquery
selector is used to select any DOM element or elements by using $() function.jquery
selectors are one of the most important parts of the jquery library. Because
any operations or actions can be performed on selected DOM elements.
jquery
selectors allows us to select and manipulate html elements as a group of
elements or a single element.
The following are
the basic jquery selectors:-
1.Tag selector
$("tag_name")
Ex:-
$("div"):-It
selects all the elements that matched by <div> tag
2.ID selector
$("#<tag_id>")
Ex:-
$("#x"):-It
selects an element that matched by tag id x
3.ID selector-
$(".<class_name>")
Ex:-
$(".y"):-It
selects an element that matched by class name y
<html>
<head>
<script
src="jquery-1.9.1.js" type="text/javascript"
language="javascript"></script>
<script
type="text/javascript" language="javascript">
$(document).ready(function(){
$("#b1").click(function(){
$("p").hide(5000);
});
$("#b2").click(function(){
$("p").show(5000);
});
$("#b3").click(function(){
$("p").toggle(5000);
});
var flag=true;
$("#b4").click(function(){
if(flag==true)
{
$("p").hide(4000);
$("#b4").html("show");
flag=false;
}
else
{
$("p").show(4000);
$("#b4").html("hide");
flag=true;
}
});
});
</script>
</head>
<body>
<input
type="button"
value="Hide" id="b1"/>
<input
type="button"
value="Show" id="b2"/>
<input
type="button" value="Toggle"
id="b3"/>
<input
type="button"
value="Hide" id="b4"/>
<p>This is first
paragraph</p>
<p>This is second
paragraph</p>
</body>
</html>
10. CSS HANDLING IN JQUERY
jquery
provides support for handling css including from css1 to css3
css(<name>):-This
method is used to return a style roperty on the firstmatched element.
syntax:-
$(selector).css(<name>);
css(<name>,<value>):-This
method is used to apply a single style propertyto all matched elements.
syntax:-
$(selector).css(<name>,<value>);css(<property>):-This method
is used to apply multiple properties in the form of key, value pairs to all
matched elements.
syntax:-
$(selector).css({"name1":valaue1","name2":"value2",..."namen":"valuen"});
<html>
<head>
<script
src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("div").mouse over(function(){
$(this).css("background-color","yellow");
});
$("div").mouse out(function(){
$(this).css("background-color","cyan");
});
});
</script>
<style>
div{
width:200;
height:200;
background-color:cyan;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Multiple properties:-
<html>
<head>
<script
src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("div").mouseover(function(){
$(this).css({"background-color":"yellow","border":"5px
dashed green","color":"red"});
});
$("div").mouseout(function(){
$(this).css({"background-color":"cyan","border":"5px
solid
blue","color":"black"});
});
$("div").click(function(){
var content=$(this).html();
var
bgcolor=$(this).css("background-color");
var
color=$(this).css("color");
var
border=$(this).css("border");
alert("output of selected
element:"+content);
});
});
</script>
<style>
div{
width:200;
height:200;
background-color:cyan;
}
</style>
</head>
<body>
<div
id="pres">Div is a block level tag</div>
</body>
</html>
11. EVENT HANDLING IN JQUERY
We
have the ability to create dynamic web pages by using events.Event's action
that can be detected by our web applications.When events are triggered we can
then used cusom function to do whatever we want with the event. These custom
functions are called event handlers.
Jquery provides
following event handlers.
Binding
the event handler:-Inorder to bind any event handler on DOM element, jquery
provides bind() method.
syntax:-
$(selector).bind(eventtype,[eventdata],handler);
Parameters:-
1.eventType:- A string containing a javascript
event type such as click, change, submit etc.
2.eventData:-This is optional parameter. It is
a map of data that will be passed to event handler.
3.handler:-It is a function to execute each
time when the event is triggered.
<html>
<head>
<script
src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("input[type=text]").blur(function(){
var v=$(this).val();
if(parseInt(v)>=10){
$("#but").bind("click",function(){
alert("current
value:"+$("input[type=text]").val());
});
}
});
});
</script>
</head>
<body>
Enter value:<input
type="text"/><br>
<input type="button"
id="but" value="Display"/>
</body>
</html>
UNbind Event(Remove
event):- In order
to do this jquery provides a method i.e unbind(). It can be used to remove
event handler of any specific DOM element.
syntax:- $(selector).unbind(eventtype);
<html>
<head>
<script
src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("#btnbind").bind("click",function(){
$("div").bind("mouseover",function(){
$(this).css("background-color","green");
});
$("div").bind("mouseout",function(){
$(this).css("background-color","pink");
});
});
$("#remove").bind("click",function(){
$("div").unbind("mouseover");
$("div").unbind("mouseout");
});
});
</script>
<style>
div{
padding:5px;
margin:10px;
border:5px solid red;
width:150px;
height:150px;
}
</style>
</head>
<body>
<input type="button"
id="btnbind" value="Bind"/>
<input type="button"
id="remove" value="UnBind"/><br>
<div></div>
<div></div>
</body>
</html>
Following are
the additional methods provided by the jquery. These are called event methods.
.hover(over,out):- It is used to provide an operation
of mouseover event and mouseout event.
<html>
<head>
<script
src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("div").hover(function(){
$(this).css({"background":"cyan","border":"5px
dotted blue"});
},
function(){
$(this).css({"background":"lightblue","border":"5px
solid red"});
});
});
</script>
<style>
div{
width:100px;
height:100px;
margin:10px;
border:3px solid red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
toggle(f1,f2,f3,...):-
It is used to
toggle among two or more functions will be called for every click.
syntax:-
$(selector).toggle(function(){
.
.
.
},
function(){
.
.
.
},
function(){
.
.
.
},
function(){
.
.
.
});
trigger():- It is used to fire an event on
every matched element.
syntax:- $(selector).trigger("eventtype");
<html>
<head>
<script
src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("#t1").select(function(){
$(this).after("<b>It
is selected</b>");
});
$("#but1").click(function(){
$("#t1").trigger("select");
});
});
</script>
</head>
<body>
Enter Test<input
id="t1" type="text" style="border:2px solid
green"/>
<br>
<input type="button"
id="but1" value="Select"/>
</body>
</html>
12. Working with checkbox control in
JQUERY
To
check a particular checkbox by using ID, whether it is checked or not
if("#chk1").prop("checked")==true)
alert("checkbox
selected");
else
alert("checkbox not
selected");
OR
$("#chk1").is(":checked");
<html>
<head>
<script src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("#chk1").prop("checked",true);
$("#chk1").change(function(){
if($(this).prop("checked")==true)
$("img").show();
else
$("img").hide();
});
});
</script>
</head>
<body>
<input type="checkbox"
id="chk1" value="show"/>show/hide-image<br>
<img
src="images/Leaf.jpg" width=100 height=100 />
</body>
</html>
To get a
particular checkbox(checked) item value
$("#chk1:checked").val();
Whether a
particular item is checked or not checked and to get the value
$("#chk1").val();
Working with
conditional operator for a particular checkbox checked or unchecked item
$("#chk1").prop("checked",true);
$("#chk1").change(function(){
$(this).is(":checked")?$("img").show():$("img").hide();
Working with a
group of checkboxes.
<html>
<head>
<script
src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("input:checkbox[name=cb]").change(function(){
var v="";
//$("input:checkbox[name=cb]");
$("input:checkbox[name=cb]:checked").each(function(){
v+=$(this).val+",";
});
if(v!=""){
v=v.substring(0,v.length-1);
$("#res").html("selected
items are:"+v);
}
else
$("#res").html("no
option is selected");
});
});
</script>
</head>
<body>
<input
type="checkbox" id="chk1" name="cb"
value="tel"/>Telugu
<input type="checkbox"
id="chk2" name="cb" value="eng"/>English
<input
type="checkbox" id="chk3" name="cb"
value="hin"/>Hindi
<p
id="res"></p>
</body>
</html>
To check whether
any checkbox in a group checked or not(It returns either true or false).
$("input:checkbox[name=cb]").is(":checked");
To check all
checkboxes
$("input:checkbox[name=cb]").attr("checked",true);
OR
$("input:checkbox[name=cb]").prop("checked",true);
OR
$("input:checkbox[name=cb]").attr("checked","checked");
$(document).ready(function(){
$("#chkmain").change(function(){
$("input:checkbox[name=cb]").prop("checked",$(this).prop("checked"));
});
$("input:checkbox[name=cb]").change(function(){
var ail=$("input:checkbox[name=cb]").length;
var
cil=$("input:checkbox[name=cb]:checked").length;
if(ail==cil){
$("#chkmain").prop("checked",true);
}
else{
$("#chkmain").prop("checked",false);
}
});
});
To check the
unckecked checkbox
$("input:checkbox[name=cb]").not(":checked").prop("checked",true);
OR
$("input:checkbox[name=cb]").not(":checked").attr("checked",true);
OR
$("input:checkbox[name=cb]").not(":checked").prop("checked","checked");
13. Effects in JQUERY
JQUERY
provides powerful methods that can be used to apply effects and graceful
animations on a set of matched elements. These methods are
available
in the JUQERY core library i.e. jquery-1.9.1.js
JQUERY
provides some additional effects and animations that are related to UI effects
and these are available in
jquery-ui-1.10.2.custom.js
The following
methods are available in core library in order to apply effects and animations.
fadeIn():- It is used to apply the fadeIn
effects to all matched elements by adjusting their opacity and firing an
optional callback function.
syntax:- $(selector).fadeIn(speed,[callback]);
fadeOut():- It is used to apply the fadeOut
effects to all matched elements by adjusting their opacity and firing an
optional callback function.
syntax:- $(selector).fadeOut(speed,[callback]);
fadeToggle():- It is used to apply the fade
toggle effects to all matched elements by adjusting their opacity and firing an
optional callback function after completion.
syntax:- $(selector).fadeToggle(speed,[callback]);
fadeTo():- It is used to apply the fade
effects with a specified opacity on all matched elements and firing an optional callback function.
syntax:- $(selector).fadeTo(speed,to,[callback]);
<html>
<head>
<script
src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("#fin").click(function(){
$("div").fadeIn(5000);
});
$("#fout").click(function(){
$("div").fadeOut(5000);
});
$("#ftog").click(function(){
$("div").fadeToggle(5000);
});
$("#fto").click(function(){
$("div").fadeTo(5000,'0.2');
});
$("#fincb").click(function(){
$("div").fadeIn(5000,function(){
$("p").html("Fade
in completed");
});
});
});
</script>
<style>
div{
width:250px;
height:250px;
padding:10px;
margin:20px;
border:5px solid red;
background:cyan;
}
</style>
</head>
<body>
<input type="button"
value="FadeIn" id="fin"/>
<input type="button"
value="FadeOut" id="fout"/>
<input type="button"
value="FadeToggle" id="ftog"/>
<input type="button"
value="FadeTo" id="fto"/>
<input type="button"
value="FadeIN-Callback" id="fincb"/>
<div></div>
<p></p>
</body>
</html>
show():- It is used to show the selected
DOM elements with graceful animation and firing an optional callback function
after completion.
syntax:- $(selector).show(speed,[callback]);
hide():- It is used to hide all the
selected DOM elements with graceful animation and firing an optional callback
function after completion.
syntax:- $(selector).hide(speed,[callback]);
toggle():- It is used to toggle the selected
DOM elements with graceful animation and firing an optional callback function
after completion.
syntax:- $(selector).toggle(speed,[callback]);
<html>
<head>
<script
src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("#sh").click(function(){
$("div").show(5000);
});
$("#hid").click(function(){
$("div").hide(5000);
});
$("#tog").click(function(){
$("div").toggle(5000);
});
$("#shcb").click(function(){
$("div").show(5000,function(){
alert("show
completed");
});
});
});
</script>
<style>
div{
width:250px;
height:250px;
padding:10px;
margin:20px;
border:5px solid blue;
background:brown;
}
</style>
</head>
<body>
<input type="button"
value="HIDE" id="hid"/>
<input type="button"
value="SHOW" id="sh"/>
<input type="button"
value="Toggle" id="tog"/>
<input type="button"
value="SHOW-CALL_BACK" id="shcb"/>
<div></div>
<p></p>
</body>
</html>
slideUp():- It is used to hide the element by
adjusting its height and firing an optional callback function after completion.
syntax:- $(selector).slideUp(speed,[callback]);
slideDown():- It is used to show the element by
adjusting its height and firing an optional callback function after completion.
syntax:- $(selector).slideDown(speed,[callback]);
slideToggle():- It is used to toggle between
slideUp and slideDown by adjusting its height and firing an optional callback
function after completion.
syntax:- $(selector).slideToggle(speed,[callback]);
<html>
<head>
<script
src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("#sup").click(function(){
$("div").slideUp(5000);
});
$("#sdown").click(function(){
$("div").slideDown(5000);
});
$("#stog").click(function(){
$("div").slideToggle(5000);
});
$("#supcb").click(function(){
$("div").slideUp(5000,function(){
alert("slideup
completed");
});
});
});
</script>
<style>
div{
width:250px;
height:250px;
padding:10px;
margin:20px;
border:5px solid tan;
background:lightblue;
}
</style>
</head>
<body>
<input type="button"
value="SlideUp" id="sup"/>
<input type="button"
value="SlideDown" id="sdown"/>
<input type="button"
value="SlideToggle" id="stog"/>
<input type="button"
value="SLIDEUP-CALL_BACK" id="supcb"/>
<div></div>
<p></p>
</body>
</html>
Really nice tut....Chandan
ReplyDelete