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..
ReplyDeleteHimanshu
http://himanshugpt.wordpress.com/
@himanshugpt
ReplyDeleteThank You
Nice introduction!
ReplyDeleteNext 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.
ReplyDeleteThis 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
ReplyDeletenow 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
ReplyDeleteThank 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 [:-)]
ReplyDeleteThanx. I realised you can use the toggle()function to accomplish wat i wanted. Thanx and continue to keep us posted
ReplyDeletethank you. Its very helpful. I am one of your RSS subscribers. keep it up.
ReplyDeleteThank You Pahan
ReplyDeleteThank you, Nice Tutorial.
ReplyDeletethanks for the tutorial very straight forward
ReplyDeletehi dude if u know about some php so plz make login and registration form for me ?
ReplyDeletei know every one is want money but like as a friend can u make it ?
I'm From Pakistan
my e-mail : [email protected] thnx
For an HTML element like the following :
ReplyDeleteHello
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...
ReplyDeletekeep doing this good job....
very nice...
ReplyDelete@Hardik Shah
ReplyDeletejquery DOM elements
$(body), $(img) etc
$("#idname")
$(".classname")
thanks Good
ReplyDeletejquery making me loving it...
ReplyDeleteIt's a good post for beginners to jquery, Thanks for post.
ReplyDeletevery very good site and very helpful
ReplyDeletethanks buddy u r doing appreciative job really helpful.
ReplyDeleteVery helpful to beginners. Thanks!
ReplyDeleteI'm very amazed with your posts, but i don't know where i should start at. Are you have javascript basic tutorial? sorry for my bad english
ReplyDeletewhere did you get the "box" in last function? thanks
ReplyDelete