This is the first part of our new series walking you through the process of learning the hugely popular JavaScript library jQuery from scratch. We’ll start slowly and each week add some more knowledge to your skill set and this will lead us on to doing much cooler stuff with the library. This series is aimed at people who have a strong knowledge of HTML and CSS, so if you don’t have a working experience of those two languages I suggest you learn those before coming back to this.

What is jQuery?

jQuery aims to make JavaScript more accessible for the less ‘hardcore’ developer. For example, there are many cross browser issues with regular JavaScript that jQuery deals with – it does a lot of work behind the scenes to make sure your experience is much more simple and enjoyable. Instead of spending time on the monotonous, boring cross-browser code, you can get straight to work with your cool effects, safe in the knowledge that jQuery is sorting everything out for you.

In Today’s Lesson

Today we’ll start at the very beginning. First we’ll look at how to add jQuery to your pages so you can use it. We will then look at how we select and interact with elements on the page, and then for kicks we will make an element slide across your page. Each week will add a new layer on top of the last, so I suggest you do follow this through. Remember, if you have any questions, please leave them in the comments and I’ll answer them in next week’s edition. So, with no further ado, let’s get started!

Including jQuery

Before we can start using jQuery’s functions we need to include the source, that is the file containing the code which makes jQuery tick. You can do this in two ways. Firstly, you can download a copy from jQuery and include it like so:

 <script type="text/javascript" src="path/to/jquery.min.js"> 

If you do it this way, be sure to download the minified version, as it reduces the strain on your server.
The second, and prefered way, is to include it from Google’s Content Delivery Network, or CDN for short. There are two main benefits to doing it this way. Firstly, we can make sure we are always using the most recent version of the library, and secondly it means your server does not have to load the file and it takes up less bandwidth. To include it from the CDN we use similar code to above:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> 

That code will always load the most recent version of the library (well, until V2 is out), but you can be much more specific if you wish to and load a certain version:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> 

Lets write some Code!

Now we now how to add jQuery to our page we can get writing some! You should include jQuery using one of the two techniques covered above just below the end tag on your page. This way, the file is loaded last, meaning that all the HTML content is loaded first, so we make sure the page’s look & content is loaded first. Below that, add the following code:

 <script type="text/javascript"></script> 

Inside those tags is where we will write our code. Before we start manipulating and interacting with elements, we will learn how to select elements. If you know CSS, it’s really easy. To select an element with jQuery, we use the $ symbol followed by parenthesis: $(‘your selector goes here’). That selector can be any valid selector, including new CSS3 selectors. For example, to select all divs on my page, it’s as simple as:
$(‘div’). A few more examples follow:

 $('div p') //selects all paragraphs that exist within a parent div. $('#something') //selects the element with an id of 'something' $('.something') //selects the element(s) with a class of 'something' 

You can be as complex as you like: (Note: in the next article we will spend a lot of time looking at much more complex selectors)

 $('div p#something a') //selects all anchor elements within a paragraph with an id of 'something' within a parent div. 

jQuery’s selector engine is pretty much limitless and in the coming weeks you will learn to harness this and take full advantage. For now, lets keep it simple. In your page, create a new <div> element:

 <div id="something"> <p>this is some text</p> </div> 

And also add some CSS to it:

 #something { width: 200px; height: 200px; background-color: red; color: white; border: 4px solid black; margin: 100px 0 0 80px; } 

You should be left with something like this:

Make it Move

To end this lesson, we are going to make the div move slowly across the page. Firstly, using our selector knowledge, we can select it:

 $('#something') 

You could equally use $(‘div’) if you like, but personally I like to be as specific as I can. Once we have the element we can use jQuery’s animate() function to run our animation:

 $('#something').animate({'margin-top': '300px', 'margin-left': '400px'},1000); 

The animate function takes 3 main arguments, but one of them is optional:

 .animate(things to change, speed, callback); 

‘Things to Change’ are the properties of the element which we want to animate, in our case it’s the top and left margins. The way we add multiple properties is like so:

 .animate({'param': 'value', 'param2': 'value'}, speed, callback) 

After each set, you add a comma, apart from after the value of the very last property. ‘Speed’ is the speed at which the animation will run, or: ‘how long will it take before the animation is complete?’. This is in milliseconds (1000 = 1 second). ‘Callback’ is a function that runs after the animation is run. For now we are not using it, but it’s something we will utilise in the future. So, back to our animate() code:

 $('#something').animate({'margin-top': '300px', 'margin-left': '400px'},1000); 

We change the top margin of the element to 300, from 100, and the left margin is also increased. Open this page, and you should see a smooth animation over the course of a second: And there you have it! I hope you’ve enjoyed your first crash course in jQuery. Any questions, leave them in the comments and I’ll address them in the next post.