好方便的,可以定义一些有趣功能啦

原创 2018-11-22 00:23:52 243
摘要:<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>jQuery事件</title>    &
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery事件</title>
    <script type="text/javascript"src="jquery-3.3.1.min.js"></script>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function () {
            $(document).mousemove(function(aa){
                $('span').text('x: '+aa.pageX+'y: '+aa.pageY)
            })
            $(window).resize(function(){
                console.log('窗口大小被调整了')
            })
            $('.box').mouseover(function(){
                console.log('鼠标滑过了')
                $('.box').css({'background':'red'})
            })
            $('.box').mouseout(function(){
                console.log('鼠标移开')
                $('.box').css({'background':'pink'})
                $('.box').css({'width':'100px'})
            })
            $('.box').mousedown(function(){
                console.log('鼠标点击下')
                $('.box').css({'background':'green'})
            })
            $('.box').mouseup(function(){
                console.log('鼠标点击完')
                $('.box').css({'background':'blue'})
            })
            $('.box').click(function(){
                console.log('鼠标点击')
                $('.box').css({'width':'200px'})
            })
            
        })
    </script>
    <div>
        当前鼠标位置:<span> </span>
    </div>
    <div></div>
</body>
</html>

之前听到韦小宝老师说的代码加上高亮,不清楚是什么意思,是上面这种选好语言,有背景颜色吗

发布手记

热门词条