Facebook Twitter Reset

This Tutorial Has Been Viewed 2,037 Times.

Jquery Basics, How to use jquery?

Below are some basic examples of  Jquery and its feature.

How to add jQuery to your website

Installing
You can download jquery.js file form jquery.com.

<script type=”text/javascript” src=”jquery.js></script>

OR 
Recommended 

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js
></script>

Jquery Code
Generally used script run this when the HTML is all ready.  Live Demo

<script type=”text/javascript>
$(document).ready(function()
{
alert(‘Welcome to mistonline.in‘);
});
</script>

Similar as previous script. Take a look at Live Demo

<script type=”text/javascript>
$(function() 
{
alert(‘Welcome to mistonline.in‘);
});
</script>

Run this when the whole page has been downloaded. Take a look at Live Demo

<script type=”text/javascript>
$(window).load(function()
{
alert(‘Loaded Whole Page including images)’);
});
</script>

jQuery Stucture
Here $ = jquery, selector is a DOM element and function execute a jquery fuction.

$(selector).function(parameters);

DOM - Document Object Model Wiki

Selectors

-> Select DOM elements eg: $(‘h1′) ,$(‘div’)$(‘li’)..
-> Select ID : $(‘#id_name’)
-> Select Class : $(‘.class_name’)

Working with Click() Event

Structure $(selector).click()

<script type=”text/javascript>
$(function() 
{  

$(‘#button_action‘).click(function()
{
alert(‘Hey Button‘);
});

$(‘.link_action‘).click(function()
{
alert(‘Hey Link‘);
});

});
</script>

<body>
<include type=’button‘ value=’BUTTON‘ id=’button_action‘/>
<a href=’#‘ class=’link_action‘>LINK</a>
</body>

Hide and Show With Click Event
Hiding and Showing the div tag.

<script type=”text/javascript>
$(function() 
{  

$(‘.hide_box’).click(function()
{
$(‘#box’).hide();
});

$(‘.show_box’).click(function()
{
$(‘#box’).show();
});

});
</script>

<body>
<a href=”#” class=”hide_box“>Hide</a>
<a href=”#” class=”show_box“>Show</a>
<div id=”box“></div>
</body>

VN:F [1.9.13_1145]
Rating: 10.0/10 (2 votes cast)
VN:F [1.9.13_1145]
Rating: 0 (from 0 votes)
Jquery Basics, How to use jquery?, 10.0 out of 10 based on 2 ratings

Incoming search terms:




You will also be interested in ,

No comments yet.

Leave a Comment

Spam protection by WP Captcha-Free

Affordable Seo PackagesSeo BlogEdu Backlinks
More in Ajax, PHP, scripts (87 of 151 articles)