jQuery Element selector with simple example in Tamil

The jQuery Element Selector is a fundamental feature that allows developers to target HTML elements based on their tag names. It is analogous to CSS selectors, making it easy for developers familiar with web styling to transition into using jQuery for dynamic page manipulation. The syntax for the element selector is straightforward:

$("element")

Here, "element" represents the HTML tag name that you want to select. This selector returns all matching elements within the document.

Source Code

This HTML code demonstrates the use of the jQuery Element Selector to dynamically manipulate the content of specific HTML elements. Let's break down the code

The jQuery code is enclosed within <script> tags and is executed when the document is ready, thanks to $(document).ready(function(){ ... }); or the shorthand $(function(){ ... });.
The code selects all <h2> elements on the page using the jQuery element selector $("h2").
The .html("<h5>Joes</h5>") method replaces the content of each selected <h2> element with the specified HTML content, in this case, a <h5> element containing the text "Joes."
After the jQuery code is executed, the content of the second <h2> element is replaced, transforming it from <h2t>Tutor Joes</h2> to <h5>Joes</h5>.

<html>
	<head>
		<title>Element Selector</title>
	</head>
	<body>
		<h1>Tutor Joes</h1>
		<h2>Tutor Joes</h2>
		<h1>Tutor Joes</h1>
		<script src="js/jquery.js"></script>
		<script>
			$("document").ready(function(){
				$("h2").html("<h5>Joes</h5>");
			});
		</script>
	</body>
</html>

The jQuery Element Selector is a versatile tool for selecting and manipulating elements based on their tag names. It simplifies the process of interacting with the DOM and is a core feature of jQuery's ability to enhance dynamic web development.

jQuery Element selector with simple example in Tamil

Source Code

List of Programs

jQuery Selectors

jQuery HTML

jQuery Traversing