Hi Friends, if you really want to learn jQueryfollow basic series on 9lessons. Jquery is an awesome javascipt library, it’s help you for developing dazing web projects.
In this tutorial I want to discuss very basic level jquery and working with Click() event.
In this tutorial I want to discuss very basic level jquery and working with Click() event.
How to add jQuery to your website
Installing
You can download jquery.js file form jquery.com.
<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>
libs/jquery/1.3.0/jquery.min.js"></script>
Jquery Code
Generally used script run this when the HTML is all ready. Live Demo
<script type="text/javascript">
$(document).ready(function()
{
alert('Welcome 9lessons Jquery Basic Series');
});
</script>
$(document).ready(function()
{
alert('Welcome 9lessons Jquery Basic Series');
});
</script>
Similar as previous script. Take a look at Live Demo
<script type="text/javascript">
$(function()
{
alert('Welcome 9lessons Jquery Basic Series');
});
</script>
$(function()
{
alert('Welcome 9lessons Jquery Basic Series');
});
</script>
Run this when the whole page has been downloaded. Take a look at Live Demo
<script type="text/javascript">
$(window).load(function()
{
alert('Loaded Whole Page including images)');
});
</script>
$(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 Wiki
Selectors
-> Select DOM elements eg: $('h1') ,$('div'), $('li')..
-> Select ID : $('#id_name')
-> Select Class : $('.class_name')
Working with Click() Event
Structure $(selector).click(). Take a look at Live Demo<script type="text/javascript">
$(function()
{
$('#button_action').click(function()
{
alert('Hey Button');
});
$('.link_action').click(function()
{
alert('Hey Link');
});
});
</script>
$(function()
{
$('#button_action').click(function()
{
alert('Hey Button');
});
$('.link_action').click(function()
{
alert('Hey Link');
});
});
</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. Take a look at Live Demo
<script type="text/javascript">
$(function()
{
$('.hide_box').click(function()
{
$('#box').hide();
});
$('.show_box').click(function()
{
$('#box').show();
});
});
</script>
$(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>
No comments:
Post a Comment