Jquery Basics Series -1
Wall Script
Follow Me:
Wednesday, October 28, 2009

Jquery Basics Series -1

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.

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.  Live Demo
<script type="text/javascript">
$(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>

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>



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>
<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>
<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.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


25 comments:

  1. Well this was a good to start with.... easy and catching..

    Himanshu
    http://himanshugpt.wordpress.com/

    ReplyDelete
  2. 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.

    ReplyDelete
  3. 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

    ReplyDelete
  4. 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

    ReplyDelete
  5. @Lemein

    Thank you! I had given basic example about Click() element. I will discuss more about Click() on basics series 2

    ReplyDelete
  6. Thanx my brother, it was a good intro... i am waiting for basic series 2 [:-)]

    ReplyDelete
  7. Thanx. I realised you can use the toggle()function to accomplish wat i wanted. Thanx and continue to keep us posted

    ReplyDelete
  8. thank you. Its very helpful. I am one of your RSS subscribers. keep it up.

    ReplyDelete
  9. thanks for the tutorial very straight forward

    ReplyDelete
  10. 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

    ReplyDelete
  11. 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 .. ?

    ReplyDelete
  12. Its an excellent post to start learning jquery...
    keep doing this good job....

    ReplyDelete
  13. @Hardik Shah

    jquery DOM elements

    $(body), $(img) etc

    $("#idname")

    $(".classname")

    ReplyDelete
  14. It's a good post for beginners to jquery, Thanks for post.

    ReplyDelete
  15. very very good site and very helpful

    ReplyDelete
  16. thanks buddy u r doing appreciative job really helpful.

    ReplyDelete
  17. Very helpful to beginners. Thanks!

    ReplyDelete
  18. I'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

    ReplyDelete
  19. where did you get the "box" in last function? thanks

    ReplyDelete

Make in India