jQuery

jQuery Element Selector

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

jQuery Element Selector
Syntax:$(element)
[php]
$(‘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.
[/php]

Alerts the total count of td elements on the page.
[php]
<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>
[/php]

Output:
jQuery-element-selector

Selects all the tr elements on the page and changes their background colour to gray
[php]
<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>
[/php]
Output:
jQuery-element-selector-1

Alerts the HTML content of the table
[php]
<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>
[/php]
Output
jQuery-element-selector-2

Select and changes the background colour of all the div, span and anchor elements
[php]
<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>

[/php]
Output
jQuery-element-selector-3
Changes the background color of even rows to gray and odd rows to yellow on the tables.
[php]
<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>
[/php]
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.