Hello,

In this article I will not be discussing on how to write selectors and their usage in jQuery but will point you to two very useful tools which will help you in getting the right selector the very first time.But before that lets list down the various type of selectors that we can use in our jQuery code.Following is the list of various type of selector :-

• Class Selector
• ID Selector
• Universal Selector
• Attribute Selector
• Descendant Selector
• Pseudo Class Selector
• Pseudo Element Selector

Now there are plenty of articles on web on the previously mentioned selectors and their usage in jQuery code.Now its important to get the right selector to select an element in your webpage but what is even more important is to get the right selector.Well its very much possible that you can select a given element in your webpage using different combinations of selectors but each selector will have its impact on performance of your client side code.So it becomes very much important to get the right selector.

Consider the following declaration of a radio button control :-

<asp:RadioButton runat="server" id="myRadioButton"  CssClass="Myradio"></asp:RadioButton>

Now in your jQuery code you can write any one of the following expression to reference the previously defined radio button:-

• $('#myRadioButton')
• $('input[type=radio]')
• $('input.MyRadio')

But among the three declaration the first one i.e. the one which uses the ID (ID Selector) will give the best performance.So its always best to analyze your selector before jumping to your jQuery code.

Like promised in the beginning of the section I will provide you with two utilities which will help you to get the right selector.Lets see the first one :

SelectorGadget

Well as the name suggest its not actually a plug in but rather a BookMarklet.You can get this bookmarklet from its website and its usage is very well documented there.In general all you have to do is to activate your webpage(open your webpage in browser) and click on this bookmarklet which will open this gadget.Following are the steps that you have to follow in order to make use of this gadget:

• Click on the element for which you want the selector.
• Once clicked that element will be highlighted in green color. And other elements on webpage which matches this selecter will be highlighted in Yellow color.
• If the selector selects more element than required then you can remove their selection by clicking them and thus their color will turn from Green to Red
• Fore more details on this Gadget you can refer to the following link :- SelectorGadget

FireFinder

FireFinder is not as sophesticated as SelectorGadget but still its a nice tool which will help you in increasing your knowledge on selectors and overall DOM element structure.And how its going to do that , simple it requires the user to write the selector and then based on the selector it will highlight the element.FireFinder is a plugin for Mozilla which works in coordination with very famous Mozilla add-on called FireBug.Once this addon is installed it will come as a seperate tab in FireBug.In FireFinder the developer has to write the selector and then FireFinder will highlight the corresponding element.You can download this addon from the following url :- FireFinder

Now since you have got two components in your toolbox which will help you to get the correct selector , what should be the preferred way of their usage.I will suggest you to first use FireFinder to write the selector using your knowledge and then match your selector with the one that is generated by SelectorGadget.SelectorGadget is optimized to give the best selector and thus by comparing your selector with that of SelectorGadget you can come to know what peice of knowledge you are missing in overall understanding of DOM and CSS.

I hope you have enjoyed the overall article and will kickstart your journey with these add-ons.