Selectors, Animation, and AJAX – jQuery Tutorial And Examples (Part Two)

By now I’m sure you have grasped at least the basics and simplicity of the jQuery library. Now it’s time to move on to some more in depth and practical techniques. jQuery isn’t just for hiding and showing content as we saw in the first part of our series, it can also perform many powerful tasks for us with just a few lines of code.

For part two of our jQuery series, we will have a look at some special selectors, the animation method, and simple AJAX calls. Be sure to check out the demo for each section for an idea of how you could implement some of these ideas and scripts!

Special Selectors

We have learned that selecting elements with jQuery is very similar to selecting elements with CSS. For example, say we wanted to select all paragraphs within a certain div, we could do something like this:

[html]
$(function(){
$(‘#my_div p’).click(function(){
//your code here
});
});
[/html]

This is all fine and dandy for simple selections and manipulation. But what if we wanted to get more specific or use a different selection technique? Luckily, jQuery has some great built in functions for selecting special elements.

The :first method

Let’s say that we want select the first and only the first paragraph of a certain div element and manipulate the styles. We could give that paragraph a special class, but what if we couldn’t/didn’t want to do that? This is where the helpful ‘:first()’ method comes in. We can accomplish our goal like so:

[html]
$(‘#dummy_section p:first’).css(‘color’, ‘blue’);
[/html]

Simple right? Moving on…

The :not method

jQuery 1.3 was released with a special new selector method, called the ‘:not’ method. The :not method does what it sounds like it does. It is used to select certain elements that do not contain other elements. In other words, say we have an unordered list with a few list-items tags. We want to select all of the list-items that do not have a class of special_class. This is accomplished as seen below:

[html]
$(‘#dummy_section ul li:not(.special_class)’).css(‘color’, ‘red’);
[/html]

Above, we target the unordered list. Select the list-items that do not contain the special_class and alter the CSS color property. The :not method can be extremely helpful when working with external data and third party API’s.

The :eq() method

The :eq method is a zero based index method to match the number given. Sound tricky? It’s not. If you have ever programmed before you will immediately understand this. Basically, inside of the :eq() method, we use a number for the element we want to match. If we want to match the third paragraph, we would use:

[html]
p:eq(2)
[/html]

Why two? Because the counting starts at zero, so the first element would be 0, the second would be 1 etc. Let’s look at an example:

[html]
$(‘#dummy_section p:eq(2)’).css(‘color’, ‘green’);
[/html]

Above, we select the third paragraph within the div named ‘dummy_section’ and alter the CSS, that’s all there is to it!

Be sure to check out the selectors demo to see all of the examples in use!

Selector Resources

• jQuery Selectors
• The :first filter
• The :not filter
• The :eq() filter

Easy Animation

Not only does jQuery come packed with special effects such as ‘hide()’ and ‘show()’, but it also comes with the custom animate() method. The animate method allows us to define almost any type of custom animation, including how long the animation should last.

Link Nudge

A popular example of using the animate method is the ‘link nudge effect’ where the links are slightly animated when moused over. Say we have an unordered list and we want to link nudge the links within this list. Example below:

[html]
$(‘ul li a’).hover(function() { //mouse in
$(this).stop().animate({ paddingLeft: ’10px’ }, 200);
}, function() { //mouse out
$(this).stop().animate({ paddingLeft: 0 }, 200);
});
[/html]

Above, when the links are hovered, we change the left padding to 10px over a speed of 200ms. When the user mouses out, the padding is changed back using the same speed.

Image Effect on Hover

Lets have a look at another practical usage of animate. Say we have an image, and we would like the image to have a nice effect when hovered. We want the image to have 80% opacity by default, and when the user mouses over the image we want to change the opacity to 100% over a certain amount of time. This can be used to for a nice effect on image galleries or ad banners. he code below accomplishes our task.

[html]
$(‘.hover_image img’).css(‘opacity’, 0.8).hover(function(){
$(this).stop().animate({opacity: 1}, 500);
}, function(){
$(this).stop().animate({opacity: 0.8}, 500);
});
[/html]

Above, we change the default opacity to 80%. We then set an event for when the user mouses over and out of the image, changing the CSS accordingly.

Be sure to check out the animate demo we have setup to see all of the examples in action!

Simple AJAX

For the last part of our article, lets see how simple AJAX calls can be with jQuery. For our example, we will have an external HTML file with some content that we want to display. We only want to load this file and display it’s content when the user clicks on a certain link, thereby decreasing our initial page load. It is as simple as using the .load method, which automatically uses a GET AJAX request by default. Lets look at how we would do this.

[html]
$(‘p.load_it a’).click(function(){
$(‘#demo_content’).load(‘external_file.html’);
return false;
});
[/html]

When our link within the paragraph class of ‘load_it’ is clicked, the file named external_file.html will be loaded into the div with an id of demo_content. That’s all that is required for basic AJAX loading!

Be sure to check out the AJAX demo to see this example in action!

AJAX Resources

• jQuery AJAX Docs
• jQuery load method

That’ll do it for now, hopefully you have improved your jQuery skills or learned something new. Let us know if you have any comments or questions in the comment section below. Happy coding!