Saturday, November 26, 2011

Jquery Basics Series -1


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.

Jquery Basics Series


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 = jqueryselector 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">
$(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 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>
<a href="#"
class="show_box">SHOW</a>
<div id="box"></div>
</body>



0 comments:

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More