How to add jQuery to your website
Jun 19, 2013, by admin
jQuery :
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
How to add jQuery to your website
<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.
<script type=”text/javascript“>
$(document).ready(function()
{
alert(‘Welcome Bugtreat.com Jquery Basic lesson ‘);
});
</script>
Similar as previous script.
<script type=”text/javascript“>
$(function()
{
alert(‘Welcome Bugtreat.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.
$(selector).function(parameters);
DOM – Document Object Model
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(‘Button Clicked ‘);
});
$(‘.link_action‘).click(function()
{
alert(‘Link Clicked ‘);
});
});
</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>
