Learning jQuery

by Ethan Kershaw
July 20, 2011 7:33 AM

Last summer, one of my first projects was a simple jQuery plugin. jQuery is a javascript library that allows for easy manipulation of elements on a page. It didn't seem easy at first though. That simple project took me about a week. Looking back, I could probably make that plugin in two hours tops. Something that has helped me learn jQuery is the online tool Visual jQuery.

Visual jQuery (http://api.jquery.com/visual/) is a command dictionary with a tree structure allowing you to find the right jQuery method for your task at hand. Once you select a method, you see a description of the method as well as the parameters it receives. There are also multiple examples showing you how the method works.

While I feel like I have a pretty good grasp of jQuery now, I still pull up Visual jQuery at least a few times a week. It seems I also learn something new every week about jQuery. Two little shortcuts I have found over the past week have drastically decreased the amount of code needed for a few tasks.

First, when you are looking for an element that has some specific text in it you do not have to loop through every element checking the .text() of it. Instead, simply using

$(".myClass:contains('the text you are looking for')");
will select any element with the class 'myClass' that has the shown text. So what used to take 3 or 4 lines of looping through a bunch of elements can now be accomplished with 1 line. I wish I had learned this months ago.

Second, when selecting elements there are some usefull criteria such as :visible, :selected, :first and :contains() as seen above. These can also be used with the .is() method. To check if an element is visible, you can simply use 

$("element").is(':visible');
Since the .is() method returns a boolean value, it is most useful in conditional statements.

I learned both of these time/code saving shortcuts on Visual jQuery. Not only is it a great tool to start learning with, its also great for continued exploration of jQuery.

Visual jQuery


Comments (4) -

Objectified Software Canada   7/23/2011 5:32:34 AM
Very informative, keep posting such good articles, it really helps to know about things Smile
PrecioLandia   8/9/2011 3:02:04 PM
Any recommended Jquery Tutorial for a total newbie?
Saskatoon Web Design   8/26/2011 5:49:19 PM
My learning curve with jQuery has also been lessened with Visual jQuery, it's a great tool. Like you, I still keep it open just in case. Good tip!
Business Process Improvement   8/16/2012 4:39:45 AM
This is nice post which I was awaiting for such an article and I have gained some useful information from this site. Thanks for sharing this information.

Add comment




biuquote
  • Comment
  • Preview
Loading