jQuery Element Selector with Examples

In this article, I am going to discuss jQuery Element Selector with Examples. Please read our previous article, where we discussed jQuery ID Selector. The jQuery Element Selector allows us to select an element from the HTML page based on the element name. At the end of this article, you will understand everything about the jQuery Element selector

jQuery Element Selector

To select any HTML element by its tag name, we have to use the jQuery Element selector. To the jQuery function if we pass the element tag name as its selector then it is called as jQuery Element selector. jQuery Element selector uses document.getElementsByTagName() function of JavaScript.

Syntax: $(‘Element tag name’)

We can provide the element name that we want to select in the parenthesis. For example, suppose that we have a button element in our HTML like below
<button>Click Me</button>

To select this button element, we have to use the element selector as follows
$(‘button’)

The usage of selecting the element by their tag name is exactly as same as we have used in CSS. For example
$(‘p’): This will select all the paragraph tags
$(‘div button’): This will select all the <button> elements which are descendant of <div> element
$(‘div, span, button’): This will select all the<div>, <span> and <button> elements
$(‘div > p’): This will select <p> elements that are a direct child of a <div> element
$(‘div ~ p’): This will select <p> elements appear after <div> element
$(‘p: first-child’): This will select only the first p element of its parent
$(‘p: last-child’): This will select only the last p element of its parent
$(‘p: nth-child(3)’): This will select only the 3rd p element of its parent
$(‘tr: odd’): This will select only the odd <tr> children of its parent
$(‘tr: even’): This will select only the even <tr> children of its parent
$(‘div: has(p)’): This will select all the div elements that have a p element
$(‘div: contains(“hello”)’): This will select all div elements that contains the string hello
$(‘:header’): This will select all the header elements <h1>,<h2>,……….
$(‘:empty’): This will select all elements that are empty
$(‘:header:not(h1)’): This will select all header elements that are not h1
$(‘table:visible’): This will select all visible tables
$(‘ul li:eq(3)’): The fourth element in a list (index starts at 0)
$(‘ul li:gt(3)’): List elements with an index greater than 3
$(‘ul li:lt(3)’): List elements with an index less than 3

Example to understand jQuery Element Selector:

Now let’s jump to the practical to understand these things

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h1>jQuery Element Selector</h1>
    <p>This is Some text</p>
    <p>This is some another text</p>
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $('p').css('border', '2px solid blue');
            });
        });
    </script>
</body>
</html>

Once you run the above code, you will get the following page in the browser.

Once you click on the Click Me button, the page changes as shown in the below image. When we click on the button, we are selecting all the paragraph elements by $(‘p’) and applying the border to all of them and hence you are getting the below output.

Example: Selecting descendant elements

In the below example we are targeting the anchor tag which is the descendant of the DIV by $(‘div a’) and we apply the border on the targeted element.

<!DOCTYPE html>
<html>
<head>
     <title>jQuery Element Selector</title>
</head>
<body>
    <h1>jQuery Element Selector</h1>
    <div class="test">
        <p>This is a DIV</p>
        <a href="#">This is anchor element</a>
    </div>
    <br/>
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $('div a').css('border', '2px solid red');
            });
        });
    </script>
</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

When you click on the Click Me button, it will apply the border to the anchor element which is descendent of the Div element as shown in the below image.

Example: Selecting multiple elements

In the below example, we are targeting all the paragraph, span, anchor tags by $(‘p, span, a’) and apply the style to them.

<!DOCTYPE html>
<html>
<head>
     <title>jQuery Element Selector</title>
</head>
<body>
    <h1>jQuery Element Selector</h1>
    <div class="test">
        <p>This is some text</p>
        <span>This is span element</span>
        <br/><br/>
        <a href="#">This is anchor element</a>
    </div>
    <br/>
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $('p, span, a').css('border', '2px solid red');
            });
        });
    </script>
</body>
</html>

When we run the above code, we will get the following output in the browser.

When you click on the Click Me button, it will apply the border to the paragraph, span, and anchor elements as shown in the below image.

Example:

In the below example, we are using a pseudo-selector. This will apply only to the first paragraph tag.

<!DOCTYPE html>
<html>
<head>
     <title>jQuery Element Selector</title>
</head>
<body>
    <h1>jQuery Element Selector</h1>
    <div class="test">
        <p>This is 1st text</p>
        <p>This is 2nd text</p>
        <p>This is 3rd text</p>
    </div>
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $('p:first-child').css('border', '2px solid red');
            });
        });
    </script>
</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

When you click on the Click Me button, it will apply the border to the first paragraph elements as shown in the below image.

Example:

$(‘element’) returns a collection of elements, we can alert the number of elements also by length method.

<!DOCTYPE html>
<html>
<head>
     <title>jQuery Element Selector</title>
</head>
<body>
    <h1>jQuery Element Selector</h1>
    <div class="test">
        <p>This is 1st text</p>
        <p>This is 2nd text</p>
        <p>This is 3rd text</p>
    </div>
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                alert($('p').length);
            });
        });
    </script>
</body>
</html>

When you run the above code and click on the Click Me button, you will get the following alert.

Example:

In the below example we are selecting those odd table rows

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Element Selector</title>
</head>
<body>
    <h1>jQuery Element Selector</h1>
    
     <section id="sec">
        <Table>
            <tr>
                <td>Front End</td>
                <td>Back End</td>
            </tr>
            <tr>
                <td>Bootstrap</td>
                <td>NODE JS</td>
            </tr>
            <tr>
                <td>jQuery</td>
                <td>PHP</td>
            </tr>
        </Table>
    </section> 

     <button id="demo">Click me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function(){
                $("table tr:odd").css('backgroundColor','skyblue')
            });
            
        });
    </script>
</body>
</html>

Now, run the above HTML code and click on the Click Me button, you will get the following output.

Example:

In the below example we are selecting those div elements which has a p element.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Element Selector</title>
</head>
<body>
    <h1>jQuery Element Selector</h1>
     <section id="sec">
        <div>
            <p>This is a Text</p>
        </div>
        <div>Demo text</div>
        <div>Demo Text</div>
    </section> 

     <button id="demo">Click me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function(){
                $("div:has(p)").css('backgroundColor','skyblue')
            });
            
        });
    </script>
</body>
</html>

Now, run the above HTML code and click on the Click Me button, you will get the following output.

Example:

In the below example, those div elements are only selected which contains the string hello

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Element Selector</title>
</head>
<body>
     <section id="sec">
        <div>Hello World</div>
        <div>Demo text</div>
        <div> Hello Demo Text</div>
    </section> 
     <button id="demo">Click me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function(){
                $("div:contains('Hello')").css('backgroundColor','skyblue')
            });  
        });
    </script>
</body>
</html>

Now, run the above HTML code and click on the Click Me button, you will get the following output.

Example:

In the below example, we are selecting those headers inside the section element which are not the <h4>

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Element Selector</title>
</head>
<body>
     <section id="sec">
        <div><h3>Hello World</h3></div>
        <div><h4>Demo text</h4></div>
        <div> Hello Demo Text</div>
    </section> 
     <button id="demo">Click me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function(){
                $("section :header:not(h4)").css('backgroundColor','skyblue')
            });  
        });
    </script>
</body>
</html>

Now, run the above code and click on the Click Me button, you will get the following output.

Example:

In the below example, at first notice that only that <li> element of the list is selected that is indexed at 3. Then notice that those <li> elements of the list are selected that are indexed at less than 3.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Element Selector</title>
</head>
<body>
    <h3>jQuery Element Selector</h3>
    <section id="sec">
        <h5>JavaScript Libraries and Frameworks</h5>
        <ul>
            <li>jQuery</li>
            <li>ReactJs</li>
            <li>Angular</li>
            <li>VueJS</li>
            <li>NextJS</li>
        </ul>
    </section>
    <button id="demo">Click me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $('ul li:eq(3)').css('backgroundColor', 'skyblue');
                $('ul li:lt(3)').css('backgroundColor', 'pink');
            });
        });
    </script>
</body>
</html>

Now, run the above code and click on the Click Me button, you will get the following output.

In the next article, I am going to discuss jQuery Class Selector with Examples. Here, in this article, I try to explain jQuery Element Selector and I hope you enjoy this article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.