Learn JQuery

Hi ,

 JQuery is a hot topic in the market  and as per my point of view its always good to know about some good things .

JQuery is similiar to the javascript while coding infact its a javascript file only .You can download this file frome here.For further reference please visit jquery site

Here is  i am going to show you a demo of some of the functionality of the JQuery .

 here is the sample code . Top run this example code , first you need to download JQuery  file. Now copy the following code  save it in a HML file , and refer the Jquery.js file to this HTML code .

 <html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Untitled Page</title>
<script type=”text/javascript” src=”jquery-1.3.2.js”></script>
<script type=”text/javascript”>

$(document).ready(function(){

$(“#link”).click(function () {
alert(“Hi I am coming from Link click.”);
});
});

$(document).ready(function(){

$(“#show”).click(function () {
$(“p”).show(“slow”);

});

});

$(document).ready(function(){

$(“#hide”).click(function () {
$(“p”).hide(“40000” );

});

});

$(document).ready(function(){

$(“#toggle”).click(function () {
$(“p”).toggle(“slow” );
});
});

$(document).ready(function(){

$(“#SlideUp”).click(function () {
$(“p”).SlideUp(“slow” );
});
});

$(document).ready(function(){

$(“#Slidedown”).click(function () {
$(“p”).Slidedown(“slow” );
});
});

$(document).ready(function(){

$(“#Slidetoggle”).click(function () {
$(“p”).Slidetoggle(“slow” );
});
});

$(document).ready(function(){
$(“#animate”).click(function () {
$(“#block”).animate({
width: “70%”,
opacity: 0.4,
marginLeft: “0.6in”,
fontSize: “3em”,
borderWidth: “10px”
}, 1500 );
});
});

$(document).ready(function(){
$(“#animatetoggle”).click(function () {
$(“p”).animate({
“height”: “toggle”, “opacity”: “toggle”
}, { duration: “slow” });

});
});

$(“p”).animate({
“height”: “toggle”, “opacity”: “toggle”
}, { duration: “slow” });

});

});

</script>
<style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>

</head>
<body>

<a href=”” id=”link”>Link</a>
<button id=”show”>» Show</button>
<button id=”hide”>Hide</button>
<button id=”toggle”>Toggle</button>
<button id=”Slideup”>SlideUp</button>
<button id=”SlideDown”>SlideDown</button>
<button id=”Slidetoggle”>Slidetoggle</button>
<button id=”animate”>Animate</button>
<button id=”animatetoggle”>AnimateToggle</button>
<p style=”display: inline;background-color:Yellow”>Hello</p>
<p style=”display: none;background-color:Fuchsia”>Good Bye</p>
<div id=”block”>Hello!</div>

</body>
</html>

 

 

Happy simple scripting.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s