jquery 模拟鼠标的位置进行点击 jquery 模拟双击

转载

mob64ca14017c37 2023-11-09 21:58:29

文章标签 jquery 模拟鼠标的位置进行点击 ci css ide 文章分类 jQuery 前端开发

jQuery事件

鼠标事件

类型1

click 鼠标单击时触发
dblclick 鼠标双击时触发

总结：

双击事件是由两次单击完成，所以双击事件执行的时候必定会触发单击事件。
一般情况下，单击双击分开执行，不会一起执行。

类型2

mousedown 鼠标按下时触发
mouseup 按下鼠标放松时触发

类型3

mouseenter 鼠标进入时触发
mouseleave 鼠标移出时触发
hover (over,out)
例：

$(function(){
  $('a').hover(
    //mouseleave   鼠标移出时触发
    function(){
      $('img').eq($(this).index()).css({opacity:'1'}).siblings().css({opacity:'0'});
    },
    //mouseleave   鼠标移出时触发
    function(){
      $('img').eq($(this).index()).css({opacity:''}).siblings().css({opacity:''});
    }
  );
});

类型4

mouseover 鼠标进入指定元素及其子元素时触发
mouseout 鼠标移出指定元素及其子元素时触发
mousemove 在DOM内部移动时发生这个事件

总结

鼠标移动就会一直触发事件
很多捣蛋程序通过mousemove做出来的
拖拽文件上传用到

类型5

scroll 当滚动这个元素时会发生这个事件 (触发此事件必须要有滚动条存在)

//统计滚动次数
$(function(){
    var n=0;
    $('textarea').scroll(function(){
      $('strong').text(n+=1);
    });
});

键盘事件

类型1

keydown 当键盘或者按钮被按下时，触发keydown事件。

总结：

有时候我们通过获取key值判断按下什么键
可以通过获取键位获取输入什么键
通过keycode：ASCII值判断
只有在获得焦点时才会触发
可以获取很多特殊的按键，但是不能准确获取字母大小写的ASCII

//控制台输出按键的属性
//key：按键值
//keyCode:按键值对应的ascii值
//document默认的焦点在页面最左上方
$(function(){
  $(document).keydown(function(event){
      console.log(event);
  });
});

类型2

keyup 当按钮松开时，触发keyup事件，发生在当前获得焦点的元素上。

总结：

现在的浏览器基本上可以使用keydown和keyup，发生在当前获得焦点的元素上
旧浏览器保留一个keypress事件

类型3

keypress 当键盘或者按钮按下时，发生keypress事件

总结：

独特在于必须输入内容才会触发
比如输入法、回退，Ctrl， alt不会触发的
很多特殊的按键无法触发，但是能够准确获取字母大写和小写的ASCII
现在版本和keypress keydown几乎没有区别

其他事件

ready() $(document).ready()当DOM载入就绪可以查询或者操纵时绑定一个要执行的函数
resize() $(window).resize() 当浏览器调整浏览器窗口大小时，触发事件
focus()/blur()
change()
select() 当textarea或者文本类型的input文本内容被选择/选中时，会发生select事件

只有可编辑的文本和文本域等可以产生select事件

submit() 当提交表单时，发生submit事件
submit具有三个功能;

提交表单
阻止提交表单
提交表单时做一些我们所需要的做的事

<form action="javascript:alert('我被提交了！');">
    <input type="text">
    <input type="button" value="提交">
    <button>提交</button>
    <input type="submit">
</form>

//给按钮<input type="button" value="提交">调用submit事件，使它具有提交功能
$('input[type=button]').click(function(){
  $('form').submit();
});

//阻止提交表单
$('form').submit(function(){
    return false;
});

//表单验证
//$('input[type=text]').val() 获取文本框内输入的值
$('form').submit(function(){
  var inputValue = $('input[type=text]').val();
  if(inputValue!=='www.baidu.com'){
      return false;
  }
});
//简单的校验，只要输入的不是这个值，就无法提交表单

总结：

<button></button>不在form就是普通按钮
button在form中，相当于submit提交按钮
button是html5新增的
在ie中就是普通按钮
在非ie中就是提交按钮

事件参数

事件参数

event -- 我们需要通过event获取鼠标位置和键盘位置，否则监听事件无意义

所有事件都会传入event对象作为参数，可以从event对象上获取很多信息；

$(document).ready(function(){
  //定义一个起始位置
  var Index=5;
  $('a').mouseenter(function(){
    Index = $(this).index();
    Cut();
  });
  $(document).keydown(function(event){
    if(event.keyCode == 37){
      //左键
      // if(Index == 0){
      //  Index = $('a').length-1;
      // }else{
      //  Index--;
      // }
      // Cut();
      Index = Index>0?--Index:$("a").length-1;
    }else  if(event.keyCode == 39){
      //右键
      // if(Index == $('a').length-1){
      //  Index=0;
      // }else{
      //  Index++;
      // }
      // Cut();
      Index = Index<$('a').length-1?++Index:0;
    }else{
      return true;
    }
    Cut();
  });

  //封装切换图片
  var Cut = function(){
    $('img')
    .eq(Index)
    .css({'opacity':'1'})
    .siblings()
    .css({'opacity':'0'});
  }
});

事件绑定和取消

on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的时间处理函数

on里面至少要包含两个参数，事件类型和函数

$(document).ready(function(){
  //定义一个起始位置
  var Index=5;
  $(document).on('mouseenter','a',function(){
    event.stopPropagation();//防止事件冒泡
    Index = $(this).index();
    Cut();
  });
  $(document).on('keydown',function(event){
    event.stopPropagation();//防止事件冒泡
    if(event.keyCode == 37){
      //左键
      Index = Index>0?--Index:$("a").length-1;
    }else  if(event.keyCode == 39){
      //右键
      Index = Index<$('a').length-1?++Index:0;
    }else{
      return true;
    }
    Cut();
  });
  //封装切换图片
  var Cut = function(){
    $('img').eq(Index).css({'opacity':'1'}).siblings().css({'opacity':'0'});
  }
});

add()方法表示将元素添加到已存在的元素组合中

语法：$(选择器).add(element,context)
element: 必需。规定要添加到已存在的元素集合的选择器表达式、jQuery 对象、一个或多个元素、HTML 片段。
context: 可选。规定选择器表达式在文档中开始进行匹配的位置。

//把 <p> 和 <span> 元素添加到已存在的元素组合中（<h1>）
$('h1').add('p').add('span').css({
  'background-color':'yellow'
})

$(document).ready(function(){
  //定义一个起始位置
  var Index=5;
  $('a').add(document).on({
    mouseenter:function(){
      event.stopPropagation();//防止事件冒泡
      Index = $(this).index();
      //节点名称，或者叫做html元素
      console.log($(this)[0].nodeName);
      if($(this)[0].nodeName == 'A'){
            index = $(this).index();
      }else{
            return true;
      }
      Cut();
    },
    keydown:function(event){
      event.stopPropagation();//防止事件冒泡
      if(event.keyCode == 37){
        //左键
        Index = Index>0?--Index:$("a").length-1;
      }else  if(event.keyCode == 39){
      //右键
        Index = Index<$('a').length-1?++Index:0;
      }else{
        return true;
      }
      Cut();
    }
  });
  //封装切换图片
  var Cut = function(){
    $('img').eq(Index).css({'opacity':'1'}).siblings().css({'opacity':'0'});
  }
});

off(events,[selector],[data],fn) 在选择元素上移除一个或者多个事件处理函数
one(type,[data],fn) 为每一个匹配元素的特定事件（比如click）绑定一个一次性的时间处理函数

...
<button class="obj">这个按钮点击没有效果</button>
<button class="bind">绑定</button>
<button class="unbind">取消绑定</button>
<button class="one">绑定一次</button>
<div class="button" style="display:none;">第一个按钮被点击了！</div>
...

$(function(){
  //绑定事件
  //show()显示;fadeOut()渐隐;slow缓缓消失;fast快速消失
  //先显示一下隐藏的元素，然后元素再逐渐隐藏
  function flash(){
    $('.button').show().fadeOut("slow");
  }
  //事件绑定
  $(".bind").click(function(){
    $(document).on("click",".obj",flash).find(".obj").text("点击按钮有效果");
  });
  //取消事件绑定
  $(".unbind").click(function(){
    $(document).off("click",".obj",flash).find(".obj").text("这个按钮点击没有效果");
  });
  //绑定一次事件
  $(".one").click(function(){
    $(document).one("click",".obj",flash).find(".obj").text("这个按钮可以点击一次");
  });
});

动画DOM及其css操作

原理：

我们只需要以固定的时间间隔（0.1秒），每次DOM元素的css样式修改一点（例如:高度，宽度增加10%），看起来就像动画。

自定义动画

asnimate() 可以实现任意动画效果，需要传递的参数是DOM元素最终的css状态和时间。

var div = $("#test-animate");
div.animate({
opcaity:0.25,
width:'256px',
height:'256px
},3000);
//第一个参数：{}属性变化的对象
//第二个参数：动画执行的事件毫秒数

//封装切换图片
//会以动画的形式切换图片，但是查看图片过快会导致图片切换延迟
var swiper = function(){
  $('img').eq($(this).index()).animate({opacity:'1'},1000)
  .siblings().animate({opacity:'0'},1000);
}

//stop()在调用之前，先结束动画，再执行下一个函数，不会因查看图片过快而导致图片切换延迟
var swiper = function(){
  $('img').eq($(this).index()).stop().animate({opacity:'1'},1000)
  .siblings().stop().animate({opacity:'0'},1000);
}

delay() 方法可以实现动画暂停

//从宽度0%到100%，延迟3s
var swiper = function(){
    $('div').stop()
    .animate({'width':'0%'},1000)
    .delay(3000)
    .animate({'width':'100%'},1000);
}

动画函数 -- 类型1,2

show() / hide() 直接无参形式调用show()和hide()会显示和隐藏DOM元素，但是只要传递一个时间参数进去，就变成动画

var div = $('#test-show-hide);
div.hide(3000);//在3秒钟内逐渐消失

var swiper = function(){
  $('img').eq($(this).index()).stop().show('slow')
  .siblings().stop().hide('slow');
}

toggle() 根据当前状态决定是show() 和hide()
fadeIn() 和 fadeOut() 动画的淡入淡出，也就是通过不断设置DONM元素的opacity属性实现的。

var swiper = function(){
  $('img').eq($(this).index()).stop().fadeIn('slow')
  .siblings().stop().fadeOut('slow');
}

fadeToggle() 根据元素是否可见决定下一步动作

总结

show和hide会控制宽高和透明度
fade不控制宽高，只会控制透明度

动画函数 -- 类型3

slideDown slideUp 在垂直方向逐渐的展开或者收缩

var swiper = function(){
  $('img').eq($(this).index()).stop().slideDown('slow')
  .siblings().stop().slideUp('slow');
}

slideToggle() 根据元素是否可见决定下一步动作
总结：只控制高度以及透明度，但是不控制宽度。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：HY虚拟化硬盘直通虚拟硬盘怎么装系统

下一篇：创为用户zhang授予对cpb表有插入修改权限mysql 为创建的用户设置uid

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

jquery 模拟鼠标的位置进行点击 jquery 模拟双击

jquery 模拟鼠标的位置进行点击 jquery 模拟双击

jQuery事件

鼠标事件

类型1

类型2

类型3

类型4

类型5

键盘事件

类型1

类型2

类型3

其他事件

事件参数

事件绑定和取消

动画DOM及其css操作

原理：

自定义动画

动画函数 -- 类型1,2

总结

动画函数 -- 类型3

51CTO博客