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.
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:
