Scribd
Upload
16 views

Unit IV

Uploaded by

Sarathi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

Unit IV

Uploaded by

Sarathi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 44

Unit 4

JavaScript
JavaScript Events-Modifying CSS of Elements using JavaScript -JavaScript
Classes-Introduction to JQuery-JQuery Selectors-Using JQuery to add
interactivity-JQuery Events-Modifying CSS with JQuery -Adding and
Removing elements with JQuery-AJAX with JQuery - Animations with
JQuery(hide,show,animate,fade methods,slide methods)

JavaScript Events:
The change in the state of an object is known as an Event. In html, there are various
events which represent that some activity is performed by the user or by the
browser. When javascript code is included in HTML, js react over these events and
allow the execution. This process of reacting over the events is called Event
Handling. Thus, js handles the HTML events via Event Handlers.

For example, when a user clicks over the browser, add js code, which will execute
the task to be performed on the event.

Some of the HTML events and their event handlers are:

Mouse events:

Event Event Handler Description


Performed

click onclick When mouse click on an element

mouseover onmouseover When the cursor of the mouse comes over


the element
mouseout onmouseout When the cursor of the mouse leaves an
element

mousedown onmousedown When the mouse button is pressed over the


element

mouseup onmouseup When the mouse button is released over the


element

mousemove onmousemove When the mouse movement takes place.

Keyboard events:

Event Event Handler Description


Performed

Keydown & Onkeydow & When the user press and then release the
Keyup onkeyup key

Form events:

Event Event Description


Performed Handler

focus onfocus When the user focuses on an element

submit onsubmit When the user submits the form

blur onblur When the focus is away from a form element


change onchange When the user modifies or changes the value of a
form element

Window/Document events :

Event Event Description


Performed Handler

load onload When the browser finishes the loading of the page

unload onunload When the visitor leaves the current webpage, the
browser unloads it

resize onresize When the visitor resizes the window of the


browser

Click Event :
<html>
<head> Javascript Events </head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function clickevent()
{
document.write("This is JavaTpoint");
}
//-->
</script>
<form>
<input type="button" onclick="clickevent()" value="Who's this?"/>
</form>
</body>
</html>

Output:
MouseOver Event :
<html>
<head>
<h1> Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function mouseoverevent()
{
alert("This is JavaTpoint");
}
//-->
</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body>
</html>

Output:
Focus Event
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onfocus="focusevent()"/>
<script>
<!--
function focusevent()
{
document.getElementById("input1").style.background=" aqua";
}
//-->
</script>
</body>
</html>

Output:
Keydown Event
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onkeydown="keydownevent()"/>
<script>
<!--
function keydownevent()
{
document.getElementById("input1");
alert("Pressed a key");
}
//-->
</script>
</body>
</html>

Output:
Load event :
<html>
<head>Javascript Events</head>
</br>
<body onload="window.alert('Page successfully loaded');">
<script>
<!--
document.write("The page is loaded successfully");
//-->
</script>
</body>
</html>

Output:
JavaScript addEventListener() :
The addEventListener() method is used to attach an event handler to a particular
element. It does not override the existing event handlers. Events are said to be an
essential part of JavaScript. A web page responds according to the event that
occurred. Events can be user-generated or generated by API's. An event listener is
a JavaScript's procedure that waits for the occurrence of an event.

The addEventListener() method is an inbuilt function of JavaScript. We can add


multiple event handlers to a particular element without overwriting the existing
event handlers.

Syntax :

element.addEventListener(event, function, useCapture);


Although it has three parameters, the parameters event and function are widely
used. The third parameter is optional to define.

CODE:
<!DOCTYPE html>

<html>

<body>

<p> Example of the addEventListener() method. </p>

<p> Click the following button to see the effect. </p>

<button id = "btn"> Click me </button>

<p id = "para"></p>

<script>

document.getElementById("btn").addEventListener("click", fun);

function fun() {
document.getElementById("para").innerHTML = "Hello World" + "<br>" +
"Welcome to the javaTpoint.com";

</script>

</body>

</html>

Output:

Event Bubbling or Event Capturing:


In HTML DOM, Bubbling and Capturing are the two ways of event
propagation.Suppose we have a div element and a paragraph element inside it, and
we are applying the "click" event to both of them using the addEventListener()
method. Now the question is on clicking the paragraph element, which element's
click event is handled first.

So, in Bubbling, the event of the paragraph element is handled first, and then the
div element's event is handled. It means that in bubbling, the inner element's event
is handled first, and then the outermost element's event will be handled.

In Capturing the event of the div element is handled first, and then the paragraph
element's event is handled. It means that in capturing the outer element's event is
handled first, and then the innermost element's event will be handled.

1. addEventListener(event, function, useCapture);

We can specify the propagation using the useCapture parameter. When it is set to
false (which is its default value), then the event uses bubbling propagation, and
when it is set to true, there is the capturing propagation.

CODE:
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: lightblue;
border: 2px solid red;
font-size: 25px;
text-align: center;
}
span{
border: 2px solid blue;
}
</style>
</head>
<body>
<h1> Bubbling </h1>
<div id = "d1">
This is a div element.
<br><br>
<span id = "s1"> This is a span element. </span>
</div>
<h1> Capturing </h1>
<div id = "d2"> This is a div element.
<br><br>
<span id = "s2"> This is a span element. </span>
</div>
<script>
document.getElementById("d1").addEventListener("dblclick", function()
{alert('You have double clicked on div element')}, false);
document.getElementById("s1").addEventListener("dblclick", function()
{alert('You have double clicked on span element')}, false);
document.getElementById("d2").addEventListener("dblclick", function()
{alert('You have double clicked on div element')}, true);
document.getElementById("s2").addEventListener("dblclick", function()
{alert('You have double clicked on span element')}, true);
</script>
</body>
</html>
Output:

Modifying CSS of elements using JavaScript:


The HTML DOM allows JavaScript to change the style of HTML elements.

Changing HTML Style :

To change the style of an HTML element, use this syntax:

document.getElementById(id).style.property = new style

The following example changes the style of a <p> element:

Example :
<html>
<body>
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>

Using Events:

The HTML DOM allows you to execute code when an event occurs.

Events are generated by the browser when "things happen" to HTML elements:

● An element is clicked on
● The page has loaded
● Input fields are changed

You will learn more about events in the next chapter of this tutorial.

This example changes the style of the HTML element with id="id1", when the user
clicks a button:

Example:

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</body>
</html>
JavaScript Classes

A class in javascript is basically a blueprint or template of the object. New objects


can be created from a class.
Classes are similar to functions. Here, a class keyword is used instead of a function
keyword. Unlike functions classes in JavaScript are not hoisted. The constructor
method is used to initialize. The class name is user-defined.

Syntax
class ClassName {
constructor()
{ ... }
}

Use the keyword class to create a class.

Always add a method named constructor():

Example
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}

The example above creates a class named "Car".

The class has two initial properties: "name" and "year".


JQuery
Introduction to JQuery:
What is jQuery?

★ 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

Adding jQuery to Your Web Pages :

There are several ways to start using jQuery on your web site. You can:

● Download the jQuery library from jQuery.com


● Include jQuery from a CDN, like Google
Downloading jQuery:

There are two versions of jQuery available for downloading:

● Production version - this is for your live website because it has been
minified and compressed
● Development version - this is for testing and development (uncompressed
and readable code)

Both versions can be downloaded from jQuery.com.

The jQuery library is a single JavaScript file, and you reference it with the HTML
<script> tag (notice that the <script> tag should be inside the <head> section):

<head>

<script src="jquery-3.6.1.min.js"></script>

</head>

jQuery CDN:
If you don't want to download and host jQuery yourself, you can include it from a
CDN (Content Delivery Network).

Google is an example of someone who host jQuery:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
</script>
</head>
jQuery Selectors
jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to "find" (or select) HTML elements based on their
name, id, classes, types, attributes, values of attributes and much more. It's based
on the existing CSS Selectors, and in addition, it has some custom selectors.All
selectors in jQuery start with the dollar sign and parentheses: $().

The element Selector:


The jQuery element selector selects elements based on the element name.

You can select all <p> elements on a page like this:

$("p")

Example:
When a user clicks on a button, all <p> elements will be hidden:

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});
The #id Selector:
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.

To find an element with a specific id, write a hash character, followed by the id of
the HTML element:

$("#test")

Example:
When a user clicks on a button, the element with id="test" will be hidden:

$(document).ready(function(){

$("button").click(function(){

$("#test").hide();

});

});

The .class Selector:


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")
Example:
When a user clicks on a button, the elements with class="test" will be hidden:

$(document).ready(function(){

$("button").click(function(){

$(".test").hide();

});

});

More Examples of 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

$("a[target='_blank'] Selects all <a> elements with a target attribute value equal to
") "_blank"

$("a[target!='_blank' Selects all <a> elements with a target attribute value NOT
]") equal to "_blank"
$(":button") Selects all <button> elements and <input> elements of
type="button"

$("tr:even") Selects all even <tr> elements

$("tr:odd") Selects all odd <tr> elements

Simple Interactivity with jQuery :


Clicking <button>s :
If we’re going to make our page interactive, we need to give the user something
to interact with. We’ll talk about making <a> tags do something other than linking
to other pages in a second, but first let’s discuss the HTML <button> tag. On its
own, the <button> tag doesn’t do anything interesting—it just sits there on the
page, looking like a button. You can click it, but it doesn’t do anything:

<button>This is a button.</button>
This is a button.
In order to make the button do something other than sit there, we have to give it
a behavior with jQuery. Here’s what that looks like:

<button class="clickme">Click Me!</button>


<script type="text/javascript">
$(function() {
$(".clickme").on("click", function() {
alert("Good job!");
});
});
</script>

But whoa, that’s a lot of stuff! A lot of strange parentheses and quotes and
brackets and who knows what else. Here’s the code from inside the <script> tag
again—this time with the lines numbered and the “movable” parts (i.e., you can
swap out) highlighted in bold.

1 $(function() {
2 $(".clickme").on("click", function() {
3 alert("Good job!");
4 });
5 });

Hiding elements :
So we’re well on our way to making our pages interactive. But making a little
dialog window appear doesn’t seem very useful. Preferably we’d like to make it so
user action results in some kind of change happening on the page itself.

Well, it so happens that this is easy to do! The first thing we’re going to learn how
to do is to reveal and hide elements in response to the user clicking a button. In
the following example, the paragraph tag will disappear when the user clicks the
button.

<p class="hideme">This paragraph is not safe for work.</p>


<button class="hideparagraph">Hide your shame!</button>
<script type="text/javascript">
$(function() {
$(".hideparagraph").on("click", function() {
$(".hideme").hide();
});
});
</script>
Output:
This paragraph is not safe for work.

Hide your shame!


This example is very much like the previous example: we’re creating an event
handler, this time on elements of class .hideparagraph. The thing that’s different
this time is the code inside the event handler: what we want the browser to do
when the button is clicked. The new code is this:

$(".hideme").hide();
This line tells jQuery to find all elements on the page with the hideme class and…
hide them. (Behind the scenes, jQuery “hides” the elements by setting their
display properties to none.) If you wanted the event to hide elements belonging
to a different class, you could change the string hideme to something else.

The string hide has no inherent meaning; it’s just one of the many special words
that jQuery understands. You would only know that hide does what it does if
you’d read its documentation. Learning jQuery is all about learning all of the
different things we can put where the word hide is in this example, and what
those things do. (The full list is here, but you might be most interested in jQuery
effects.)

Revealing elements :
What’s good for the goose is good for the gander, and likewise it’s possible to
reveal previously hidden elements, using code very similar to the example above.
Here’s how:

<p>Q: Why didn't the skeleton cross the road?</p>


<p class="punchline" style="display: none;">A: Because it didn't have the
guts.</p>
<button class="telljoke">Tell the joke!</button>
<script type="text/javascript">
$(function() {
$(".telljoke").on("click", function() {
$(".punchline").show();
});
});
</script>
Output:
Q: Why didn't the skeleton cross the road?

A: Because it didn't have the guts.

Tell the joke!


In the example above, we need to set the element’s display to none initially, so
it’s hidden when the page is loaded. We then set up an event handler that asks
the browser to perform the following task when the user clicks on an element
with the .telljoke class:

$(".telljoke").show()
This time, we’re using jQuery’s show function, which causes all elements
belonging to the class in the parentheses before it to be displayed (if they weren’t
already displayed).

jQuery Events
jQuery events are the actions that can be detected by your web application. They
are used to create dynamic web pages. An event shows the exact moment when
something happens.

These are some examples of events.

● A mouse click
● An HTML form submission
● A web page loading
● A keystroke on the keyboard
● Scrolling of the web page etc.

These events can be categorized on the basis their types:

Mouse Events Keyboard Events Form Events Document/

Window Events

● click ● keyup ● Focus ● load


● dblclick ● keydown ● submit ● unload
● mouseenter ● keypress ● change ● scroll

● mouseleave ● blur ● resize

jQuery Syntax For Event Methods :


In jQuery, most DOM events have an equivalent jQuery method.

To assign a click event to all paragraphs on a page, you can do this:

$("p").click();

The next step is to define what should happen when the event fires. You must pass
a function to the event:

$("p").click(function(){
// action goes here!!
});
Commonly Used jQuery Event Methods:
$(document).ready()

The $(document).ready() method allows us to execute a function when the


document is fully loaded. This event is already explained in the jQuery Syntax
chapter

click()

The click() method attaches an event handler function to an HTML element.

The function is executed when the user clicks on the HTML element.

The following example says: When a click event fires on a <p> element; hide the
current <p> element:

Example :

<!DOCTYPE html>

<html>

<head>

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("p").click(function(){

$(this).hide();

});
});

</script>

</head>

<body>

<p>If you click on me, I will disappear.</p>

<p>Click me away!</p>

<p>Click me too!</p>

</body>

</html>

Output :

If you click on me, I will disappear.

Click me away!

Click me too!

jQuery submit() :

jQuery submit event is sent to the element when the user attempts to submit a
form.

This event is only attached to the <form> element. Forms can be submitted either
by clicking on the submit button or by pressing the enter button on the keyboard
when that certain form elements have focus. When the submit event occurs, the
submit() method attaches a function with it to run.

Syntax:

$(selector).submit()

It triggers the submit event for selected elements.

$(selector).submit(function)

It adds a function to the submit event.

Parameters of jQuery submit() event

Parameter Description

Function It is an optional parameter. It is used to specify the function to run


when the submit event is executed.

Example of jQuery submit() event


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>submit demo</title>
<style>

p{

margin: 0;
color: blue;
}
div,p {
margin-left: 10px;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Type 'javatpoint' to submit this form finally.</p>
<form action="javascript:alert( 'success!' );">
<div>
<input type="text">
<input type="submit">
</div>
</form>
<span></span>
<script>
$( "form" ).submit(function( event ) {
if ( $( "input:first" ).val() === "javatpoint" ) {
$( "span" ).text( "Submitted Successfully." ).show();
return;
}
$( "span" ).text( "Not valid!" ).show().fadeOut( 2000 );
event.preventDefault();
});
</script>
</body>
</html>
Output :

Type 'javatpoint' to submit this form finally.

Submit

Modifying CSS with JQuery


jQuery css() Method

The css() method sets or returns one or more style properties for the selected
elements.

To return the value of a specified CSS property, use the following syntax:

css("propertyname");

Set a CSS Property

To set a specified CSS property, use the following syntax:

css("propertyname","value");

example program

<!DOCTYPE html>

<html>

<head>

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>

$(document).ready(function(){

$("button").click(function(){

$("p").css("background-color", "yellow");

});

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>

<p style="background-color:#00ff00">This is a paragraph.</p>

<p style="background-color:#0000ff">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set background-color of p</button>

</body>

</html>

Before click button

After click button(back ground color will be changed)


Set Multiple CSS Properties
To set multiple CSS properties, use the following syntax:

css({"propertyname":"value","propertyname":"value",...});

example program

<!DOCTYPE html>

<html>

<head>

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("p").css({"background-color": "yellow", "font-size": "200%"});

});

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>

<p style="background-color:#00ff00">This is a paragraph.</p>


<p style="background-color:#0000ff">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set multiple styles for p</button>

</body>

</html>

Before click button

After click button(background color and font size will be changed)

Adding and Removing elements with JQuery


Add New HTML Content :
We will look at four jQuery methods that are used to add new content:

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


prepend() - Inserts content at the beginning of the selected elements
after() - Inserts content after the selected elements
before() - Inserts content before the selected elements

jQuery append() Method


The jQuery append() method inserts content AT THE END of the selected
HTML elements.

Example
$("p").append("Some appended text.");

jQuery prepend() Method


The jQuery prepend() method inserts content AT THE BEGINNING of the
selected HTML elements.

Example
$("p").prepend("Some prepended text.");

jQuery after() and before() Methods


The jQuery after() method inserts content AFTER the selected HTML
elements.
The jQuery before() method inserts content BEFORE the selected HTML
elements.
Example
$("img").after("Some text after");

$("img").before("Some text before");


Remove Elements/Content
To remove elements and content, there are mainly two jQuery methods:

remove() - Removes the selected element (and its child elements)


empty() - Removes the child elements from the selected element
jQuery remove() Method
The jQuery remove() method removes the selected element(s) and its child
elements.
Example:
$("#div1").remove();

jQuery empty() Method


The jQuery empty() method removes the child elements of the selected
element(s).
Example :
$("#div1").empty();

Filter the Elements to be Removed :

The jQuery remove() method also accepts one parameter, which allows you to filter
the elements to be removed.

The parameter can be any of the jQuery selector syntaxes.

The following example removes all <p> elements with class="test":

Example :
$("p").remove(".test");

This example removes all <p> elements with class="test" and class="demo":

Example :

$("p").remove(".test, .demo");

AJAX with JQuery


AJAX is an acronym standing for Asynchronous JavaScript and XML and this
technology helps us to load data from the server without a browser page
refresh.

JQuery is a great tool which provides a rich set of AJAX methods to develop
next generation web applications.

jQuery provides several methods for AJAX functionality.

With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a
remote server using both HTTP Get and HTTP Post - And you can load the external
data directly into the selected HTML elements of your web page!

jQuery load() Method

The jQuery load() method is a simple, but powerful AJAX method.

The load() method loads data from a server and puts the returned data into the
selected element.

Syntax:

$(selector).load(URL,data,callback);
The required URL parameter specifies the URL you wish to load.

The optional data parameter specifies a set of querystring key/value pairs to send
along with the request.

The optional callback parameter is the name of a function to be executed after the
load() method is completed.

Here is the content of our example file: "demo_test.txt":

<h2>jQuery and AJAX is FUN!!!</h2>

<p id="p1">This is some text in a paragraph.</p>

It is also possible to add a jQuery selector to the URL parameter.

The following example loads the content of the element with id="p1", inside the file
"demo_test.txt", into a specific <div> element:

Example :

$("#div1").load("demo_test.txt #p1");

The optional callback parameter specifies a callback function to run when the load()
method is completed. The callback function can have different parameters:

responseTxt - contains the resulting content if the call succeeds

statusTxt - contains the status of the call

xhr - contains the XMLHttpRequest object

The following example displays an alert box after the load() method completes. If
the load() method has succeeded, it displays "External content loaded successfully!",
and if it fails it displays an error message:

Example

$("button").click(function(){

$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){


if(statusTxt == "success")

alert("External content loaded successfully!");

if(statusTxt == "error")

alert("Error: " + xhr.status + ": " + xhr.statusText);

});

});

jQuery - AJAX get() and post() Methods


The jQuery get() and post() methods are used to request data from the server with
an HTTP GET or POST request.

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.

To learn more about GET and POST, and the differences between the two methods,
please read our HTTP Methods GET vs POST chapter.

jQuery $.get() Method


The $.get() method requests data from the server with an HTTP GET request.

Syntax:
$.get(URL,callback);

The required URL parameter specifies the URL you wish to request.

The optional callback parameter is the name of a function to be executed if the


request succeeds.

The following example uses the $.get() method to retrieve data from a file on the
server:

Example

$("button").click(function(){

$.get("demo_test.asp", function(data, status){

alert("Data: " + data + "\nStatus: " + status);

});

});

The first parameter of $.get() is the URL we wish to request ("demo_test.asp").

The second parameter is a callback function. The first callback parameter holds the
content of the page requested, and the second callback parameter holds the status
of the request.

Tip: Here is how the ASP file looks like ("demo_test.asp"):

<%

response.write("This is some text from an external ASP file.")

%>

jQuery $.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.

The following example uses the $.post() method to send some data along with the
request:

Example

$("button").click(function(){

$.post("demo_test_post.asp",

name: "Donald Duck",

city: "Duckburg"

},

function(data, status){

alert("Data: " + data + "\nStatus: " + status);

});

});

The first parameter of $.post() is the URL we wish to request


("demo_test_post.asp").

Then we pass in some data to send along with the request (name and city).
The ASP script in "demo_test_post.asp" reads the parameters, processes them, and
returns a result.

The third parameter is a callback function. The first callback parameter holds the
content of the page requested, and the second callback parameter holds the status
of the request.

Tip: Here is how the ASP file looks like ("demo_test_post.asp"):

<%

dim fname,city

fname=Request.Form("name")

city=Request.Form("city")

Response.Write("Dear " & fname & ". ")

Response.Write("Hope you live well in " & city & ".")

%>

Animations with JQuery(hide,show,animate,fade


methods,slide methods)
The jQuery library provides several techniques for adding animation to a web page.
These include simple, standard animations that are frequently used, and the ability
to craft sophisticated custom effects.

● Hide
● Show
● Fade
● Slide
● Animate
Hide :
You can apply any jQuery selector to select any element and then apply jQuery
hide() method to hide it. Here is the speed predefined parameter
("slow","normal",or "fast") or user defined parameter (<milliseconds in numbers>)
of all the parameters which gives you a solid control over the hiding effect

Syntax:
$(selector).hide( [speed, callback] );

Sample code:

$("button").click(function(){

$("p").hide(1000);

});

Show:
You can apply any jQuery selector to select any element and then apply jQuery
show() method to show it. Here is the speed predefined parameter
("slow","normal",or "fast") or user defined parameter (<milliseconds in numbers>)
of all the parameters which gives you a solid control over the hiding effect

Syntax:

$(selector).show( [speed, callback] );

Sample code:
$("button").click(function(){

$("p").show(1000);

});
Fade:
jQuery gives us two methods - fadeIn() and fadeOut() to fade the elements in and
out of visibility.The jQuery fadeIn() method is used to fade in a hidden element
whereas fadeOut() method is used to fade out a visible element.The parameters as
same as previous effects.

jQuery provides fadeToggle() methods to toggle the display state of elements


between the fadeIn() and fadeOut() methods. If the element is initially displayed, it
will be hidden (ie. fadeOut()); if hidden, it will be shown (ie. fadeIn()).

Syntax:

$(selector).fadeIn( [speed, callback] );

$(selector).fadeOut( [speed, callback] );

$(selector).fadeToggle( [speed, callback] );

Sample code:
$(document).ready(function() {

$("#show").click(function(){

$("#box").fadeIn(1000);

});

$("#hide").click(function(){

$("#box").fadeOut(1000);

});

});

//fade toggle
$("#button").click(function(){

$("#box").fadeToggle(1000);

});

Slide:

jQuery gives us two methods - slideUp() and slideDown() to slide up and slide
down the elements respectively. The jQuery slideUp() method is used to slide up
an element whereas slideDown() method is used to slide down.

jQuery provides slideToggle() methods to toggle the display state of elements


between the slideUp() and slideDown() methods. If the element is initially
displayed, it will be hidden (ie. slideUp()); if hidden, it will be shown (ie.
slideDown()).

Syntax:

$(selector).slideUp( [speed, callback] );

$(selector).slideDown( speed, [callback] );

$(selector).slideToggle( [speed, callback] );

Sample code:

//slide down

$("#flip").click(function(){

$("#panel").slideDown();

});

// slide up

$("#flip").click(function(){
$("#panel").slideUp();

});

//slide toggle

$("#button").click(function(){

$("#box").slideToggle(1000);

});

Animate:

The jQuery animate() method is used to create custom animations.The .animate()


method allows us to create animation effects on any numeric CSS property. The
only required parameter is a plain object of CSS properties.

Syntax:

$(selector).animate({ properties }, [speed, callback] );

properties − A required parameter which defines the CSS properties to be


animated and this is the only mandatory parameter of the call.

speed − An optional string representing one of the three predefined speeds


("slow", "normal", or "fast") or the number of milliseconds to run the animation
(e.g. 1000).

callback − An optional parameter which represents a function to be executed


whenever the animation completes.

Sample code:

$("button").click(function(){

$("div").animate({left: '250px'});

});

You might also like