Jquery Tutorial For The Beginners

Learn Jquery With Me :
Create a Dirictory named as Easy Jquery Tutorial
Download and keep jquery-1.4.2.js in your root directiory(In Easy Jquery Tutorial Folder)
Open notepad and write the code and save as html:

 

Contents :

1) Display alert box on clicking link in Jquery

2) Click on the link to hide in Jquery

3)Show and hide content using button in Jquery

4)Click on box and it will disappear in Jquery

5) Show and hide paragraph clicking Button in Jquery

6)Show and hide the image using Jquery

7) Show text field and check input in Jquery

8) Highlight text by changing color on every click(Toggle effect) in Jquery

9)To find the co-ordinates using Jquery

10) Jquery  sliding menu

11)Move Jquery Div

12) Jquery box animation

 

Display alert box on clicking link :

Click here to know about jQuery

You

Separating js files form the html :

Custom.js code:
$(document).ready(function() {
$(“div”).click(function() {
alert(“Hello Friends!”);
});
});

Click on the link to hide :

This will not appear in the browser

Click here to hide this link

This is another paragraph , which will be hidden

Custom.js :

$(“p”).hide();
$(“a”).click(function () {
$(this).hide();
return true;
});

Show and hide content using button in jquery :







Hide
Show

Amiging click on box and it will disappear:

}
$(“div”).click(function () {
$(this).hide(2000, function () {
$(this).remove();
});
});



Show and hide paragraph clicking Button :

Click to hide Paragraph
Click to show Paragraph

This will Hide after clicking button

It will hide too………………..

Show and Hime the image using jquery:

});
});
});



Show text field and check input:

Click this
Want to move ahead?(Type’y’ for yes & hit “Enter”)

It blinks for a while

Highlight text by changing color on every click(Toggle effect)

• Download jquery’s set up file


• Save it in your personal folder


• Create html file save it in same folder


• Include it’s url in html code


• Use script in between script tag


• Run your program,simply by double clicking

To find the co-ordinates using jquery:  

 

This is the best way to find an offset.

$(“#result”).text(“hi”);
});

Jquery sliding menu :

ldquo;-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

style.css for sliding menu:
/* common page styles */
body
{ background: #6595A3;
padding: 0 20px}

.clear
{ clear: both;
overflow: hidden;
height: 0}

#all
{ width: 60%;
min-width: 650px;
margin: 40px auto 0 auto;
background: #FCFFED;
padding: 20px 35px}

h1
{ font: 26px tahoma, arial;
color: #324143}

p
{ font: 12px tahoma, arial;
color: #171F26;
margin-bottom: 25px}

a
{ color: #324143}

/* menu styles */
#jsddm
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;
background: #324143;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #FF6347;
white-space: nowrap}

#jsddm li a:hover
{ background: #24313C}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;
background: #FF6347;
color: #24313C}

#jsddm li ul li a:hover
{ background: #6495ED}

Move Jquery Div:

« »

$(“#left”).click(function(){
$(“.block”).animate({“left”: “-=50px”}, “slow”);
});

Jquery box animation:

» Animate TextBlock1
» Animate TextBlock2
» Animate Both TextBlock

» Reset

$(“#b1″).click(function(){
$(“#textblock1″).animate( { width:”90%” }, { queue:false, duration:3000 } )
.animate( { fontSize:”24px” }, 1500 )
.animate( { borderRightWidth:”15px” }, 1500);
});

$(“#b2″).click(function(){
$(“#textblock2″).animate( { width:”90%”}, 1000 )
.animate( { fontSize:”24px” } , 1000 )
.animate( { borderLeftWidth:”15px” }, 1000);
});

$(“#b3″).click(function(){
$(“#b1″).add(“#b2″).click();
});

$(“#b4″).click(function(){
$(“div”).css({width:”", fontSize:”", borderWidth:”"});
});