WebLab-3.3-(15/10/24)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Methods Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            display: none;
        }

        #animateBox {
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
        }

        #popup {
            display: none;
            padding: 10px;
            border: 1px solid black;
            background-color: lightyellow;
        }
    </style>
</head>
<body>

    <button id="showPopup">Show Popup</button>
    <div id="popup">This is a popup without using alert!</div>

    <h1 id="heading">Hover and Double Click Me!</h1>
    <p id="description">This is a sample paragraph.</p>

    <div id="box">Sliding Box</div>

    <button id="slideDownBtn">Slide Down</button>
    <button id="fadeInBtn">Fade In</button>
    <button id="hideBtn">Hide</button>
    <button id="showBtn">Show</button>

    <div id="animateBox">Animating Box</div>

    <script>
        // Popup box (not using alert)
        $('#showPopup').click(function() {
            $('#popup').slideDown();
        });

        // slideDown()
        $('#slideDownBtn').click(function() {
            $('#box').slideDown();
        });

        // animate()
        $('#animateBox').dblclick(function() {
            $(this).animate({ left: '+=100px', height: '150px', width: '150px' }, 1000);
        });

        // fadeIn()
        $('#fadeInBtn').click(function() {
            $('#box').fadeIn();
        });

        // hide()
        $('#hideBtn').click(function() {
            $('#box').hide();
        });

        // show()
        $('#showBtn').click(function() {
            $('#box').show();
        });

        // mouseenter() and mouseleave()
        $('#heading').mouseenter(function() {
            $(this).css('color', 'red');
        }).mouseleave(function() {
            $(this).css('color', 'black');
        });

        // dblclick()
        $('#heading').dblclick(function() {
            $(this).html('You double-clicked me!');
        });

        // attr() and html()
        $('#description').mouseenter(function() {
            $(this).attr('title', 'Hovering over the paragraph!');
            $(this).html('The content of this paragraph has changed!');
        });
    </script>
</body>
</html>