Jquery Basics Part-1 How to add jQuery to your website
Jquery is an awesome javascipt library, it’s help you for developing dazing web projects.
Actually jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript
How to add jQuery to your website
Installing
You can download jquery.js file form jquery.com.
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.
<script type=”text/javascript“>
$(document).ready(function()
{
alert(‘Welcome phpzag.com Jquery Basic lesson ‘);
});
</script>
Similar as previous script.
<script type=”text/javascript“>
$(function()
{
alert(‘Welcome phpzag.com Jquery Basic lessons ‘);
});
</script>
Run this when the whole page has been downloaded.
<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.
DOM – Document Object Model
Selectors
-> Select DOM elements eg: $(‘h1′) ,$(‘div’), $(‘li’)..
-> Select ID : $(‘#id_name’)
-> Select Class : $(‘.class_name’)
Structure $(selector).click().
<script type=”text/javascript“>
$(function()
{
$(‘#button_action‘).click(function()
{
alert(‘Button Clicked ‘);
});
$(‘.link_action‘).click(function()
{
alert(‘Link Clicked ‘);
});
});
</script>
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>
Jquery Basics Part-2
Follow @phpzag
salutations from across the ocean. excellent blog I shall return for more.