jQuery select by name or jQuery element selector allows us to find all HTML elements with the given tag name. You can do any sort of manipulation like animating or any other special effects after selecting the element and that change will take effect in all the elements of the same type or tag name. Earlier we learned using jQuery select by id and jQuery select by class.
jQuery select by Name
Here is the general syntax for using the jQuery select by name:
$('tagName')Any standard HTML elements like div, li, img, p, em etc could be used as the tagName. For example;
$('div') : This element selector will select all the div elements in the document.
$('p') : This jquery select by name will consider all the paragraph elements in the document.
If there are multiple <div> elements, you can change all the <div> elements in the document with this single expression $(‘div’).
You can hide, show or do any kind of manipulations on that <div> element. This is the most powerful advantage of using this jQuery selector.
jQuery select by Name Example
This example demonstrates the use of jQuery select by name of tag, we will change the CSS style of the selected element.
<html>
<head>
<title>jQuery selector By Name</title>
<style>
div, span {
width: 70px;
height: 70px;
float: left;
padding: 12px;
margin: 12px;
background-color: #eee;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>DIV 1</div>
<span>SPAN 1 </span>
<div>DIV 2</div>
<span>SPAN 2 </span>
<script>
$( "div" ).css( "border", "5px solid green" );
</script>
</body>
</html>
In this example, you can see the selector $("div") is selected to change the CSS style. The only change in the code modified all the div elements uniformly. This is the strength of jQuery selector by name.
Below image shows the output produced by above HTML page.
Therefore, in the case of enforcing a uniform behavior on html elements, you can use jQuery select by name in the code.