Hiren Sharma

jQuery Selectors: Part I

I am pretty sure that after reading my previous post, now you are familiar with the term Jquery Selectors, so now it’s time that we talk about them in detail. Jquery Selectors absolutely have no limits, you can use any combination as per your requirement. In fact you can write one of your own and use it in your project. But for now let’s begin with the basics.

Based on the fact that jQuery uses css-like syntax while writing selector, we can classify Selectors primarily in three categories: Id, Class and Element.

1. Id Selector

You can simply assign an ID to any DOM element and then simple use the same ID to capture the element in jQuery. Jquery engine starts traversing through the DOM elements, based upon the ID that you wish to capture and as soon as it finds it, the traversing stops there itself and result is returned to the calling function.

Syntax: $(“#id-of-the-element”)

Code Snippet

Html File:
<div id="div1">This is Div1</div>
<div id="div2">This is Div2</div>
<div id="div3">This is Div3</div>

Jquery Code:
// event Fired when all DOM elements are loaded
$(document).ready(function() {
alert($("#div2").html()); // Alert the innerHTML of div with ID: div2
});

This will give the result as “This is Div 2”.

Yes its as simple as it looks, you simply need to use the # (hash) operator along with the ID and that’s it, Its done.

See above script in action here.

2. Class Selector

There is one more way you can select an element using their class name. You often want to select elements based on their class name rather than IDs, like if u want to selected multiple elements at once than instead of assigning a different IDs to them and writing individual selectors for it, its better to assign them a common class and use it.

Class selector is used by using simple . (dot) operator like in examples given below

Syntax: $(“.class-of-the-element”)

Code Snippet

HTML File

<div class="first-class">First Div with Element</div>
<span class="first-class">First Span with Element</span>
<div class="second-class">Second Div with Element</div>


Jquery Code

$(document).ready(function(){
alert( $(".first-class").length ); // Number of Elements having class "first-class"
});

This will Give the Result as 2.

See above script in action here.

3. Element Selector

As the name suggests, you simply need to specify the DOM element and that’s it. There are times when you want to perform same action on number of Divs or span or any input elements, in such case either you assign them a common class or you can use element selector to selected them all at once.

Syntax: $(“Dom-element-type”)

Code Snippet

HTML File

<input type="text" id="textbox1" />
<input type="text" id="textbox2" />

Jquery Code
$(document).ready(function(){
$("input").css("width", "300px"); //Set css property "width" to "300px"
});

This will simple set the width of all input elements to 300px.

You can see it in action here.

Selector Efficiency

Well, if I were to compare above three selectors, i would say ID Selectors works the fastest and then the Element Selector and finally the Class Selector.

But what will happen if our HTML document is extremely large and the element we wish to capture is kept at the end or in the footer of the page, even our ID selector won’t perform well in such case. So we overcome this problem by specifying the context for that particular element.

Context itself is another jQuery Object which specifies the region on the page in which the element should be searched for, So Jquery won’t search the whole document. Context further can have it’s own context and so-on.

Syntax: $(“selector”, $(“context”));

Html Code
<div id="header">
<span class="parent">Header
</span>
</div>
<div id="body">
<span class="parent">Body
</span>
</div>
<div id="footer">
<span class="parent">Footer
</span>
</div>


Jquery Code
$(document).ready(function() {
$(".parent", $("#header")).css("background-color", "red");
$(".parent", $("#body")).css("background-color", "green");
$(".parent", $("#footer")).css("background-color", "blue");
});

If you observe properly, i am using the same selector in these three different context to capture three different elements. So we can say that, not only the context increase our selector efficiency but they also makes our selector more powerful in terms of precision.

See this Example in action here.

Tips for writing Efficient Selector

1. Try using ID Selector wherever possible as these are the fastest.

2. Use Context wherever possible

3. Try using Element and class selector wherever possible. Like $(“div.dummy”) will select only the “DIV” elements with class “dummy”

Conclusion
Well now you know how to write basic selectors and how you can increase their efficiency. Now you guys go and practice these yourself. Soon I’ll be discussing Selectors in detail and then we will talk about Advanced Selectors, till then enjoy reading.

— To your Coding Success