Jquery Tutorial For The Beginners

July 6th, 2012 | No Comments | Posted in Php & MySql, Programming

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


Separating js files form the html :

The jQuery Example

Click here to see a dialogue box.

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 :

$(“a”).click(function () {
return true;

Show and hide content using button in jquery :

jQuery is easy to use and gives dynamic output..

Amiging click on box and it will disappear:

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

Show and hide paragraph clicking Button :

This will Hide after clicking button

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

Show and Hime the image using jquery:

Click here to hide the logo

Click here to show the logo


Show text field and check input:

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:  


Click an element.

This is the best way to find an offset.


Jquery sliding menu :

ldquo;-//W3C//DTD XHTML 1.0 Strict//EN”

jQuery Simple Drop Down Menu

Hover mouse on any menu item to drop down list

  • Ajax

    • Global Ajax Event Handler

    • Low Level InterFace

    • Short Hand Methods

  • Effects

    • Basic

    • Custom

    • Sliding

    • Fading

    • Semitransparent

  • Events

  • Forms

  • Plug-ins

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

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

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

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

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

{ color: #324143}

/* menu styles */
{ 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:

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

Jquery box animation:

Animate Div blocks

Text Block1

Text Block2

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

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


$(“div”).css({width:”", fontSize:”", borderWidth:”"});


Leave a Reply 83 views, 1 so far today |

Most Commented Posts

Leave a Reply

Refresh Image