jQuery ID selector with simple example in Tamil

The jQuery ID selector allows you to select and manipulate an HTML element based on its unique identifier (ID). In HTML, the ID attribute provides a way to uniquely identify an element on a page. The syntax for the jQuery ID selector is similar to CSS selectors and uses the # symbol followed by the ID value.

$("#yourID")

Uniqueness

IDs must be unique within an HTML document. Using the ID selector ensures that you are selecting a single element.

Performance

Selecting an element by ID is one of the fastest operations in jQuery, as browsers can efficiently locate an element by its ID.

Usage

The jQuery ID selector is often used to target specific elements for manipulation or interaction in a dynamic web application.

Chaining

You can chain multiple methods after the ID selector to perform various operations on the selected element.

Event Handling

IDs are commonly used in event handling to target specific elements for user interactions.

Source Code

This HTML and jQuery code demonstrates the usage of the jQuery ID selector to select and manipulate an HTML element with a specific ID. Let's break down the code

The code selects the element with the ID "a" using $("#a").
It registers a click event handler using the .click() method.
Inside the click event handler function, $(this) refers to the specific element with the ID "a" that was clicked.
The content of the clicked element is retrieved using .html() and stored in the variable a.
The content of the clicked element is then logged to the console using console.log(a).
When you click on the first <h1> element (which has the ID "a"), the content of that specific <h1> is logged to the console.

In summary, the jQuery ID selector ($("#a")) is used to specifically target the element with the ID "a," and the click event handler is applied to that element. When the element is clicked, the content of that element is logged to the console.

<html>
	<head>
		<title>ID Selector</title>
	</head>
	<body>
		<h1 id="a">Tutor Joes</h1>
		<h1>Computer Education</h1> 
		<h2>Learn More Be Smart</h2>
		<script src="js/jquery.js"></script>
		<script>
		$("document").ready(function(){
			$("#a").click(function(){
				var a=$(this).html();
				console.log(a);
			});
		});
		</script>	
	</body>
</html>

jQuery ID selector with simple example in Tamil

Source Code

List of Programs

jQuery Selectors

jQuery HTML

jQuery Traversing