jQuery Class selector with simple example in Tamil

The jQuery Class Selector allows you to select and manipulate HTML elements based on their class attributes. In HTML, the class attribute is used to group elements that share common styling or behavior. The syntax for the jQuery Class Selector is similar to CSS selectors and uses the . (dot) symbol followed by the class name

Syntax:

$(".yourClass")

Multiple Selection

The jQuery Class Selector can select multiple elements with the same class.

Performance

Selecting elements by class is efficient, although not as fast as selecting by ID.

Usage

The jQuery Class Selector is commonly used to target and modify groups of elements with shared characteristics.

Chaining

You can chain multiple methods after the class selector to perform various operations on the selected elements.

Dynamic Classes

Classes can be dynamically added or removed from elements using jQuery, allowing for dynamic styling and behavior changes.

Source Code

This HTML and jQuery code demonstrates the usage of the jQuery Class Selector to select and handle elements with a specific class. Let's break down the code.

The code selects all elements with the class "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 class "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 any element with the class "a" (the <i> or <p> element), the content of that specific element is logged to the console.

In summary, the jQuery Class Selector ($(".a")) is used to target elements with the class "a," and the click event handler is applied to those elements. When an element with the class "a" is clicked, the content of that specific element is logged to the console.

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

jQuery Class selector with simple example in Tamil

Source Code

List of Programs

jQuery Selectors

jQuery HTML

jQuery Traversing