How to select an element in jQuery

Selecting an element of a web page means to get a reference to an element (or simply getting the element) so that actions may be performed over the element.
Actions cover hiding / showing the element, removing it from the page, getting its value, getting its text, modifying its value / text etc.
Examples of elements on a web page are text box, button, drop down, checkbox, radio button, span, div etc.
There are 4 ways to select an element in jQuery:

• Using id of element,
• Using class of element,
• Using an attribute of element and its value,
• Using another element as a reference.

We shall discuss each of these methods in detail below.

Method 1 : id selector

If the element which we want to refer to has a unique id, then it is pretty easy to get a reference to that element. For selecting an element using its id, use $ with id of the element preceded by hash(#).
Syntax to refer an element by its id is :

Let’s say we have an input box on a page. This input box can be referred from javascript block as :

 <input id="inputElement" type="text">
   // other code
 <script> 
     $("#inputElement").val();
      // val() function of jQuery retrieves the value of element 
 </script>

Method 2 : class selector

This method is used to refer an element which has a particular class associated with it. For selecting an element using its class, use $ with class name preceded by a dot(.).
Syntax to refer an element by its class is :

Let’s say we have an input box on a page. This input box can be referred from javascript block as :

 <input class="inputElementClass" type="text">
   // other code
 <script> 
     $(".inputElementClass").val('selected');
 </script>

Note that class selector will return all the elements having the specified class name.

Method 3 : attribute selector

An element can also be selected based on its attribute name and its value. An element can have various attributes such as name, class, id, type etc.
Syntax to select an element using its attribute is:

Suppose we have below element on a web page.

Using the above approach, the element can be selected in various ways as follows:

Method 4 : Using another element as a reference

In this method, to refer an element, another element is first referred. This referenced element has some fixed id or a class. The original element to be referenced has a position relative to this referred element.
That is, the element to be referenced has some relation with the referred element. It either lies above the referred element, below it, inside it or so. For example, suppose we have a DOM structure as :

  <div>Previous element to refer</div>
  <div id="someDiv" class="someClass">
      <span>Child element to refer</span>
  </div>
  <div>Next Element to refer</div>

In the above example, we have many elements which neither have an id nor any class, so they couldn’t be referred using the above two methods. But in between, there is a div which has an id.
So, we can refer all the other elements using their relative position to the div which has the id.
jQuery provides several methods to refer to an element which lies above, inside or below an element. Using those methods, we can easily reference any element, if we can reference an element which lies nearby the element to refer.

Using the above DOM structure, we can refer to all elements in the following way:

   $("#someDiv").prev().text() // Prints "Previous element to refer"
   $("#someDiv").next().text() // Prints "Next element to refer" 
   $("#someDiv").children("span").text() // Prints "Child element to refer" 

Since the referenced div also has a class, the above snippet can be re-written as :

   $(".someClass").prev().text() // Prints "Previous element to refer"
   $(".someClass").next().text() // Prints "Next element to refer" 
   $(".someClass").children("span").text() // Prints "Child element to refer"

The above code snippets use jQuery’s prev(), next() and children() methods to refer to the next, previous and child element relative to an element respectively.
These methods retrieve the elements relative to the element on which these methods are called (which is a div with id ‘someDiv’ or a class ‘someClass’).

Let’s tweak in :

1. We can reference only one element if we are using id selector but multiple elements with class selector.
2. Using class selector will return all elements with the given class irrespective of their type. That is, using $(".myClass") will return all elements which have a class attribute with “myClass” as its value whether it is an input box, button etc.
3. In order to select an element with a given type using class selector prefix the class selector with the type of the element. For example, if you want to select a div element with class “myClass”, then use the selector $("div.myClass").
4. An element with a specific id can also be selected in a similar way such as $("div#myId").
5. Element with a given id can be selected using Method 1 or Method 3 that is using $("#myId") or $([id='myId']).
6. Similarly, element with a given class can be selected using Method 2 or Method 3 that is using $(".myClass") or $([class='myClass']).
7. A well formed page should have unique ids for all elements across the page.

Liked the post? Do not hesitate to click the clap and share the article.