DOM (Document Object Model):
The DOM is like a structure that represents a web page's elements. It's like a map that shows where everything is on the page and helps us interact with them using code.
jQuery is a JavaScript library that makes it easier to work with HTML elements and perform various tasks on a web page, such as handling events, manipulating the DOM (Document Object Model), and making AJAX requests.
DOM attributes:
The id attribute provides a unique name for an element.
The class attribute labels elements as "important."
The src attribute specifies the image file's location.
The href attribute sets the link's destination to
jQuery simplifies the process of working with DOM attributes by providing methods that work consistently across different browsers.
To access and manipulate DOM attributes using jQuery, you typically use methods like .attr(), .addClass(), .removeClass(), .prop(), etc
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery DOM Attributes Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>jQuery DOM Attributes Example</h1>
<img src="image1.jpg" alt="Original Image">
<p id="myParagraph">This is a paragraph with an ID.</p>
<input type="checkbox" id="myCheckbox" checked> Check this box
<button id="addHighlight">Add Highlight</button>
<button id="removeHighlight">Remove Highlight</button>
<button id="changeImage">Change Image</button>
<button id="toggleCheckbox">Toggle Checkbox</button>
<script>
$(document).ready(function(){
// Add Highlight to the paragraph when "Add Highlight" button is clicked
$("#addHighlight").click(function(){
$("#myParagraph").addClass("highlight");
});
// Remove Highlight from the paragraph when "Remove Highlight" button is clicked
$("#removeHighlight").click(function(){
$("#myParagraph").removeClass("highlight");
});
// Change the image source when "Change Image" button is clicked
$("#changeImage").click(function(){
$("img").attr("src", "image2.jpg");
});
// Toggle the checkbox's "checked" property when "Toggle Checkbox" button is clicked
$("#toggleCheckbox").click(function(){
var isChecked = $("#myCheckbox").prop("checked");
$("#myCheckbox").prop("checked", !isChecked);
});
});
</script>
</body>
</html>
