Web Designing –II Unit 2

Unit-2: jQuery Fundamentals

jQuery is a lightweight, "write less, do more", JavaScript library.

The purpose of jQuery is to make it much easier to use JavaScript on your website.

jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish,
and wraps them into methods that you can call with a single line of code.

jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM
manipulation.

The jQuery library contains the following features:

 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX
 Utilities

2.1 Introduction and basics:

jQuery is a JavaScript framework, which purpose is to make it much easier to use

JavaScript on your website. You could also describe jQuery as an abstraction layer, since it
takes a lot of the functionality that you would have to write many lines of JavaScript to
accomplish and wraps it into functions that you can call with a single line of code. It's important
to note that jQuery does not replace JavaScript, and while it does offer some syntactical
shortcuts, the code you write when you use jQuery is still JavaScript code.

JQUERY

jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice
motto −Write less, do more. jQuery simplifies HTML document traversing, event handling,
animating, and Ajax interactions for rapid web development. jQuery is a JavaScript toolkit
designed to simplify various tasks by writing less code.

FEATURES OF JQUERY
 DOM manipulation − The jQuery made it easy to select DOM elements, traverse them and
modifying their content by using cross-browser open source selector engine called Sizzle.
 Event handling − The jQuery offers an elegant way to capture a wide variety of events, such
as a user clicking on a link, without the need to clutter the HTML code itself with event
handlers.

Vivekanand College For Advanced Computer and Information Technology Page 1

 Web Designing –II Unit 2

 AJAX Support − The jQuery helps you a lot to develop a responsive and feature-rich site
using AJAX technology.
 Animations − The jQuery comes with plenty of built-in animation effects which you can use
in your websites.
 Lightweight − The jQuery is very lightweight library - about 19KB in size Minified and
gzipped.
 Cross Browser Support − The jQuery has cross-browser support, and works well in IE 6.0+,
FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
 Compatibility All Dynamic Languages - jQuery script can be use with all most Dynamic Web
Languages like PHP, ASP, JSP, CGI etc.
 Latest Technology − The jQuery supports CSS3 selectors and basic XPath syntax.

HOW TO USE JQUERY?

There are two ways to use jQuery.
 Local Installation − You can download jQuery library on your local machine and include it in
your HTML code.
 CDN Based Version − You can include jQuery library into your HTML code directly from
Content Delivery Network CDN.

LOCAL INSTALLATION
 Go to the https://jquery.com/download/ to download the latest version available.
Now put downloaded jquery-2.1.3.min.js file in a directory of your website, e.g. /jquery.

2.1.1 Advantage of jQuery and Syntax

Advantages

 Ease of use
This is pretty much the main advantage of using JQuery, it is a lot more easy to use
compared to standard javascript and other javascript libraries. Apart from simple syntax,
it also requires much less lines of code to achieve the same feature in comparison.

 Large library
JQuery enables you to perform hordes of functions in comparison to other Javascript
libraries.

 Strong open source community. (Several jQuery plugins available)

JQuery, while relatively new, has a following that religiously devote their time to
develop and enhance the functionality of JQuery. Thus there are hundreds of prewritten

Vivekanand College For Advanced Computer and Information Technology Page 2

 Web Designing –II Unit 2

plugins available for download to instantly speed up your development process.

Another advantage behind this is the efficiency and security of the script.

 Great documentation and tutorials

The JQuery website has a comprehensive documentation and tutorials to get even an
absolute beginner in programming to get the ball rolling with this library.

 Ajax support
JQuery lets you develop Ajax templates with ease, Ajax enables a sleeker interface
where actions can be performed on pages without requiring the entire page to be
reloaded.

Syntax
jQuery syntax is made by using HTML elements selector and perform some action on the
elements are manipulation in Dot sign(.).
jQuery syntax: $(selector).action( )
 $ sign define the jQuery,
 Selector define the Query Elements in HTML document, and
 action() define the action performed on the elements.
J Q UERY B ASIC S YNTAX E XAMPLES
$("p").hide()
The jQuery hide() function, hiding all <p> elements.
Code Output
<html>
<head>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p").hide();
});
});
</script>
</head>
<body>
<p>This is a First Paragraph.</p>
<p>This is a Second Paragraph.</p>
<button>Click Me to Hide Above All
Paragraph</button>
</body>
</html>
$("this").hide()
The jQuery hide() function, hiding current(this) element.
Code Output

Vivekanand College For Advanced Computer and Information Technology Page 3

 Web Designing –II Unit 2

<html>
<head>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$(this).hide();
});
});
</script>
</head>

<body>
<button>Click Me to Hide THIS button</button>
</body>
</html>
$("#div1").hide()
The jQuery hide() function, hiding whose id="div1" in the elements.
Code Output
<html>
<head>
<script type="text/javascript"
src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$("#div1").hide();
});
});
</script>
</head>

<body>
<p id="div1">This is a Second Paragraph.</p>
<button>Click Me to Hide Above Paragraph</button>
</body>
</html>
$(".div1").hide()
The jQuery hide() function, hiding whose class=".div1" in the elements.
Code Output

Vivekanand College For Advanced Computer and Information Technology Page 4

 Web Designing –II Unit 2

<html>
<head>
<script type="text/javascript"
src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$(".div1").hide();
});
});
</script>
</head>

<body>
<p>This is a First Paragraph.</p>
<p class="div1">This is a Second Paragraph.</p>
<button>Click Me to Hide Above Paragraph</button>
</body>
</html>

2.1.2 jQuery Selectors:

jQuery selectors is most important aspects of the jQuery library. jQuery library allow
you to select elements in your HTML document by wrapping them in $(" ") (also you have to
use single quotes), which is the jQuery wrapper. Selectors are useful and required at every step
while using jQuery. With jQuery selectors you can find elements based on their id, classes,
types, attributes, values of attributes and much more. It's based on the existing CSS Selectors,
and in addition, it has some own custom selectors.
All type of selectors in jQuery, start with the dollar sign and parentheses: $( ).
jQuery Selector Syntax
Selector Description
TagName / element Selects all element match of given elements.
This Selects current elements.
#ID Selects element whose id is match of given elements.
.CLASS Selects element whose class is match of given elements.
* Selects all elements in the document.
E LEMENT / T AG S ELECTOR
The jQuery element selector selects elements based on their tag names. You can select
all <table> elements on a page like this: $("table").
Code Output
<html>
<head>
<script type="text/javascript"
src="jquery.js"></script>

Vivekanand College For Advanced Computer and Information Technology Page 5

 Web Designing –II Unit 2

<script type="text/javascript">
$(document).ready(function() {
$("table *").css("background-color","pink");
});
</script>
</head>
<body>
<table border="0" width="400px">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>
T HIS S ELECTOR
The jQuery this selector is used for selecting the current element.

Code Output
<html>
<head>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$(this).hide();
});
});
</script>
</head>

<body>
<button>Click Me to Hide THIS button</button>
</body>
</html>

1.1.1 ID S ELECTOR
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want to find
a single, unique element.

Vivekanand College For Advanced Computer and Information Technology Page 6

 Web Designing –II Unit 2

Code Output
<html>
<head>
<script type="text/javascript"
src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#name").css("background-color","pink");
});
</script>
</head>
<body>
<table border="0" width="400px">
<tr>
<td id="name">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>

C LASS S ELECTOR
The jQuery class selector finds elements with a specific class. To find elements with a
specific class, write a period character, followed by the name of the class: $(".test")
Code Output
<html>
<head>
<script type="text/javascript"
src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".name").css("background-color","pink");
});
</script>
</head>
<body>
<table border="0" width="400px">
<tr>
<td class="name">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>

Vivekanand College For Advanced Computer and Information Technology Page 7

 Web Designing –II Unit 2

</table>
</body>
</html>

jQuery Custom Selectors

Syntax Description
$(":animated") Selects elements currently being animated.
$(":button") Selects any button elements (inputs or buttons tag).
$(":radio") Selects radio buttons.
$(":checkbox") Selects checkboxes.
$(":header") Selects header elements (h1, h2, h3, etc..).
dblclick( )
Use Event Occurs when mouse perform double click.
Syntax $(selector).dblclick(function) (Bind a Function to dblclick event)
$(selector).dblclick() (Trigger the dblclick event)
Function Function is Optional parameter. Function define the ready to run when event
occur.
Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").dblclick(function(){
$(this).css("background-color","pink");
});
});
</script>
</head>
<body>
<form action="">
Name:
<input type="text" name="name" /><br />
<input type="submit" name="submit" />
</form>
</body>
</html>
delegate( )
Use Event Occurs when add one or more event handlers, specific child element of
matching elements.
Syntax $(selector).delegate(ChildSelector,event,[data],function)
Child ChildSelector is Required parameter. ChildElement define add one or more
Selector childelement add to handle event.
event event is Required parameter. event define add one or more event add to
handle event.
data data is Optional parameter. data define the addition data pass to the function.
function Function is Optional parameter. Function define the ready to run when event
occur.

Vivekanand College For Advanced Computer and Information Technology Page 8

 Web Designing –II Unit 2

Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").delegate("button","click",function(){
$("form").slideToggle();
});
});
</script>
</head>
<body>
<div style="background-color:pink">
<button>Click Delegate Event Run</button>
<form action="">
Name:
<input type="text" name="name" /><br />
<input type="submit" name="submit" />
</form>
</div>
</body>
</html>
die( )
Use Event Occurs when remove all event handler along with live() event.
Syntax $(selector).die([event],[function])
event event is Optional parameter. event define add one or more event add to
handle event.
function Function is Optional parameter. Function define the ready to run when event
occur.
Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").live("click",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("p").die();
});
});
</script>
</head>
<body>
<p>This Me to Shoe Live or Die Event Example</p>
<p>This Me and occur slideToogle effect with die or live event</p>
<p>This Me to Shoe Live or Die Event Example</p>
<button>Click to Run Die Event</button>
</body>
</html>
error( )

Vivekanand College For Advanced Computer and Information Technology Page 9

 Web Designing –II Unit 2

Use Event error Occurs when selected element not loaded successfully.
Syntax $(selector).error(function) (Bind a Function to error event)
$(selector).error() (Trigger the error event)
function Function is Optional parameter. Function define the ready to run when event
occur.
Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").error(function(){
$("img").replaceWith("Error Loading Image Not Open..!");
});
});
</script>
</head>
<body>
<p>error event occur, when image is not open</p><br>
<img src="../../jix/img_nat.pngc" width="207" height="137" />
</body>
</html>
e.pageX( )
Use Event Occurs when mouse position in Left Side.
Syntax event.pageX
event event is Required parameter. event define specific event binding to the
function.
Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function(e){
$("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});
});

</script>
</head>
<body>
<p>Mouse Position is: <span></span></p>
</body>
</html>

keydown( )
Use Event Occurs when key is pressed.
Syntax $(selector).keydown(function) (Bind a Function to keydown event)
$(selector).keydown() (Trigger the keydown event)
function Function is Optional parameter. Function define the ready to run when event
occur.
Example <html>

Vivekanand College For Advanced Computer and Information Technology Page 10

 Web Designing –II Unit 2

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color","#FFFF99");
});
$("input").keyup(function(){
$("input").css("background-color","pink");
});
$("#btn1").click(function(){
$("input").keydown();
});
$("#btn2").click(function(){
$("input").keyup();
});
});
</script>
</head>
<body>
<button id="btn1">Function keyDown Event Run</button>
<button id="btn2">Function keyUp Event Run</button>
<form action="">
Name:
<input type="text" name="name" />
</form>
</body>
</html>

2.1.3 jQuery Events (ready(),click(), keypress(),focus(),blur(),change())

THE EVENT METHODS

blur( )
Use Event occur when element lost focus.
Syntax $(selector).blur(function) (Bind a Function to blur event)
$(selector).blur() (Trigger the blur event)
function Function is Optional parameter. Function define the ready to run when event
occur.
Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","#FFFF99");
});
$("input").blur(function(){
$("input").css("background-color","pink");
});
});

Vivekanand College For Advanced Computer and Information Technology Page 11

 Web Designing –II Unit 2

</script>
</head>
<body>
<form action="">
Name:
<input type="text" name="name" />
</form>
</body>
</html>
change( )
Use Event occurs when change the elements.
Syntax $(selector).change(function) (Bind a Function to change event)
$(selector).change() (Trigger the change event)
function Function is Optional parameter. Function define the ready to run when event
occur.
Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").change(function(){
$(this).css("background-color","pink");
});
});
</script>
</head>
<body>
<form action="">
Name:
<input type="text" name="name" /><br />
<input type="submit" name="submit" />
</form>
</body>
</html>
click( )
Use Event Occurs when the mouse click.
Syntax $(selector).click(function) (Bind a Function to click event)
$(selector).click() (Trigger the click event)
function Function is Optional parameter. Function define the ready to run when event
occur.
Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").click(function(){
$(this).css("background-color","pink");
});
});
</script>
</head>
Vivekanand College For Advanced Computer and Information Technology Page 12
 Web Designing –II Unit 2

<body>
<form action="">
Name:
<input type="text" name="name" /><br />
<input type="submit" name="submit" />
</form>
</body>
</html>

dblclick( )
Use Event Occurs when mouse perform double click.
Syntax $(selector).dblclick(function) (Bind a Function to dblclick event)
$(selector).dblclick() (Trigger the dblclick event)
Function Function is Optional parameter. Function define the ready to run when event
occur.
Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").dblclick(function(){
$(this).css("background-color","pink");
});
});
</script>
</head>
<body>
<form action="">
Name:
<input type="text" name="name" /><br />
<input type="submit" name="submit" />
</form>
</body>
</html>

keydown( )
Use Event Occurs when key is pressed.
Syntax $(selector).keydown(function) (Bind a Function to keydown event)
$(selector).keydown() (Trigger the keydown event)
function Function is Optional parameter. Function define the ready to run when event
occur.
Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color","#FFFF99");
});

Vivekanand College For Advanced Computer and Information Technology Page 13

 Web Designing –II Unit 2

$("input").keyup(function(){
$("input").css("background-color","pink");
});
$("#btn1").click(function(){
$("input").keydown();
});
$("#btn2").click(function(){
$("input").keyup();
});
});
</script>
</head>
<body>
<button id="btn1">Function keyDown Event Run</button>
<button id="btn2">Function keyUp Event Run</button>
<form action="">
Name:
<input type="text" name="name" />
</form>
</body>
</html>

keypress()

Use Event Occurs when key is pressed count the pressed key.
Syntax $(selector).keypress(function) (Bind a Function to keypress event)
$(selector).keypress() (Trigger the keypress event)
function Function is Optional parameter. Function define the ready to run when event
occur.
Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
i=0;
$(document).ready(function(){
$("input").keypress(function(){
$("span").text(i=i+1);
});
$("button").click(function(){
$("input").keypress();
});
});
</script>
</head>
<body>
<button>Function keypress Event Run</button>
<form action="">
Name:
<input type="text" name="name" />
</form>
<p>No of Keypressed: <span></span></p>
</body>

Vivekanand College For Advanced Computer and Information Technology Page 14

 Web Designing –II Unit 2

</html>
keyup( )
Use Occurs when key is released.
Syntax $(selector).keyup(function) (Bind a Function to keyup event)
$(selector).keyup() (Trigger the keyup event)
function Function is Optional parameter. Function define the ready to run when event
occur.
Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color","#FFFF99");
});
$("input").keyup(function(){
$("input").css("background-color","pink");
});
$("#btn1").click(function(){
$("input").keydown();
});
$("#btn2").click(function(){
$("input").keyup();
});
});
</script>
</head>
<body>
<button id="btn1">Function keyDown Event Run</button>
<button id="btn2">Function keyUp Event Run</button>
<form action="">
Name:
<input type="text" name="name" />
</form>
</body>
</html>

focus()

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "yellow");
});

Vivekanand College For Advanced Computer and Information Technology Page 15

 Web Designing –II Unit 2

$("input").blur(function(){
$(this).css("background-color", "green");
});
});
</script>
</head>
<body>

Name: <input type="text" name="fullname"><br>

Email: <input type="text" name="email">

</body>
</html>

ready()
$(document).ready(function(){

// jQuery methods go here...

});

The $(document).ready() method allows us to execute a function when the document is fully
loaded. This is to prevent any jQuery code from running before the document is finished
loading (is ready). It is good practice to wait for the document to be fully loaded and ready
before working with it. This also allows you to have your JavaScript code before the body of
your document, in the head section.

2.2 jQuery Effects: Show/Hide, Fade, Slide, Stop, Chaining, Callback

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.
H IDE
Use The hide method simply hides each of the set of matched elements if they are
shown. There is another form of this method which controls the speed of the
animation.
Syntax selector.hide( );
Parameter NA
Example <html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").hide();

Vivekanand College For Advanced Computer and Information Technology Page 16

 Web Designing –II Unit 2

$("p").hide();
$("#btn2").click(function () {
$("p").show("slow");
$("#btn2").hide();
$("#btn1").show();
});
$("#btn1").click(function () {
$("p").hide("slow");
});
});
</script>
</head>
<body>
<button id="btn1">Click To Hide Paragraph</button>
<button id="btn2">Click To Show Paragraph</button>
<p style="background-color:#99FFFF;font-size:16px;font-family:Verdana;">This
Paragraph Will Be Hide After Click...</p>
</body>
</html>
S HOW
Use The show( ) method simply shows each of the set of matched elements if they are
hidden. There is another form of this method which controls the speed of the
animation.

Syntax selector.show( );
Parameter NA
Example <html>
<head>
<script src=" jquery.js " type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").hide();
$("p").hide();
$("#btn2").click(function () {
$("p").show("slow");
$("#btn2").hide();
$("#btn1").show();
});
$("#btn1").click(function () {
$("p").hide("slow");
});
});
</script>
</head>
<body>
<button id="btn1">Click To Hide Paragraph</button>
<button id="btn2">Click To Show Paragraph</button>
<p style="background-color:#99FFFF;font-size:16px;font-family:Verdana;">This
Paragraph Will Be Hide After Click...</p>
</body>
</html>

Vivekanand College For Advanced Computer and Information Technology Page 17

 Web Designing –II Unit 2

F ADE

Fadein()
Use The fadeIn( ) method fades in all matched elements by adjusting their opacity and
firing an optional callback after completion.
Syntax selector.fadeIn( speed, [callback] );
Parameter  speed − A string represen ng one of the three predefined
speeds "slow","def",or"fast""slow","def",or"fast" or the number of
milliseconds to run the animation e.g.1000e.g.1000.
 callback − This is op onal parameter represen ng a func on to call once the
animation is complete.
Example <html>
<head>
<script src=" jquery.js " type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("div").fadeOut(5000);
});
$("#btn2").click(function(){
$("div").fadeIn(5000);
});
});
</script>
</head>

<body>
<div style="background:#FF9933;width:100%;">My Effect is fadeOut Effect</div>
<button id="btn1">Fade Out (5 Second)</button>
<button id="btn2">Fade In (5 Second)</button>
</body>
</html>

Fadeout()
Use The fadeOut( ) method fades out all matched elements by adjusting their opacity
to 0, then setting display to "none" and firing an optional callback after
completion.
Syntax selector.fadeOut( speed, [callback] );
Parameter  speed − A string represen ng one of the three predefined
speeds "slow","def",or"fast""slow","def",or"fast" or the number of
milliseconds to run the animation e.g.1000e.g.1000.
 callback − This is op onal parameter represen ng a func on to call once the
animation is complete.
Example <html>
<head>
<script src=" jquery.js " type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("div").fadeOut(5000);
Vivekanand College For Advanced Computer and Information Technology Page 18
 Web Designing –II Unit 2

});
$("#btn2").click(function(){
$("div").fadeIn(5000);
});
});
</script>
</head>
<body>
<div style="background:#FF9933;width:100%;">My Effect is fadeOut Effect</div>
<button id="btn1">Fade Out (5 Second)</button>
<button id="btn2">Fade In (5 Second)</button>
</body>
</html>
Fadeto()
Use The fadeto() method fades the opacity of all matched elements to a specified
opacity and firing an optional callback after completion.
Syntax selector.fadeTo(speed, opacity[, callback]);
Parameter  speed − A string representing one of the three predefined
speeds "slow","def",or"fast""slow","def",or"fast" or the number of
milliseconds to run the animation e.g.1000e.g.1000.
 opacity − A number between 0 and 1 denoting the target opacity.
 callback − This is optional parameter representing a function to call once the
animation is complete.
Example <html>
<head>
<script src=" jquery.js " type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").fadeTo("slow",0.20);
});
});
</script>
</head>
<body>
<button>Click to Show FadeTo Effect</button>
<div style="background:#FF9933;width:100%;height:20%;">
</div>
</body>
</html>

Slide

jQuery slide methods use to change element height is visible or hidden in a Selected
elements. jQuery Slide Method support main three methods..

slidedown()
Use The slideDown() method reveals all matched elements by adjusting their height

Vivekanand College For Advanced Computer and Information Technology Page 19

 Web Designing –II Unit 2

and firing an optional callback after completion.

Syntax $(selector).slideDown( speed,[callback]);
Parameter  speed: Elements is a represent by three predefined String speed ("slow",
"normal", "fast"). otherwise number represent by milliseconds (Ex. 3000).
 callback: Callback is optional parameter. It is use to represents a function to be
executed whenever effect is completed.
Example <html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#click").click(function(){
$("#slide").slideDown("slow");
});
});
</script>
<style type="text/css">
#slide, #click
{
font-family:Verdana;
font-size:14px;
background:#CCCCCC;
border:solid 1px #c3c3c3;
text-align:center;
}
#slide
{
display:none;
height:60px;
}
</style>
</head>
<body>
<div id="slide">
<p>This is a jQuery Effect Example you are realy enjoy this to see this
effect.<br></p>
</div>
<p id="click">Show Slide Down Panel</p>
</body></html>
slideup()
Use The slideUp() method hides all matched elements by adjusting their height and firing
an optional callback after completion.
Syntax $(selector).slideUp( speed,[callback]);
Parameter  speed: Elements is a represent by three predefined String speed ("slow", "normal",
"fast"). otherwise number represent by milliseconds (Ex. 3000).
 callback: Callback is optional parameter. It is use to represents a function to be
executed whenever effect is completed.
Example <html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">

Vivekanand College For Advanced Computer and Information Technology Page 20

 Web Designing –II Unit 2

$(document).ready(function(){
$("#click").click(function(){
$("#slide").slideUp("slow");
});
});
</script>
<style type="text/css">
#slide, #click
{
font-family:Verdana;
font-size:14px;
background:#CCCCCC;
border:solid 1px #c3c3c3;
text-align:center;
}
#slide
{
height:60px;
}
</style>
</head>

<body>
<div id="slide">
<p>This is a jQuery Effect Example you are realy enjoy this to see this effect.<br></p>
</div>
<p id="click">Show Slide Up Panel</p>
</body>
</html>
slidetoggle()
Use The slideToggle() method toggles the visibility of all matched elements by adjusting
their height and firing an optional callback after completion.
Syntax $(selector).slideToggle( speed,[callback]);
Parameter  speed: Elements is a represent by three predefined String speed ("slow", "normal",
"fast"). otherwise number represent by milliseconds (Ex. 3000).
 callback: Callback is optional parameter. It is use to represents a function to be
executed whenever effect is completed.
Example <html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#click").click(function(){
$("#slide").slideToggle("slow");
});
});
</script>
<style type="text/css">
#slide, #click
{
font-family:Verdana;
font-size:14px;

Vivekanand College For Advanced Computer and Information Technology Page 21

 Web Designing –II Unit 2

background:#CCCCCC;
border:solid 1px #c3c3c3;
text-align:center;
}
#slide
{
height:60px;
display:none;
}
</style>
</head>
<body>
<div id="slide">
<p>This is a jQuery Effect Example you are realy enjoy this to see this effect.<br></p>
</div>
<p id="click">Show Slide Toogle Panel</p>
</body>
</html>

Stop

Use jQuery stop() effect method stop the running animation of selected elements.
Syntax $(selector).stop([stopAll])
Parameter  stopall − stopAll is Op onal parameter. A Boolean value specifying stop the
queued animate. Default value is false.
Example <html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#btn1").click(function(){
$("#divanimate").animate({height:"300px"},8000);
});
$("#btn2").click(function(){
$("#divanimate").stop();
});
});
</script>
</head>
<body>
<button id="btn1">Animate Start</button>
<button id="btn2">Stop Efeect</button>
<div id="divanimate" style="background:
pink;margin:10px;height:100px;width:100px;" ></div>
</body>
</html>

Chaining

Vivekanand College For Advanced Computer and Information Technology Page 22

 Web Designing –II Unit 2

With jQuery, you can chain together actions/methods. Chaining allows us to run
multiple jQuery methods (on the same element) within a single statement.
Until now we have been writing jQuery statements one at a time (one after the
other).However, there is a technique called chaining, that allows us to run multiple jQuery
commands, one after the other, on the same element(s).
To chain an action, you simply append the action to the previous action. The following
example chains together the css(), slideUp(), and slideDown() methods. The "p1" element first
changes to red, then it slides up, and then it slides down:
<html>
<head>
<script src=" jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">jQuery is fun!!</p>
<button>Click me</button>
</body>
</html>
We could also have added more method calls if needed. When chaining, the line of code
could become quite long. However, jQuery is not very strict on the syntax; you can format it like
you want, including line breaks and indentations.
<html>
<head>
<script src=" jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">jQuery is fun!!</p>
<button>Click me</button>
</body>
</html>

Callback

Vivekanand College For Advanced Computer and Information Technology Page 23

 Web Designing –II Unit 2

Use 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. A callback function is executed
after the current effect is finished.
Syntax $(selector).hide(speed,callback);
Parameter  speed: Elements is a represent by three predefined String speed ("slow",
"normal", "fast"). otherwise number represent by milliseconds (Ex. 3000).
 callback: Callback is optional parameter. It is use to represents a function to be
executed whenever effect is completed.
Example <html>
<head>
<script src=" jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p></body></html>

2.3 jQuery Manipulation methods:

jQuery HTML Methods are performed for changing and manipulate the HTML elements or
attributes.
2.3.1 Get/Set methods (text(), attr(), html(), val())

1.1.2 J Q UERY G ET
One very important part of jQuery is the possibility to manipulate the DOM (Document
Object Model). jQuery comes with a bunch of DOM related methods that make it easy to access
and manipulate elements and attributes.
Three simple, but useful, jQuery methods for DOM manipulation are:
 text( ) - Returns the text content of selected elements
 html( ) - Returns the content of selected elements (including HTML markup)
 val( ) - Returns the value of form fields
Example (Get content with HTML and TEXT)
<html>
<head>
<script src=" jquery.js"></script>

Vivekanand College For Advanced Computer and Information Technology Page 24

 Web Designing –II Unit 2

<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>
</body>
</html>

J Q UERY SET
We will use the same three methods from the previous page to set content:
 text( ) - Sets the text content of selected elements
 html( ) - Sets the content of selected elements (including HTML markup)
 val( ) - Sets the value of form fields
Example (Use of text( ), html( ) and val( ) for setting new content)
<html>
<head>
<script src=" jquery.js "></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
</head>
<body>
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>

Vivekanand College For Advanced Computer and Information Technology Page 25

 Web Designing –II Unit 2

<button id="btn3">Set Value</button>

</body>
</html>
All of the three jQuery methods above: text(), html(), and val(), also come with a
callback function. The callback function has two parameters: the index of the current element
in the list of elements selected and the original (old) value. You then return the string you wish
to use as the new value from the function.
2.3.2 Inert methods: (append(), prepend(),text(), before(), after(), wrap())

 append( ) - Inserts content at the end of the selected elements

Use jQuery append() method Inserts content into inside end of the selected
elements.
Syntax $(selector).append(content)
Parameter  Content: content is Required parameter. Insert content end into selected
element.
Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").append(" Online Web Development Tutorial");
});
});
</script>
</head>
<body>
<p>Hello World. </p>
<button>Insert append end of p element</button>
</body></html>
<html>
<head>
<script src="jquery.js"></script>
<script>
function appendText() {
var txt1 = "<p>Text.</p>"; // Create text with HTML
var txt2 = $("<p></p>").text("Text."); // Create text with jQuery
var txt3 = document.createElement("p");
txt3.innerHTML = "Text."; // Create text with DOM
$("body").append(txt1, txt2, txt3); // Append new elements
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button onclick="appendText()">Append text</button>
</body>
</html>
 prepend( ) - Inserts content at the beginning of the selected elements

Vivekanand College For Advanced Computer and Information Technology Page 26

 Web Designing –II Unit 2

Use jQuery prepend() method Inserts content into inside beggining of the selected
elements.
Syntax $(selector).prepend(content)
Parameter  Content: content is Required parameter. Insert content inside first into
selected element.
Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").prepend(" Online Web Development Tutorial");
});
});
</script>
</head>
<body>
<p>Hello World. </p>
<button>Insert prepend end of p element</button>
</body>
</html>
 after( ) - Inserts content after the selected elements
Use jQuery after() method add into end of selected elements.
Syntax $(selector).after(content)
Parameter  Content: content is Required parameter. Insert content inside first into
selected element.
Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").after(" Online Web Development Tutorial");
});
});
</script>
</head>
<body>
<p>Hello World.</p><br />
<button>Insert after the p element</button>
</body>
</html>

 before( ) - Inserts content before the selected elements

Use jQuery before() method add into start of selected elements.
Syntax $(selector).before(content)
Parameter  Content: content is Required parameter. Insert content end into selected
element.

Vivekanand College For Advanced Computer and Information Technology Page 27

 Web Designing –II Unit 2

Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").before(" Vivekanand College");
});
});
</script>
</head>
<body>
<p>Online Web Development Tutorial</p>
<button>Insert after the p element</button>
</body>
</html>

Text( ) - The text() method sets or returns the text content of the selected elements.

Use When this method is used to return content, it returns the text content of all
matched elements (HTML markup will be removed). When this method is used
to set content, it overwrites the content of ALL matched elements.
Syntax Return text content:
$(selector).text()

Set text content:

$(selector).text(content)

Set text content using a function:

$(selector).text(function(index,currentcontent))
Example Set text content for all <p> elements:

$("button").click(function(){
$("p").text("Hello world!");
});

Wrap( ) -

Use The wrap() method wraps specified HTML element(s) around each selected
element.
Syntax $(selector).wrap(wrappingElement,function(index))
Example $("button").click(function(){
$("p").wrap("<div></div>");
});

Vivekanand College For Advanced Computer and Information Technology Page 28

 Web Designing –II Unit 2

2.3.3 Remove element methods : (remove(),empty(),unwrap())

To remove elements and content, there are mainly two jQuery methods:
remove() - Removes the selected element (and its child elements)
Use jQuery remove() method Removes all selected element content like child
elements or text.
Syntax $(selector).remove()
Parameter NA
Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").remove();
});
});
</script>
</head>
<body>
<div style="background:pink;">This is a paragraph.</div>
<button>Click to emply p elements</button>
</body>
</html>
empty() - Removes the child elements from the selected element
Use jQuery empty() method Removes all child elements from selected elements.
Syntax $(selector).empty()
Parameter NA
Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").empty();
});
});
</script>
</head>
<body>
<div style="background:pink;">This is a paragraph.</div>
<button>Click to emply p elements</button>
</body>
</html>

Vivekanand College For Advanced Computer and Information Technology Page 29

 Web Designing –II Unit 2

2.3.4 jQuery Get and Set CSS properties using css() method

Sets or returns the style attribute

Use jQuery css() method set one or more style properties value into selected
elements.
Syntax $(selector).class(name,value) OR
$(selector).css({property:value,property:value, ...})
Parameter  Name: name is Required parameter. It is CSS property.
 Value: value is required parameter. It is respective property value.
Example <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","pink");
});
});
</script>
</head>
<body>
<p>This is CSS Refrence.</p>
<button>Set the css properties value into p elements</button>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"pink","font-size":"20px"});
});
});
</script>
</head>
<body>
<p>This is CSS Refrence.</p>
<button>Set multiple css properties value into p elements</button>
</body></html>

Vivekanand College For Advanced Computer and Information Technology Page 30