JQuery Selectors

PHOTO EMBED

Fri Nov 15 2024 15:22:34 GMT+0000 (Coordinated Universal Time)

Saved by @signup_returns 

<!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>
content_copyCOPY