jQuery事件方法总结

原创 2018-11-10 16:56:48 7
摘要:<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <script src="前端课件/jQuery/jquery-3.3.1.min.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="前端课件/jQuery/jquery-3.3.1.min.js"></script>
    <style type="text/css">
       .div_1{width: 100px;height: 100px;background: red;margin-top: 30px;}
    </style>
</head>
<body>
    <script>
    // ready()       当我们的DOM已经加载,页面已经加载完,触发的事件==js的onload  
    // 不能与<body onload="">一起使用
    // blur()        当元素失去焦点==onblur
    // focus()       当元素获取焦点==onfocus
    // change()      当元素的值发生改变的时候
    // click()       点击事件==js的onclick
    // dblclick()    点击事件==js的ondblclick
    // mouseover()   当鼠标指针位于元素上方时会发生mouseover事件
    // mouseenter()  当鼠标指针穿过元素时会发生mouseenter事件
    // mousemove()   当鼠标指针在指定的元素中移动时,就会发生该事件
    // mouseleave()  当鼠标指针离开元素时
    // mouseout()    当鼠标指针从元素上移开时
    // mousedown()   当鼠标指针移动到元素上方并按下鼠标按键时
    // mouseup()     当在元素上松开鼠标按键时
    // resize()      当调整浏览器窗口大小时
    // pageX()       属性是鼠标指针的位置,相对于文档的左边缘 event.pageX event:必选 参数来自事件绑定函数。
    // pageY()       属性是鼠标指针的位置,相对于文档的上边缘 event.pageY event:必选 参数来自事件绑定函数。
        $(document).ready(function(){
           // $('input').blur(function(){
           //      $('input').css('background','red')
           // })
           // $('input').focus(function(){
           //      $('input').css('background','blue')
           // })
           // $('input').change(function(){
           //      $('input').css('background','pink')     
           // $('button').click(function(){
           //  $('div').css('background','blue') 
           // $('div').dblclick(function(){
           // $(this).css('background','pink')        
           // })
           // $('.div_1').mouseover(function(){
           //         $('.div_1').css('background','pink')
           // })
           // $('.div_1').mouseleave(function(){
           //         $('.div_1').css('background','blue')
           // })
           // $('.div_1').mouseenter(function(){
           //         $('.div_1').css('background','blue')
           // })
           // $('.div_1').mousemove(function(){
           //         $('.div_1').css('background','blue')
           // })
           // $('.div_1').mousedown(function(){
           //         $('.div_1').css('background','blue')
           // })
           // $('.div_1').mouseup(function(){
           //         $('.div_1').css('background','pink')
           // })
           // var i=0
           // $(window).resize(function(){
           //   $('b').text(i++)
           // })
           $(document).mousemove(function(aa){
               $('span').text('x: '+aa.pageX+'y: '+aa.pageY)
           })   
     })
    </script>
    <!--<input type="text" name="">
    <div style="width: 100px;height: 100px;background: red;margin-top: 30px;"></div>
    <button>点击</button>-->
    <div class="div_1" ></div>
    <div>
        当前鼠标的位置:<span> </span>
    </div>
    <div>
        页面被调整大小的次数:<b> </b>
    </div>
</body>
</html>

本章节主要介绍了几个常用事件函数,最多的就是鼠标事件,经过多次测试后发现mouseover()和mouseenter()
的效果有点相似,mouseleave()和mouseout()的效果有点相似,问了下度娘说是‘mouseenter事件只作用于目标元素,而mouseover作用于目标元素及其后代元素’mouseleave()事件只作用于目标元素,而mouseout()作用于目标元素及其后代元素

批改老师:韦小宝批改时间:2018-11-10 16:59:35
老师总结:很完美!学习就是这样!有很多不会的或者不懂在!在视频上并没详细讲解,这个时候就是得看自己的动手能力了!加油!!!

发布手记

热门词条