Jquery Basics, How to use jquery?
Posted by admin | Posted in Jquery | Posted on 05-12-2009
0
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.
OR
Recommended
libs/jquery/1.3.0/jquery.min.js“></script>
Jquery Code
Generally used script run this when the HTML is all ready. Live Demo
$(document).ready(function()
{
alert(’Welcome to mistonline.in‘);
});
</script>
Similar as previous script. Take a look at Live Demo
$(function()
{
alert(’Welcome to mistonline.in‘);
});
</script>
Run this when the whole page has been downloaded. Take a look at Live Demo
$(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.
DOM - Document Object Model Wiki
Selectors
-> Select DOM elements eg: $(’h1′) ,$(’div’), $(’li’)..
-> Select ID : $(’#id_name’)
-> Select Class : $(’.class_name’)
Structure $(selector).click().
$(function()
{
$(’#button_action‘).click(function()
{
alert(’Hey Button‘);
});
$(’.link_action‘).click(function()
{
alert(’Hey Link‘);
});
});
</script>
Hide and Show With Click Event
Hiding and Showing the div tag.
$(function()
{
$(‘.hide_box’).click(function()
{
$(‘#box’).hide();
});
$(‘.show_box’).click(function()
{
$(‘#box’).show();
});
});
</script>
Related posts:
