Manipulate HTML Attribute Method using jQuery in Tamil


In jQuery, the HTML Attribute Methods allow you to get or set attributes of HTML elements. These methods provide a convenient way to manipulate and interact with attributes such as src, href, class, id, and custom data attributes. Here are some commonly used HTML Attribute Methods in jQuery:

The .attr() method gets the value of an attribute for the first element in the set of matched elements or sets one or more attributes for every matched element.



Source Code

This HTML and jQuery code demonstrates the use of the .attr() method to get and set the src attribute of an image element when the image is clicked. Let's break down the code

  • The code selects all <img> elements and attaches a click event handler to them.
  • When an image is clicked, it retrieves the current value of the src attribute using $(this).attr('src').
  • It displays an alert with the current src value.
  • Finally, it sets a new value ('img/2.jpg') for the src attribute using $(this).attr('src', 'img/2.jpg').
  • When you click on the image, an alert will display the current src value, and the image will be updated to 'img/2.jpg'.

This code illustrates the use of the .attr() method to dynamically manipulate the src attribute of an image element based on a user action (click).

<html>
	<head>
		<title>Attribute</title>
	</head>
	<body>
		<img src='img/1.jpg' width="300px" height="400px">
		<script src="js/jquery.js"></script>
		<script>
			$("document").ready(function(){
				$('img').click(function(){
					var a=$(this).attr('src');
					alert(a);
					$(this).attr('src','img/2.jpg');
				});	
			});
		</script>
	</body>
</html>

These methods provide a powerful set of tools for working with attributes in HTML elements using jQuery. They are essential for dynamic web page development, where you may need to manipulate and respond to changes in attributes based on user interactions or other events.