jQuery – Different Selectors

CodeProject

In previous articles, we have discussed about Content Delivery Networks(CDN), jQuery ready function, API documentation in jQuery etc. One of the another key thing we need to know in jQuery is Selectors.

What are Selectors in jQuery?

• Selectors allow page elements to be selected.
• Single or multiple elements are supported.
• A Selector identifies an HTML element/tag that you will manipulate with jQuery code.

1. Select Elements by ID in jQuery

The fastest type of Selector which  we can use with jQuery is Id Selector. Normally, in JavaScript, we use document.getElementByID to find a specific Id. In jQuery, it is more compact than that.

• Use # character to select elements by ID.
• Example: $(‘#myID’).
• The above Selector will select <p id=”myID”> element.

Let’s have an example of this. We will be using same example which we have used in the previous article.

While looking at the our web page, we can find that there are no div tags with an Id. So let’s add a new one with an Id of TestDiv.

Then let’s grab the HTML inside the div and show it in an alert box using Selectors. We can select the div using its Id. That is, $(‘#TestDiv’).

Go ahead and run it. We can see This is my text message in the alert box as expected.

Then let’s try to select the form by Id. We have a form with an Id of form1 which contains a table with 3 rows.

Display the HTML inside the form in an alert box, using Selectors.

While running the application, we can see the HTML of all the elements inside the form like tables, table rows etc. in an alert box.

---

2. Select Elements by Class in jQuery

• Use dot(.) character to select elements by class name.
• Example: $(‘.myClass’)
• The above selector will select <p class=”myClass”> element.

Let’s have an example of this. In our web page, we have 2 different div - Blue div and Red div. Some classes are applied to these div elements as well.

Let’s try to find the Blue div by Class Name and change the border color to Red.

Just go on and run it, we can see the red border is applied to Blue div.

But the problem here is, the Class Selector doesn’t care about whether it is a div, span or anything else. To prove this point, let’s add a new span below Blue div.

While running the application, we can see that, both div and span are highlighted with red border, as both of them are using BlueDiv class.

Can I specifically target div or span?

Absolutely. To focus div only, modify the code like below. you can write like $(‘div.BlueDiv’).

Now you can see that only the Blue div is highlighted with the given style.

Final thing is, we can select multiple elements together by Class Name. After specifying one class, we can put a comma(,) and write other class. The code is following:

While running the application, we can see that, red border is applied to all the elements which are using either BlueDiv or RedDiv classes.

you can specifically focus on div element as well, by writing the code as given below.

---

3. Select Elements by Attribute Value in jQuery

• Use brackets [attribute] to select based on attribute name and/or attribute value.
• Example: $(‘a[title]‘).
• The above selector will select all <a> elements that have a title attribute.
• $(‘a[title="Customer Info"]‘) will select all anchor elements that have a “Customer Info” title attribute.

Let’s do an example of this. I want to find out all the div where there is a title attribute. Let’s find out the count of them in an alert box. Right now, I have only one div with a title in the web page. I can use $(‘div[title]‘) to find all the div which have a title.

Go ahead and run it and we will get 1 in the alert box.

Now let’s try to find a specific one. We want to find a div where title equals Div Title. At first look, you may think why should we do like this. Because the div has an Id and we can select it by Id which is the fastest way. But in an actual web page, there may be many div having the same title. We want to find all those div. Then put them in a divs collection. Wrap it inside an alert to find their count.

While running the application, we will get 1 as output, which is true as well as we have only one div with title Div Title.

Now let’s change the title from Div Title to div Title inside the Selector. That is, change the case of one letter.

Go ahead and run it and we can see the output as 0. What did you understand from this? Selecting Nodes by Attribute value is case sensitive.

Then let’s try to find the input tags. I want to find input tags whose type is text. You can use $(‘input [type="text"]‘) for this purpose. Wrap it up inside an alert to find its length.

While scrolling down our web page, at the bottom of the form, we can see 2 input tags whose type is text.

Go ahead and run the application and we will get 2 as output as expected.

Now let’s change the background color of  input tags whose type is text to yellow.

While running the application, we can see the background color of both the two text boxes are changed to yellow.

---

4. Select Input Nodes in jQuery

• A new character syntax $(‘:input’) used for this.
• The above syntax will select all the input elements including Input, Select, TextArea, Button, Image, Radio and more. It will return a collection of input elements.
• $(‘:input[type="radio"]‘) will specifically target RadioButtons on the web page.

Let’s look at an example. In my web page, I have a Form. In that Form, I have 4 input elements. First one is the input element whose type is text and value is hard-coded to John. Second one is the input element LastNameTextBox whose type is text . Third one is TextArea for Comments. Fourth one is a button whose value is Submit.

Let’s try to find the value of first Input TextBox which is John. $(‘:input’) will give the collection of all the 4 input elements. Assign that value to a variable called inputs. Then input[0].val() will give the value of first input element which is FirstNameTextBox, whose value is John. Put that in an alert box. So in output, we should get John in the alert box.

But while running the application, we will get nothing as output. So what went wrong here? Let’s analyse it. Go to Developer tools of Google Chrome.

Notice that on the Console tab of Developer Tools, an error is showing - Uncaught TypeError: Object #<an HTMLInputElement> has no method ‘val’.

The problem here is, val() is a jQuery function. In order to get a jQuery function, you have to use jQuery wrapper around the object. So both in the 2 lines of code, we should use jQuery wrapper. Let’s modify the code like this and rerun the application.

Now we will get the desired output which is John in the alert box.

As I mentioned earlier, we have 4 input elements in our web page. Let’s try to iterate through each of them and find their values. $(‘:input’).each()  is used for this purpose. Here each() function is used to iterate through each of the input elements. Write the code as given below and run the application.

While running the application, we will get value of all the 4 input elements. While clicking on OK button, the value of next input element is displayed. First of all, we will get the value of FirstNameTextBox which is John.

While clicking on OK button, we will get the empty LastNameTextBox value.

Then we will get the TextArea value.

Finally the button value which is Submit.

 Reference: Arun Ramachandran (http://BestTEchnologyBlog.Com)