Tutorials

New to jQuery? Don’t be Scurred…

Tags: Beginner

I have been getting familiar with jQuery recently and the more I get into it, the more I’m impressed with it. When I first heard about jQuery I was definitely intimidated by it since I had no previous background with javascript, but I soon realized once you get the basics down its not very hard to pull of some neat effects.

Of course, to master anything it takes dedication and hard work, but for those who are on the sidelines looking in, don’t be scared to get familiar with it. Start today as I share some of the easy tips and tricks that I have picked up along the way. For those who have no idea what jQuery is, go and read up on it here.

1. :first and :last Selectors

This comes in handy especially when creating something that repeats itself and you want to specify a style for the first and last element only. I commonly use this for navigations where I specify the bevel effect, or when I am creating columns and need to ditch the margin on the last column.

jQuery
\\Add a Class on the First and Last Element
	$("ul.column li .block:first").addClass("first"); //Add a class name of "first" to the first selector
	$("ul.column li .block:last").addClass("last"); //Add a class name of "last" to the last selector

CSS
.first {background: #ffdbdb;}
.last {
	margin-right: 0;
	background: #c4dcff;
}

References

• jQuery Selectors – First
• jQuery Selectors – Last

2. :even and :odd Selectors

This really came in handy when I was designing the resource page on DesignBombs.com. It took me one line of jQuery and the list of articles became much easier to scan. Before learning this technique, I was using PHP to specify my odd/even rows which for me took a lot longer to code.

jQuery
//Specify Even and Odd Selectors
	$("ul li:even").addClass("even");
	$("ul li:odd").addClass("odd");

CSS
.even {
	background: #fff;
	border: 1px solid #ccc;
}
.odd { background: #ccc; }

References

• jQuery Selectors – Even
• jQuery Selectors – Odd

3. Ditch the target=”_blank” – XHTML Compliant

I first learned about this from Jin a little while ago when he wrote an article about how to write XHTML Strict code. I still haven’t implemented this on my own blog, but I have been using it since on my newer projects.

//Open External Links in New Window
	$('a[href^="http://"]')	.attr({ target: "_blank" }); //Makes all links open in a new window
	$('a[href^="http://"].target')	.attr({ target: "_blank" }); //a link with the class of "target" opens in a new window

4. Adding a Class/ID to an Element with toggleClass

As front-end Ninjas, we love having the control of being able to add and remove classes/IDs on our elements when the right scenario comes up. Before I learned jQuery, I always had my programmers take care of these effects, but now I can handle them without bothering anyone. Sweet!

jQuery
//Toggle Class on Click
	$("ul.col3 li .block").click(function() {
		$(this).toggleClass("active");
	});

CSS
.active {background: #ccc;}

• jQuery Attributes – addClass
• jQuery Attributes – removeClass
• jQuery Attributes – toggleClass

Conclusion

Now that you got a taste of some real simple jQuery tricks, go and experiment with some of your own projects!

Related jQuery Resources

• Web Designer Wall – jQuery Tutorials for Designers
• Queness – Useful and Handy jQuery Tips and Tricks
• Learning jQuery – jQuery for Beginners
• jQuery Essentials Presentation