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:
- Expand and collapse toggle div using jquery
- Replacing images with time intervals using jquery
- Load Another Webpage Content Using Simple Jquery
- Slideshow using jquery
- Learn CSS Basics Very Simple Tutorial
- Disabling right click menu using javascript Enhanced Version
- Add to favorites or bookmarking using javascript in firefox and internet explore [IE]
