jQuery

jQuery Element Selector

In this article we will learn about jQuery Element Selector with example.

jQuery Element Selector
Syntax:$(element)

$('td') // Selects all td elements
$('div p') // Select all p elements that are descendants of div element
$('div, span, p') // Selects all div, span and p elements
 $('tr:even').css('background-Color', 'gray'); //Changes the background color of even rows to gray of the the tables.

Alerts the total count of td elements on the page.

<html>
<head>
    <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function () {
            alert($('td').length);
        });
    </script>
</head>
<body>
    <table border="1" >
        <tr>
            <td>C#</td>
            <td>ASP.NET</td>
            <td>MVC</td>
        </tr>
        <tr>
            <td>ADO.NET</td>
            <td>jQuery</td>
            <td>Python</td>
        </tr>
        <tr>
            <td>AJAX</td>
            <td>CSS</td>
            <td>Html</td>
        </tr>
        <tr>
            <td>VB</td>
            <td>Dot NET</td>
            <td>C</td>
        </tr>
        
    </table>
    <br /><br />
    <div>
        DIV 1 Element
        <br />
            <a href="http://www.languagetechfunda.com/">LanguageTechFunda</a>
    </div>
    <br /><br />
    <a href="http://google.com">Google</a>
    <br /><br />
    <div>DIV 2 Element</div>
    <br /><br />
    <span>SPAN 1 Element</span>
    <br /><br />
    <div>DIV 3 Element</div>
</body>
</html>

Output:
jQuery-element-selector

Selects all the tr elements on the page and changes their background colour to gray

<html>
<head>
    <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function () {
            $('tr').css('background-color','gray')
        });
    </script>
</head>
<body>
    <table border="1" >
        <tr>
            <td>C#</td>
            <td>ASP.NET</td>
            <td>MVC</td>
        </tr>
        <tr>
            <td>ADO.NET</td>
            <td>jQuery</td>
            <td>Python</td>
        </tr>
        <tr>
            <td>AJAX</td>
            <td>CSS</td>
            <td>Html</td>
        </tr>
        <tr>
            <td>VB</td>
            <td>Dot NET</td>
            <td>C</td>
        </tr>
        
    </table>
    <br /><br />
    <div>
        DIV 1 Element
        <br />
            <a href="http://www.languagetechfunda.com/">LanguageTechFunda</a>
    </div>
    <br /><br />
    <a href="http://google.com">Google</a>
    <br /><br />
    <div>DIV 2 Element</div>
    <br /><br />
    <span>SPAN 1 Element</span>
    <br /><br />
    <div>DIV 3 Element</div>
</body>
</html>

Output:
jQuery-element-selector-1

Alerts the HTML content of the table

<html>
<head>
    <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                alert($('table').html());
        });
    </script>
</head>
<body>
    <table border="1" >
        <tr>
            <td>C#</td>
            <td>ASP.NET</td>
            <td>MVC</td>
        </tr>
        <tr>
            <td>ADO.NET</td>
            <td>jQuery</td>
            <td>Python</td>
        </tr>
        <tr>
            <td>AJAX</td>
            <td>CSS</td>
            <td>Html</td>
        </tr>
        <tr>
            <td>VB</td>
            <td>Dot NET</td>
            <td>C</td>
        </tr>
        
    </table>
    <br /><br />
    <div>
        DIV 1 Element
        <br />
            <a href="http://www.languagetechfunda.com/">LanguageTechFunda</a>
    </div>
    <br /><br />
    <a href="http://google.com">Google</a>
    <br /><br />
    <div>DIV 2 Element</div>
    <br /><br />
    <span>SPAN 1 Element</span>
    <br /><br />
    <div>DIV 3 Element</div>
</body>
</html>

Output
jQuery-element-selector-2

Select and changes the background colour of all the div, span and anchor elements

<html>
<head>
    <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('div, span, a').css('background-color','red');
            });
    </script>
</head>
<body>
    <table border="1" >
        <tr>
            <td>C#</td>
            <td>ASP.NET</td>
            <td>MVC</td>
        </tr>
        <tr>
            <td>ADO.NET</td>
            <td>jQuery</td>
            <td>Python</td>
        </tr>
        <tr>
            <td>AJAX</td>
            <td>CSS</td>
            <td>Html</td>
        </tr>
        <tr>
            <td>VB</td>
            <td>Dot NET</td>
            <td>C</td>
        </tr>
        
    </table>
    <br /><br />
    <div>
        DIV 1 Element
        <br />
            <a href="http://www.languagetechfunda.com/">LanguageTechFunda</a>
    </div>
    <br /><br />
    <a href="http://google.com">Google</a>
    <br /><br />
    <div>DIV 2 Element</div>
    <br /><br />
    <span>SPAN 1 Element</span>
    <br /><br />
    <div>DIV 3 Element</div>
</body>
</html>

Output
jQuery-element-selector-3
Changes the background color of even rows to gray and odd rows to yellow on the tables.

<html>
<head>
    <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('tr:even').css('background-color', 'gray');
                $('tr:odd').css('background-color','yellow');
            });
    </script>
</head>
<body>
    <table border="1" >
        <tr>
            <td>C#</td>
            <td>ASP.NET</td>
            <td>MVC</td>
        </tr>
        <tr>
            <td>ADO.NET</td>
            <td>jQuery</td>
            <td>Python</td>
        </tr>
        <tr>
            <td>AJAX</td>
            <td>CSS</td>
            <td>Html</td>
        </tr>
        <tr>
            <td>VB</td>
            <td>Dot NET</td>
            <td>C</td>
        </tr>
        
    </table>
    <br /><br />
    <div>
        DIV 1 Element
        <br />
            <a href="http://www.languagetechfunda.com/">LanguageTechFunda</a>
    </div>
    <br /><br />
    <a href="http://google.com">Google</a>
    <br /><br />
    <div>DIV 2 Element</div>
    <br /><br />
    <span>SPAN 1 Element</span>
    <br /><br />
    <div>DIV 3 Element</div>
</body>
</html>

Output
jQuery-element-selector-4

Any question and suggestion related to this article please comment me.

Leave a Reply

Your email address will not be published. Required fields are marked *