jQuery之浏览器事件resize()和click()

232 阅读1分钟
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="sty1.css">
</head>
<body>
    <h2>浏览器尺寸改变,我会变色</h2>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        /* click不会像原生一样,最后面覆盖最前面的,会按照顺序都执行 */
        $('h2').click(function(){
            alert(1)
        })
        $('h2').click(function(){
            alert(2)
        })
        $('h2').click(function(){
            alert(3)
        })
        
        
        /* window是控制浏览器的事件和方法 */
        /* document是控制dom元素的方法和属性 */
  
        $(window).resize(function(){
             alert(1)
        
        })
        
        /* js原生方法 */
        window.onresize = function(){
             alert(2)
        }
        
        let c = ['red','green','blue']
        $(window).resize(function(){
             let i = Math.floor(Math.random()*(2-0+1))+0;
             $('h2').css('background',c[i])
        })
        
    </script>
</body>
</html>