jq学习

浏览器事件

    <script src="./jquery-1.12.4.js"></script>
    <script>
        /* 浏览器监听滚动事件 */
        // $(window).scroll(function(){
        //     console.log('scrollLeft',$(document).scrollLeft() )
        //     console.log('scrollTop',$(document).scrollTop() )
        // })
        /* 浏览器监听浏览器尺寸发生变化 */
        // $(window).resize(function(){
        //     console.log('我的尺寸变化了');
        //     console.log( $(window).width() )
        //     if( $(window).width() <600 ){
        //         $('div').css('background','red')
        //     }else{
        //         $('div').css('background','cyan')
        //     }
        // })
    </script>

绑定事件

        // $('div').bind('click',function(){
        //     console.log('我绑定了点击事件')
        // })
        // $('div').bind('mouseover',function(){
        //     console.log('我绑定了鼠标移入事件')
        // })
        // $('div').bind('mouseout',function(){
        //     console.log('我绑定了鼠标移出事件')
        // })
        /* 绑定多个事件 */
        $('div').bind({
            click:function(){
                console.log('我绑定了点击事件')
            },
            mouseover:function(){
                console.log('我绑定了鼠标移入事件')
            },
            mouseout:function(){
                console.log('我绑定了鼠标移出事件')
            }
        })
        $('button').click(function(){
            /* 解绑 */
            // $('div').unbind('click')
            /* 当unbind()不带参数时，表示移除所绑定的全部事件 */
            $('div').unbind()
        })

       
        // $('div').mouseover(function(){
        //     console.log('我绑定了鼠标移入事件')
        // })
        // $('div').mouseout(function(){
        //     console.log('我绑定了鼠标移出事件')
        // })

动画animate

            // $('div').slideToggle('500')
            $('div').fadeToggle('500')
        })
        $('div').click(function(){
            /* $(selector).animate({params},speed,callback) */
            // $('div').animate({
            //     left:'200px',
            //     top:'500px'
            // },2000,function(){
            //     $(this).animate({
            //         left:'400px',
            //         top:'20px'
            //     },2000,function(){
            //         $(this).animate({
            //             left:'600px',
            //             top:'500px'
            //         },2000,function(){
            //             $(this).animate({
            //                 left:'800px',
            //                 top:'20px'
            //             },2000,function(){
            //                 /* unbind 也可以操作click直接调用的事件 */
            //                 $('div').unbind('click')
            //             })
            //         })
            //     })
            // })
            /* 可选。表示速度，默认为“0”，
            可能值：毫秒（如1000）、slow、normal、fast */
            /* 
                slideDown() 可以使元素逐步延伸显示
                slideUp()则使元素逐步缩短直至隐藏
            */
            
            // if($('div').css('display')=='block'){
            //     $('div').slideUp('500',function(){
            //         alert('向上收缩')
            //     })
            // }else{
            //     $('div').slideDown('500',function(){
            //         alert('向下展开')
            //     })
            // }

            // if($('div').css('display')=='block'){
            //     $('div').fadeOut('500',function(){
            //         alert('我淡出了')
            //     })
            // }else{
            //     $('div').fadeIn('500',function(){
            //         alert('我淡入了')
            //     })
            // }
            // $('div').toggle('slow');
           
        })

未来事件

    <button id="btn2">解绑li点击事件</button>
    <ul>
        <li>我是学生1</li>
        <li>我是学生2</li>
        <li>我是学生3</li>
    </ul>
    <!-- 点击添加学生 点击li可以打印出对应的字 -->
    <!-- 点击学生4 或者 5 也能答应出 对应的字 -->
    <script src="./jquery-1.12.4.js"></script>
    <script>
        let count = 3;
        $('#btn1').click(function(){
            count++;
            $('ul').append( $(`<li>我是学生${count}</li>`) )
        })
        /* 这样操作 对未来元素不能实现绑定 */
        // $('li').click(function(){
        //     alert( $(this).text() );
        // })
        /* 使用bind 实现不了对未来元素的绑定 是老版本的用法
        新版的使用on*/
        /* 给已存在的body元素绑定  点击li的时候出现对应的事件 */
        
        $('body').on('click','li',function(){
           alert( $(this).text() );
        })
        $('#btn2').click(function(){
            /* 使用off方法来解绑li的点击事件 */
            /* 使用未来元素的方法绑定的方式不能实现使用li对off解绑 
            要使用 $('body').off('click')*/
            // $('li').off('click')
        })

jq中使用ajax

    <script src="./jquery-1.12.4.js"></script>
    <script>
        $('button').click(function(){
            $.ajax({
                url:"http://timemeetyou.com:8889/api/private/v1/login",
                method:"post",
                data:{
                    username:'admin',
                    password:'123456'
                },
                success:function(res){
                    /* success后面的方法里面的形参res表示后台返回的数据 */
                    console.log(res);
                }
            })
        })