jQuery Basics Part II

Asif Ahmed

In this post we will be exploring / reviewing the first 3 videos of the jQuery for Absolute Beginners Video Series. We will be examining what each video covers and also be looking at what some code snippets do. The full code will be available at my Github and hosted at Pagoda Box Engine Yard under the Orchestra PHP Cloud. Both Github and Engine Yard Pagoda Box require an account and I will be learning Github fully (only been using the GUI so far) in the future (I’ll have a post about Github next week). I’ll be learning more about Pagoda Box’s capabilities next week also. I had been trying to get Engine Yard to run for the past couple hours but it seems like there is a problem with their PHP cloud. After searching for alternatives it seems like Pagoda Box is a good place to host, and a solution that also works best with Github.

The first video of the series just goes over what jQuery is, what it can do, and where you can get it. In the first video we are also introduced to how jQuery should be structured and our first jQuery function.

$(function(){
$('a').click(function(){
$('#box').fadeOut('slow');
});
});

Every jQuery function, it seems, needs to go in between $(function(){ and }); so this is something we just have to memorize. This denotes that the document has been fully loaded and is ready to be dynamically changed by some jQuery function. One of the advantages of using jQuery is that you can use CSS selectors for your functions. Line 2 and 3 in our code snippet use CSS selectors. Line 2 means that every time an anchor link is clicked we should perform a function. Line 3 defines this function. Every time an anchor link is click we should get the element with the id “box” and fade it out slowly. An example of this function can be found here. If you click on “Click Me” you will see the red box fade out slowly.

The second video basically just introduces more simple functions. It introduces the “slideUp” function, which can basically make the red box disappear like it’s being pulled up by a curtain. It also shows us the “hide” function which will slowly decrease the height and width of the red box to nothing. “fadeIn” is the opposite of “fadeOut”, “show” is the opposite of “hide”, and “slideDown” is the opposite of “slideUp”. This video also shows us a little bit about changing the CSS of certain elements. $('p a').css('color','blue'); changes all anchor tags within a paragraph to blue. This functionality can be viewed again right here. If you click on “Click Me” all the anchor tags within a paragraph will turn blue, when they were red before.

The third video covers the animate method. The best way to learn this is probably to look at the following code snippet.

$('#box').click(function(){
$(this).animate({
"left":"300px",
"top":"100px",
}, 'slow');
$(this).animate({
'width':'50px'
});
})

Once the element with the id “box” is clicked, it will cause the box to animate slowly by moving away from the left side 300 pixels and moving away from the top 100 pixels. “px” stands for pixels. The box is moving right and downwards so it can be a little confusing that we are using left and top. We just have to remember that its moving away from the left and moving away from the top. After it is done with its first animation, the width of the box will become smaller also. We can observe the animation in action here. Click on the box and watch it do its crazy dance.