<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Selectors Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: yellow;
}
#message {
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<h1>jQuery Selectors Demo</h1>
<p>This is a <span class="highlight">simple</span> paragraph with some text.</p>
<p id="first-paragraph">This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<div id="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
<input type="text" placeholder="Text input">
<input type="password" placeholder="Password input">
<input type="button" value="Click me">
<button id="showMessage">Click to Show Message</button>
<div id="message"></div>
<script>
$(document).ready(function() {
// Select by tag name
$('p').css('color', 'green'); // All <p> elements will turn green
// Select by class name
$('.highlight').css('font-weight', 'bold'); // Highlights text within .highlight class
// Select by ID
$('#first-paragraph').css('font-size', '18px'); // Changes font size of #first-paragraph
// Select by attribute
$('[type="text"]').css('border', '2px solid red'); // Selects text input and adds a border
// Select all children of a parent (box divs inside #container)
$('#container .box').css('background-color', '#f0f0f0'); // Applies background to all .box elements inside #container
// Select first element
$('p:first').css('color', 'purple'); // First <p> element turns purple
// Select last element
$('p:last').css('color', 'orange'); // Last <p> element turns orange
// Select hidden elements
$('input[type="password"]').css('border', '2px dashed green'); // Highlight password input
// Select multiple classes
$('.box.highlight').css('border', '2px solid blue'); // Selects .box and .highlight elements
// Demonstrate on button click
$('#showMessage').click(function() {
$('#message').text('You clicked the button!').fadeIn().css('color', 'red');
});
});
</script>
</body>
</html>