Hi Friends, if you really want to learn jQuery follow 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>
Related Links about Click Event
Magical Sign-up Page with jQuery and CSS.
How to Implement an Animation Effect Website with jQuery
Facebook like suggestions with jQuery content appears and disappears.
Well this was a good to start with.... easy and catching..
Himanshu
http://himanshugpt.wordpress.com/
@himanshugpt
Thank You
Nice introduction!
Next time maybe could format code snippets a little more (indentation). Personally, I use SyntaxHighlighter (http://j.mp/15xmoF)
Also, you might consider hosting your examples on JsBin (http://jsbin.com) to share w/ others and enable them to modify, play, tweak w/ your examples.
This is great. I'm just learning Javascript, and I've been trying to start with jQuery to learn how js libraries are handled.
This kicked me in the right. There's a lot of good info here for a 5 minute read :D
Hi timothy here, your greatest fan
now can you have the same link hiding and showing an element at the same time, after it is clicked for the first time it shows an element, after it is clicke for the second tme, it hides the element
@Lemein
Thank you! I had given basic example about Click() element. I will discuss more about Click() on basics series 2
Thanx my brother, it was a good intro... i am waiting for basic series 2 [:-)]
Thanx. I realised you can use the toggle()function to accomplish wat i wanted. Thanx and continue to keep us posted
thank you. Its very helpful. I am one of your RSS subscribers. keep it up.
Thank You Pahan
Thank you, Nice Tutorial.
thanks for the tutorial very straight forward
hi dude if u know about some php so plz make login and registration form for me ?
i know every one is want money but like as a friend can u make it ?
I'm From Pakistan
my e-mail : rlucky35@yahoo.com thnx
For an HTML element like the following :
Hello
Can I use $("div1") .. ? Are double quotes allowed .. ?
------------------------------------------
Also when in an "external .js file" I have :
function abc()
{
var a;
}
Does 'a' become a global variable .. ?
Its an excellent post to start learning jquery...
keep doing this good job....
very nice...
@Hardik Shah
jquery DOM elements
$(body), $(img) etc
$("#idname")
$(".classname")
thanks Good
jquery making me loving it...
It's a good post for beginners to jquery, Thanks for post.