Hi Friends, if you really want to learn jQuery follow basic series on ProgrammingDumps. Jquery is an awesome javascipt library, it’s helpyou for developing dazing web projects. 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>
Jquery Code
Generally used script run this when the HTML is all ready. LiveDemo
<script type="text/javascript">
$(document).ready(function()
{
alert('Welcome
9lessons Jquery Basic Series');
});
</script>
Similar as previous script. Take a look at LiveDemo
<script type="text/javascript">
$(function()
{
alert('Welcome
9lessons Jquery Basic Series');
});
</script>
Run this when the whole page has been downloaded. Take a look at LiveDemo
<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 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 LiveDemo
<script type="text/javascript">
<body>
<include type='button'
<a href='#'
</body>
$(function()
{
$('#button_action').click(function()
{
alert('Hey
Button');
});
$('.link_action').click(function()
{
alert('Hey
Link');
});
});
</script>
<body>
value='BUTTON'
id='button_action'/>
class='link_action'>LINK</a>
Hide and Show With Click Event
Hiding and Showing the div tag. Take a look at LiveDemo
<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>
class="hide_box">HIDE</a>
<a href="#"
class="show_box">SHOW</a>
<div id="box"></div>
</body>
0 comments:
Post a Comment