Monthai: jQuery事件实践总结

Original 2018-11-11 18:42:10 263
abstract:事件清单.blur() //失去焦点 .focus() //获得焦点 .change() //元素值发生变化 .click()  .dblclick() //双击 .mouseover() //不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 .mouseenter() //只有在鼠标指

事件清单

.blur() //失去焦点
.focus() //获得焦点
.change() //元素值发生变化
.click() 
.dblclick() //双击
.mouseover() //不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件
.mouseenter() //只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件
.mouseleave() //只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件
.mouseout() //不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件
.mousedown()
.mouseup()
.resize() //缩放窗口
.pageX //相对于文档左边缘的鼠标位置
.pageY //相对于文档上边缘的鼠标位置

(1)pageX、pageY是对象属性,不是方法,后面不需要加(),但是前面需要指定对象,该对象为function的参数。如果坐标是针对整个窗口的,函数对象应该是document。

$(document).mousemove(function(aa){
      $('span').text('X:'+aa.pageX+'Y:'+aa.pageY)
})

(2)resize()的对象是window。

(3)text()输出问题

//方法一:
var num = 0
$(window).resize(function(){
     $('b').text('调整次数'+ num++) //此方法调整一次后依然返回0
     alert('窗口已被调整')
}
//方法二:
var num = 0
$(window).resize(function(){
     $('b').text(num+=1) //从1开始,但不能用"文本"+输出,会出错,无提示
     alert('窗口已被调整')
}

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery事件</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(document).ready( function(){
            $('div').css({'width':'300px','height':'100px','border':'2px blue dashed'})
            $('input').blur(function(){
                $('input').css('background','#B3D4FC')
            })
            $('input').focus(function(){
                $('input').css('background','#EDBCC8')
            })
            $('div').dblclick(function(){
                $('div').css('background','#EDBCC8')
            })
            $('div').mouseup(function(aa){
                $('span').text('X:'+aa.pageX+'Y:'+aa.pageY)
            })
            var num = 0
            $(window).resize(function(){
                $('b').text(num+=1)
                alert('窗口已被调整!')
            })
        })
    </script>
</head>
<body>
    <input type="text" >
    <div>
        双击触发变色<br>
        坐标<span></span><br>
        窗口调整次数:<b></b>
    </div>
</body>
</html>

END

Release Notes

Popular Entries