enavu webdevmania tutsvalley psdestination
visit the enavu network
5 Comments Article Title Overlay Article Title

Simple Fast and Dirty Introduction to jQuery

Beginners jQuery tutorial. This will help you get your feet wet with jQuery. New to JavaScript? No problem.

I keep remembering the days when i use to be so scared of jQuery. Every time i would sit down with someone who was trying to explain how it works i would freeze and wonder what they are [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Beginners jQuery tutorial. This will help you get your feet wet with jQuery. New to JavaScript? No problem.

I keep remembering the days when i use to be so scared of jQuery. Every time i would sit down with someone who was trying to explain how it works i would freeze and wonder what they are talking about. But then i learned a little Java Script and that significantly improved my understanding of jQuery. So today i will do a quick and dirty introduction to the simplest and most important jQuery tasks that seem so hard.

Let’s start with the most important thing (at least to me) the onClick event handling with jQuery. If you do not know Java Script at all this tutorial is for you as well, i will be very clear on what you need to do. All that an onClick event does is trigger an event when there is a certain click on a page. For example when someone clicks on a link or even on any element in the page it can trigger an event. For this example i am going to use a div as our click event trigger. So let’s start off with the div that will be clicked:

Click Me Please

Before we can actually do anything with that div we need to add the jQuery library to the top of our page so lets add something like this:





I am using the direct link to the newest library but you can download the file and host it in your own website then call it with something like /js/jquery.js
Now we are going to add the actual click functionality:


Let me explain what all that crazy code does. First we start of with the document.ready function header don’t worry about this, you will always need to add it to your jquery code. Then we see the $(”.clickMe”) this may look scary but its EXTREMELY simple. The dollar sign stands for jQuery then inside the parenthesis you choose what you are going to be selecting, in this example we are seleting ANY element with the class clickMe we use simple CSS selectors, so if we wanted to select all paragraphs we would have “p” if we wanted to select all the ID’s named thisIsAnId we would do “#thisIsAnId” so it’s pretty straight forward so far. After we have selected whatever we want to select $(”.clickMe”) we have to do something with the element so here we choose the command .click(function() { }); what this will do is nothing except trigger an empty event when the element is clicked. The .click does a function when our element is clicked. So instead of keeping it empty i have added $(”.showMe”).show();  what that does is it selects an element (this can be a div or a p or whatever else has the class showMe) and it applies the show function on it. The show function basically makes a display:none; element display:block. Hence we have to add to our page:

This will show only after a click of .clickMe elements

So here is how this will look code wise:















Click Me Please
This will show only after a click of .clickMe elements

And here is the complete page sample for your viewing pleasure.

View Demo

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Related posts:

  1. How to make a completely reusable jquery modal window
  2. Easy Unobstructive jQuery Print Page Tutorial
  3. Top 10 jQuery Snippets (including jquery 1.4)
  4. jQuery and Ajax :) the simple designer way
  5. Simple Fast Easy make your website iPhone ready!

Did you absolutely LOVE this article... share it!

Comments

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting