Basics of jQuery - Part 2 (Selectors in JQuery)

This is part 2 of Basics of JQuery.

In part 1 of this series we discussed the purpose of using JQuery.

This article discusses the following topics:

1. Introduction to JQuery Selector
2. Different types of Selectors
   
   
   • Id selector
   • Element TagName selector
   • Class selector
   • Attribute selector
   • Attribute value selector
   • Case insensitive attribute selector
   • Input and :input selector.
   • Checked selector
   • Selected selector

In a CSS article we discussed the purpose of using selectors. In order to select and manipulate the HTML element using its id we used id selector and for class we used class selector. Just like that in JQuery we use the same selector to manipulate the elements.

Let’s look at each of the selectors one by one with a help of a demo.

Id Selector

To select element using its id, we use Id selector.

Demo

In this demo we will see how to select and manipulate an HTML element using its Id.

First thing we need to do is add a textbox control and a button control.

In the above HTML element, the id of textbox control is txtOne and id of button is btn.

Now what we want to achieve here is that whenever a user clicks the button, a welcome text should be displayed in the textbox.

Add the following JQuery file reference in the head section your document.
Write the following JavaScript code.
We have already discussed the purpose of $(document).ready() function in the previous article.

In CSS whenever we want to select an element based on its id, we used #idName whereas in JQuery we use JQuery() function or simply $() and pass an id prefixed with #.



Pass the button id as a parameter in the JQuery function and on this function invoke the click event on which create a new anonymous function.
Whenever a user clicks the button, we want to display a greeting message. So, write the following inside the anonymous function block.
Entire HTML look like this.
Run the application



Click the button.



Useful Tips

1. JQuery(‘#idSelector’) uses the JavaScript’s document.getElementById() function.
   
   
2. The id of each and every element in your HTML document must be unique. If there are more than one element having the same id then JQuery #id selector returns only the first element.
   
   1. <body>
   2. <input type="text" id="txtOne" />
   3. <input type="text" id="txtOne" placeholder="text box two" />
   4. <input type="button" id="btn" value="Click" />
   5. </body>

   Currently in our document we have two textbox with a same id.
   
   Let’s see what will happen if we click the button.
   
   
   
   In the output above, the JQuery #id selector returns only the first element.
   
   Note
   
   All the selector returns a collection of elements. And since id selector returns only the first element back, so it will have only one element in the collection.
   

3. If the element with a given id is not found then JavaScript’s document.getElementById() function throws an error whereas the #id selector JQuery will not throw any error.
   
   
4. Use document.getElementById() over JQuery #id selector unless you need some extra functionality provided by the JQuery object as document.getElementById() is faster than JQuery #id selector.

Element Selector or TagName Selector

To select an element or elements by tag name, use JQuery Element Selector.

Syntax –

$(‘ElementName’)

Demo

In this demo we will see how to count and retrieve total td present in a table, we will also see how to change the background color of all the table row and in addition to that we will see how to display the table content in an alert window.

Create a new HTML document and write the following –

Run the application



Example 1

In this example we will see how to count the table td present in the above table.


Example 2

In this example we will display all the data in an alert window.


Example 3

In this example we will see how to change the background color of the table rows.


Example 4

In this example we will create two tables and we will see how to change the background color of one and both the tables using even and odd selector.



The first table have an id of t1 and second table have an id of t2.

Now let’s see how to change the background color of both these tables.

Let’s say our requirement is such that we want to change the 1st and 3rd row color to red and the rest of the rows to yellow. To achieve this functionality we can use even and odd selector.



In the output above, both the tables works exact the same way. But what if we want only the second table background color to be manipulated. Is it possible to achieve that functionality? Absolutely.


Class Selector

To select one or more than one element using their css class name, class selector can be used. In JavaScript for selecting and manipulating an element using its class name we use the native document.getElementByClassName function. In JQuery we use JQuery “.class” selector.

Demo

Create a new HTML document and write the following within the body section.
Save and run


Currently we have five paragraphs out of which the three paragraphs are inside a div section i.e. paragraph two, three, and four. Paragraph two and three have a same class name.

Now let’s see how to select and manipulate all the above elements using JQuery.

Example 1

In this example we will change the background color of paragraph one.

Write the following JavaScript within the head section of your HTML document.
Run the application



Example 2

In this example we will see how to change the background color of p1 and p2.
Note: To select and manipulate more than one element, we specify class name each separated by comma(,).

.p1, div .p2, where .p1 is a class name of paragraph one and div .p2 is like a descendent selector which means inside the div section there is an element with a class name p2.

Run the application



Attribute and Attribute value selector

The Attribute Selector of JQuery is used to select elements that have specific attributes.

The Attribute Value Selector of JQuery is used to select elements that have a specified attribute values.

Syntax

$(‘[AttributeName]’)
$(‘[AttributeName = Value]’)

Let’s look at some of the examples of it.

Example 1

In this example we will see how to select and change the background color of three paragraph elements using its attribute and in order to do that we need to create a new HTML document.

Add three paragraphs in the body section.
Add the following reference to the JQuery file in the head section.
Write the following JQuery code.
Note: It is mandatory to wrap the attribute name inside the square bracket.

The entire HTML look like this.


Example 2

In this example we will see how to change the background color of the above three paragraphs using its attribute values and in order to do that we need to make some changes in our script.
$('[title=p1]') where title is an attribute and p1 is a value of this title attribute.

As we know, in our application there are two paragraphs whose title value is p1. So, when we run the application the background color of those two paragraphs will change to orange.

Run the application



Example 3

In this example we will see how to manipulate only those paragraphs which is present inside a div section and in order to do that we need to make some modification in our body section.

Wrap the first paragraph inside a div section.
Write the following JQuery –


Example 4

In this example we will see how manipulate elements based on two attributes. In order to achieve it we need to make some changes in the body section.
At the moment, we have two attributes in the first two paragraphs i.e. title with a value of p1 and class with a value of p1 and p2 respectively.

Now in order to add a background-color or a border to the first paragraph we can use title attribute. But at present all the three paragraphs have title attributes. We can use attribute value but still there are two paragraphs whose value is same. So in order to add border to the first paragraph, we can specify two attribute with its values.
How does it works?
Add a border to an element whose title is p1 and class is .p1.



Now you might be wondering what will happen if we specify a comma between those attributes.
If you specify comma between the two attributes, it will be treated as OR.


Some important points to remember when working with Attribute Value selector.

Attribute Value Selectors can be categorized into following –

Equal Selector [title=”value”] => The EqualTo Value Selector can be used in a situation where you want to manipulate only those element which matches the specified attribute value.

Example
The above syntax states, fore-color will be changed for those elements whose title attribute value is equal to title1.

Output



Not Equal Selector [title!=”value”] => Not EqualTo Value Selector can be used in a situation where you want to manipulate only those element which does not matches the specified attribute value.

Example
The above syntax states, the fore-color will be changed for those elements whose attribute value is not equal to title1.

Output



StartsWith Selector [title^=”value”] => StartsWith Attribute Selector selects all the elements whose attribute value starts with a specified string and here the string is ‘value’.

Example
In the above HTML, the title value of the first two paragraph is title1 and title2. The title value of the last paragraph is 21.

Write the following JQuery.
In the above JQuery syntax, we are looking for only those title attributes whose value starts with t and once those elements are found, the CSS function will change the fore-color of those elements.

Entire HTML look like this.