Page 1 of 1

jQuery for Beginners - Syntax and Functions Rate Topic: ****- 6 Votes

#1 Fungle  Icon User is online

  • D.I.C Regular
  • member icon

Reputation: 249
  • View blog
  • Posts: 337
  • Joined: 06-March 10

Posted 18 January 2011 - 12:25 PM

*
POPULAR

Welcome to a tutorial on jQuery for absolute beginners, This tutorial is designed for people who perhaps know HTML and CSS and want to broaden their horizons but don't know where to start.

Oke doke, We're going to need some form of virtual notepad and a browser [Anything modern, Highly discourage using IE for anything...]

Ok, If you've never done any Javascript before then this is kind of confusing but bear with me even though it looks messy first you'll get the hang of it and before you know it you'll be having little Javascript babies running around.



Events
Events in JS and jQuery are very simple, You can use two types, HTML markup to call methods, Or make the event in JS which is a lot neater and easier to do really...

So, This is how we're going to go, Lets make a click event for an element, here is a sample:
$("#result").click(function () {

});



Ok, Here we are identifying that when the HTML element which as an ID or Name of "result" and then providing a handler for the .Click event. After this we are declaring what is going to happen when the event triggers, for example
$("#result").click(function () {
$(this).hide("slow"); // Hide it slowly!
});



Ok, You may have noticed a strange word in the code, "this". The "this" is basically referring to the result element that we defined in the method, it is a much better way of referring to elements within a function, as it saves you time from re-writing all the element names over and over again and wearing out your keyboard...

But remember!
The keyword for "this" will change depending on where you are using it, so whenever you use it make sure that you use it in the right context.

Anyway, here, We used the jQuery library to call the hide method. So when the element for result is clicked, it will hide slowly! Easy!.

Kay.... So what if I want to make preloaded content but... easy....
Well using jQuery it is very easy, Lets say we have three tabs. These tabs are called tab1, tab2 and tab3. we also have the divs for the content and these are called one, two and three.

I know they aren't very imaginative but bare with me

Right, Before we do ANYTHING lets plan and think about this logically, Using the simplist way possible, we just want when tab1 is clicked, we want to hide the other two and show the right content for the tab.

But... when the page is loaded it will all be visible! So we'll be needing to use the document.Ready
event to hide them on start up.

Ok so lets set about getting this code done, We won't use internal JS because that's just like rolling around in mud and looks very ugly...

So lets make a file called navigation.js ^^

But wait!
We need to link the jQuery library if we're going to do anything with it right? so lets add this to our HTML inbetween the <head> </head>tags
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript">



Ok now we've done that, We can set about our jQuery code, lets make our document.Ready event first like so:

$(document).ready(function(){ 

});



What document.Ready means is similar to the name: "When the Document (Meaning our Webpage) is ready, Do this!".

The document.ready function is one of the most important parts in jQuery and Javascript because it gives us the basis for the rest of our code, because all of our code goes between the method, it means that our code is loaded whenever the page including the images are loaded.

So basically, Without this it means we can't do much without it for example, using a click function with jQuery would be pointless without document.ready it wouldn't work!

Great.. we have an empty load function hooray! so lets hide our two other peices of content first like so

$(document).ready(function(){ 
$("#two, #three").hide(); // Hide the other two tabs on load of the page
});



Ok that's all good, But now we want to be able to see those too right? lets add a click event inside it, Like so:

$("#tab1").click(function () { // Click event for the Navigation Tab 1
      $("#two, #three").hide("slow"); // Hide tabs 2 and 3
	  $("#one").show("slow"); //  Show the corresponding content for Tab 1
    }); // End Tab One Click



See? It is very simple, and all you have to do is repeat it for the different tabs, hiding and showing the correct content!

Done it? Then don't forget to link in your navigation.js file to your html, again between the head tags, you would put something like this:
<script type="text/javascript" src="navigation.js"></script>


Useful jQuery Syntax
Here are a few examples of the syntax that jQuery uses, They are quite straight forward:
 $("#element") 
will address an element
and the Syntax for a method would be like this:
 $("#element").method("parameters"); 


an if statement would look like this:
 if(something is true){
          // do something
        }



I will explain the
});

For you, First, We need to have a closing curvey bracket for the one we opened so that goes first
Next, we need to close the "(function()" part, so we put a ) after that.
Then to end the line, we put a semi colon.

Declaring Variables
Naturally, In..pretty much all programming languages, variables play a big role and in javascript it's easier than others in some ways.. For example everything is a var in Javascript easily to be able to declare it like so:

var Egg = "broken";



And there you have it, The egg is broken.

Now we've broken the egg, That's actually pretty much it for variables in Javascript for now atleast ^^

Easy huh? That's all for this tutorial! Here are some useful links to find out some more information:

jQuery Documentation: http://api.jquery.com/
Google: http://www.google.com
jQuery help forum: http://www.dreaminco...rum/105-jquery/

I hope you learnt something today, and that now you know basic syntax and functions you can get to grips with this brilliant library.

Is This A Good Question/Topic? 12
  • +

Replies To: jQuery for Beginners - Syntax and Functions

#2 Sergio Tapia  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1251
  • View blog
  • Posts: 4,168
  • Joined: 27-January 10

Posted 18 January 2011 - 01:24 PM

This is definitely something I was looking for. Thanks a A LOT for writing this up, really great stuff.

I hope you write some more! :)
Was This Post Helpful? 0
  • +
  • -

#3 Curtis Rutland  Icon User is online

  • (╯□)╯︵ (~ .o.)~
  • member icon


Reputation: 4312
  • View blog
  • Posts: 7,467
  • Joined: 08-June 10

Posted 18 January 2011 - 03:39 PM

Question:

Here you say:

Quote

Ok, Here we are identifying that when the HTML element which as an ID or Name of "result" and then calling the .Click event, After this we are declaring what is going to happen when the event triggers, for example


Are you actually "calling" the event, or are you adding/providing a method to be invoked when that event happens?
Was This Post Helpful? 0
  • +
  • -

#4 Fungle  Icon User is online

  • D.I.C Regular
  • member icon

Reputation: 249
  • View blog
  • Posts: 337
  • Joined: 06-March 10

Posted 18 January 2011 - 04:00 PM

View PostinsertAlias, on 18 January 2011 - 10:39 PM, said:

Question:

Here you say:

Quote

Ok, Here we are identifying that when the HTML element which as an ID or Name of "result" and then calling the .Click event, After this we are declaring what is going to happen when the event triggers, for example


Are you actually "calling" the event, or are you adding/providing a method to be invoked when that event happens?


Sorry if it isn't clear, But the idea is to give beginners and idea in terms of the syntax instead of the exactly terminology. All I am doing is adding a click handler.

This post has been edited by Fungle: 18 January 2011 - 04:01 PM

Was This Post Helpful? 1
  • +
  • -

#5 Shane Hudson  Icon User is offline

  • D.I.C Technophile
  • member icon

Reputation: 342
  • View blog
  • Posts: 1,286
  • Joined: 06-December 09

Posted 18 January 2011 - 04:01 PM

View PostinsertAlias, on 18 January 2011 - 10:39 PM, said:

Question:

Here you say:

Quote

Ok, Here we are identifying that when the HTML element which as an ID or Name of "result" and then calling the .Click event, After this we are declaring what is going to happen when the event triggers, for example


Are you actually "calling" the event, or are you adding/providing a method to be invoked when that event happens?


This is a very interesting thought, although you really are trying to pick holes in his tutorial aren't you!

I would presume that events such as .Click are default events for all elements, and so it is calling the event and not creating this. But I may be wrong.

Well done Fungle, a very good tutorial!
Was This Post Helpful? 0
  • +
  • -

#6 Curtis Rutland  Icon User is online

  • (╯□)╯︵ (~ .o.)~
  • member icon


Reputation: 4312
  • View blog
  • Posts: 7,467
  • Joined: 08-June 10

Posted 18 January 2011 - 04:05 PM

View PostShane Hudson, on 18 January 2011 - 05:01 PM, said:

This is a very interesting thought, although you really are trying to pick holes in his tutorial aren't you!


Not at all. I've never actually worked with jQuery at all, and almost no javascript, so I just wanted clarification.
Was This Post Helpful? 0
  • +
  • -

#7 Dogstopper  Icon User is offline

  • The Ninjaducky
  • member icon



Reputation: 2858
  • View blog
  • Posts: 10,963
  • Joined: 15-July 08

Posted 18 January 2011 - 04:12 PM

View PostFungle, on 18 January 2011 - 07:00 PM, said:

Sorry if it isn't clear, But the idea is to give beginners and idea in terms of the syntax instead of the exactly terminology. All I am doing is adding a click handler.


I changed your tutorial to specify it was an event handler.
Was This Post Helpful? 0
  • +
  • -

#8 pryogene  Icon User is offline

  • if (Leif.IsAwake) { Leif.Sleep(1/0f); }
  • member icon

Reputation: 35
  • View blog
  • Posts: 653
  • Joined: 30-June 09

Posted 19 January 2011 - 03:16 AM

Good job Fungle! I did say I could use this, and it's definitely made jQuery a little less scary for me. keep it up! +1
Was This Post Helpful? 0
  • +
  • -

#9 Tryparse  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 80
  • View blog
  • Posts: 193
  • Joined: 20-April 10

Posted 21 January 2011 - 08:22 AM

Nice to find a jquery tut that's easy to follow. Thanks!
Was This Post Helpful? 0
  • +
  • -

#10 kabuto178  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 130
  • Joined: 29-January 11

Posted 06 February 2011 - 08:43 AM

This was very helpful in understanding the basics thanx much!
Was This Post Helpful? 0
  • +
  • -

#11 petdev  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 01-April 11

Posted 01 April 2011 - 06:45 AM

Great tutorial. Very helpful! Much appreciated.
Was This Post Helpful? 0
  • +
  • -

#12 richmund12  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 38
  • Joined: 10-October 09

Posted 07 June 2011 - 09:44 AM

Great tut..! Thanks..

Suggestion though.. I think it would be much helpful if you could add the 'final' code at the end? I mean, some people might have it easier to understand if they are looking at the whole code. :)


Learned a lot!

Thank you,

richmund12
Was This Post Helpful? 0
  • +
  • -

#13 Fungle  Icon User is online

  • D.I.C Regular
  • member icon

Reputation: 249
  • View blog
  • Posts: 337
  • Joined: 06-March 10

Posted 24 July 2011 - 05:40 AM

As per request here is the code listing for Navigation.js.

$(document).ready(function(){
$("#two, #three").hide(); // Hide the other two tabs on load

$("#tab1").click(function () { // Click event for the Navigation Tab 1
      $("#two, #three").hide("slow"); // Hide tabs 2 and 3
      $("#one").show("slow"); //  Show the corresponding content for Tab 1
    }); // End Tab One Click
});



Change the click function according to tab clicked etc.

Here is a full snippet of it too: http://www.dreaminco...snippet5881.htm

This post has been edited by Fungle: 24 July 2011 - 05:42 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1