返回jQuery事......登陆

jQuery事件方法总结及测试

草原上的星辰2018-12-11 16:43:42169

语法:

$(document).ready(function(){

  })

 不能和<body onload="">一起使用

focus()当元素获得焦点

change()当元素的值发生改变的时候

click()点击事件

dblclick()双击事件

mouseover() 当鼠标指针位于元素上方时会发生mouseover事件

mouseenter() 当鼠标指针穿过元素时会发生mouseenter事件

mousemove() 当鼠标指针在指定的元素中移动时,就会发生该事件

mouseleave() 当鼠标指针离开元素时

mouseout() 当鼠标指针从元素上移开时

mousedown() 当鼠标指针移动到元素上方并按下鼠标按键时

mouseup() 当在元素上松开鼠标按键时

resize() 当调整当前浏览器窗口大小时

pageX()    属性是鼠标指针的位置,相对于文档的左边缘 event.pageX event:必须 参数来自事件绑定函数

pageY() 属性是鼠标指针的位置,相对于文档的上边缘 event.pageY event: 必须 参数来自事件绑定函数

<!DOCTYPE html>
<html>
<head>
         <meta charset="utf-8">
         <title>jQuery事件方法</title>
         <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
         <script type="text/javascript">
         $(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('backgroundColor','blue')
                          })*/
                          /*$('button').dblclick(function(){
                                   $('div').css('backgroundColor','blue')
                          })*/
                          /*$(document).mousemove(function(a){
                                   $('span').text('x:'+a.pageX+'y:'+a.pageY)
                          })
                          n=0;
                          $(window).resize(function(){
                                   $('b').text(n++)
                          })*/
                          /*$('div').mouseenter(function(){
                                   $('div').css('backgroundColor','pink')
                          })
                          $('div').mouseleave(function(){
                                   $('div').css('backgroundColor','blue')
                          })*/
                          /*$('div').mouseout(function(){
                                   $('div').css('backgroundColor','blue')
                          })*/
                          /*$('div').mouseover(function(){
                                   $('div').text('大家好,我是星辰')
                          })*/
                          $('div').mousedown(function(){
                                   $('div').text('按下')
                          })
                          $('div').mouseup(function(){
                                   $('div').text('松开')
                          })
 
                  })
         </script>
         <!-- <input type="text" name="">
         <div style="width:100px;height:100px;background-color:red;margin-top: 20px;"></div>
         <button>点击</button> -->
         <!-- 鼠标位置:<span></span>
         窗口大小被调整的次数:<b></b> -->
         <div style="width:100px;height: 100px;margin:50px auto;background: red;"></div>
</body>
</html>

                 

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送