Element Selector
An element selector is jQuery’s fundamental component that lets you quickly access elements or groups of components in a web page’s Document Object Model (DOM). The DOM represents your page’s HTML structure as a network of objects for JavaScript to communicate with.
All elements that have the same HTML tag name are identified by the Element Selector, sometimes called the Element Name Selector or Tag Name Selector. This selection might be used, for instance, to select all paragraphs (<p>) or all divisions (<div>) on a page.
How Element Selectors Work
The basic operation of jQuery element selectors is as follows:
The jQuery Function: A key function for “querying” or “finding” HTML elements is the $ symbol, which is an alias for jQuery().
CSS-like Syntax: The $ function takes a string as input and uses CSS-like syntax to determine which elements you wish to select.
Traversing the DOM: Finding all the elements that meet your criteria is done by jQuery using this selection expression to search the DOM tree.
jQuery Object: An array-like collection comprising all of the matched DOM elements is the “jQuery object” that is always returned by the $ function. You can use this object to interact with the chosen pieces in a variety of ways.
Implicit Iteration: A important aspect of jQuery is “implicit iteration”. Instead of for loops, jQuery methods cycle over chosen components and apply the action to each one.
Cross-Browser Compatibility: Web programming is easier with jQuery, which addresses browser-specific issues and adds features the plain DOM paradigm lacks. This uniformises your code across browsers.
Syntax:
When using jQuery selectors, For element name selectors, the HTML tag name serves as the selection.
$(selector).action()Syntax for Element Name Selector:
$('tagname')tagname: This refers to any standard HTML tag name, such as p, div, img, strong, or li.
Code Example:
You wish to modify the text content of every (bold) element on your webpage.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Element Selector Example</title>
<!-- jQuery CDN for latest version -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Element selector: selects all <strong> tags
$("strong").css({
"color": "red",
"font-size": "20px"
});
});
</script>
</head>
<body>
<strong>This is the first bold text.</strong><br>
<p>This is a paragraph.</p>
<strong>This is the second bold text.</strong><br>
<p>Another paragraph.</p>
<strong>This is the third bold text.</strong>
</body>
</html>Output:
This is the first bold text.
This is a paragraph.
This is the second bold text.
Another paragraph.
This is the third bold text.Explanation
Let $(document).ready(function(){… });: An essential component in developing jQuery is this. It guarantees that the DOM is properly built and the entire web page has fully loaded before your jQuery code runs. This avoids issues that could happen if jQuery attempts to work with unloaded items.
// var newText = ‘jQuery is amazing!’: The JavaScript variable newText is only declared and given a string value in this line.
$(‘strong’): The element name selector is this. jQuery is instructed to locate any HTML elements on the page that have the tag name .
.text(newText): A jQuery function called.text(newText) sets the textual content of the chosen elements. The newText value will be applied to all items that the selection finds since jQuery employs implicit iteration. “jQuery is awesome!” will replace “This is the first bold text.”, “This is the second “, and “This is the third ” on this HTML page in a browser.
Conclusion
This demonstrates how jQuery is a useful tool for web development, particularly when working with several comparable items, because selectors and jQuery methods enable quick, clear, and readable DOM manipulation. Selecting and modifying groups of HTML elements is made easier with jQuery element selectors, which provide a neat and standardised method of adding interactive behaviour and decoration to web pages.