Week 12 - JQuery Practice

Web Editor - Week 12 - JQuery Practice

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
    <body>        
        <h1>
            <span>Hi</span>
        </h1>
        <p>
            Hello
        </p>

<script>
            /*JQuery should all go in the function on the 
            line below. All is does is wait until the whole
            webpage has loaded before running any of the code*/
            $(document).ready(function(){                
                
                //Show and hide
                $('h1').hide();            //hide
                setTimeout(function(){     //wait
                    $('h1').show()}, 2000);//show

//Changing CSS
                $('h1').css('color', '#abcdef');
                $('p').css('border-bottom', '1px solid black');

//Changing Text
                var someText = $('h1').text();
                console.log(someText);
                var someHTML = $('h1').html();
                console.log(someHTML);
                $('h1').click(function(){
                    $(this).text("What's up?")
                });

/*Events
                -You can make code run on certain events like
                'click' or 'mouseenter'. To do so, just select
                an element then write the triggering event and 
                the code you'd like to run using the syntax below.
                -To apply multiple event handlers to an element,
                use the 'on()' method as shown below*/
                //'Click' event
                $("p").click(function(){
                    var elem = $(this);
                    elem.hide();
                    setTimeout(function(){
                        elem.show();
                    }, 2000);
                });
                //'Click' event using the 'on()' method
                $('h1').click(function(){
                    $(this).css('background-color', 'fedcba');
                });

//Multiple events using the 'on()' method
                $("h1").on({
                    mouseenter: function(){
                        $(this).css("font-size", "3em");
                    },
                    mouseleave: function(){
                        $(this).css("font-size", "2em");
                    },           
                });

});

</script>

</body>
</html>

WebEditor - an OYOclass application, own your own class today.

Page Live Preview

Open page in New Window

Console

Created on 2021-05-07T12:33:07Z

Author: Mentor Doug