JQuery浏览器事件

CSS部分

<style>
    h2{
        background-color: red;
    }
</style>

HTML部分

<h2>浏览器尺寸的变化，我会变色</h2>

JS部分

<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).resize(function(){
        $('head link').remove();
        $('head').append('<link rel="stylesheet" href="sty2.css">')
        $('link').attr('href','sty2.css')
    })
    /* window是控制的浏览器的事件和方法 */
    /* document 是控制dom元素的方法和属性 */
    console.log(window);
    $(window).resize(function(){
        alert(1)
    })
    
    
    /* 原生 */
    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>