首页 > 其他分享 >jquery的几种常见事件

jquery的几种常见事件

时间:2023-06-30 12:45:18浏览次数:44  
标签:jquery function 常见 鼠标 触发 元素 几种 事件 fn

1.事件ready(fn)

当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。通俗的来讲就是当页面加载完时就会执行此函数事件。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。

$(document).ready(function(){
  // 在这里写你的代码...
});

使用 $(document).ready() 的简写(最常用),同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何。

$(function($) {
  // 你可以在这里继续使用$作为别名...
});

2.单击事件 click([[data],fn])

触发每一个匹配元素的click事件。

这个函数会调用执行绑定到click事件的所有函数。

//为id为btn的按钮添加单击事件
 $("#btn").click(function(){
              alert("触发单击事件");
          })
//单击p后,该p被隐藏
$("p").click( function () { $(this).hide(); });

3.双击事件 dblclick([[data],fn])

当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。在很短的时间内发生两次 click,即是一次 double click 事件。提示:如果把 dblclick 和 click 事件应用于同一元素,可能会产生问题。

 //为id为btn的按钮添加双击事件
$("#btn").dblclick(function(){
              alert("触发双击击事件");
          })

4.鼠标移入事件 mousemove([[data],fn])

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

mousemove事件处理函数会被传递一个变量——事件对象,其.clientX 和 .clientY 属性代表鼠标的坐标

不论鼠标指针离开被选元素还是任何子元素,都会触发mousemove事件。只有在鼠标指针离开被选元素时,才会触发 mouseenter 事件。

  //当鼠标移入页面获得鼠标指针在页面中的位置,显示在span中
$(document).mousemove(function(e){
  $("span").text(e.pageX + ", " + e.pageY);
});

5.鼠标移出事件 mouseout([[data],fn])

当鼠标指针从元素上移开时,发生 mouseout 事件。

该事件大多数时候会与 mouseover 事件一起使用。

注释:与 mouseleave 事件不同,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。请看下面例子的演示。

   //当鼠标从元素上移开时,改变元素的背景色:
$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4");
});

6.鼠标复合事件(hover([over,]out))

一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

$("td").hover(
   //鼠标悬停的表格加上特定的类
  function () {
    $(this).addClass("hover");//不同于js,addClass不会覆盖原来的类,而是可以两个类共用
  },
     //鼠标移出的表格加删除类
  function () {
    $(this).removeClass("hover");
  }
);

7.键盘按下事件 keydown([[data],fn])

当键盘被按下时,发生 keydown 事件。

注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。

 $(window).keydown(function(event){
    //当在页面按下键盘,弹出该键的Keycode
        alert(event.keyCode);
    // ...
    // 不同的按键可以做不同的事情
    // 不同的浏览器的keycode不同
    // 更多详细信息:     http://unixpapa.comjs/key.html
    // 常用keyCode: 空格 32   Enter 13   ESC 27

});

8.键盘松开事件 keyup([[data],fn])

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

注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。

$("input").keyup(function(){
    //键盘松开,改变文本域颜色
  $("input").css("background-color","red");
});

9.键盘打字事件 keypress([[data],fn])

当键盘或按钮被按下时,发生 keypress 事件。

keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。 不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。

$("input").keypress(function(){
    //键盘产生可打印字符
  alert(“键盘打字”);
});

10.元素获得焦点 focus([[data],fn])

当元素获得焦点时,触发 focus 事件。

可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数,注意,某些对象不支持focus方法。

//为type=text的文本框添加获得焦点事件
$("input[type=text]").focus(function(){
//使人无法使用文本框:
  this.blur();//当前节点失去焦点
});

11.元素失去焦点 blur([[data],fn])

当元素失去焦点时触发 blur 事件。

这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的。

//任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。
$("p").blur( function () { alert("Hello World!"); } );

12.元素值改变 change([[data],fn])

当元素的值发生改变时,会发生 change 事件。

该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。

$("input[type='text']").change( function() {
  // 这里可以写些验证代码
});

13.表单提交事件 submit([[data],fn])

当提交表单时,会发生 submit 事件。

该事件只适用于表单元素。

//提交本页的第一个表单
$("form:first").submit();

//如果你要阻止表单提交:
$("form").submit( function () {
  return false;
} );

 

 

标签:jquery,function,常见,鼠标,触发,元素,几种,事件,fn
From: https://www.cnblogs.com/cloudnine/p/17516357.html

相关文章

  • (转)k8s常见的资源对象使用
    原文:https://www.cnblogs.com/cyh00001/p/16555344.html一、kubernetes内置资源对象1.1、kubernetes内置资源对象介绍1.2、kubernetes资源对象操作命令官网介绍:https://kubernetes.io/zh-cn/docs/concepts/workloads/controllers/deployment/二、job与cronjob计划任务2.1......
  • jquery是什么?有什么用,跟js的关系
    #jquery是什么?有什么用,跟js的关系jQuery就是一个快速、简介的js库,把一些常用的方法写到一个单独的js文件,使用的时候直接引用这个js文件,其设计宗旨是倡导写更少的代码,做更多的事情j就是js,Query就是查询;意思就是查询js,把js的DOM做了封装,我们就可以快速的查询使用里面的功能jQue......
  • jQuery
    jQuery简介简化DOM操作:jQuery提供了简单而强大的选择器,可以轻松地选取HTML元素,并对其进行操作。通过使用jQuery的方法,可以轻松地操纵元素的属性、样式、内容等。事件处理:jQuery简化了事件处理的过程。可以使用jQuery的事件绑定方法来附加事件处理程序,例如点击、鼠......
  • jQuery实操练习题
    题目:创建一个点击按钮显示/隐藏文本的功能要求:在HTML中创建一个按钮元素和一个文本元素。使用jQuery实现点击按钮时,文本的显示和隐藏切换。初始状态下,文本应该是隐藏的。当用户点击按钮时,如果文本是隐藏的,则显示文本;如果文本是显示的,则隐藏文本。提示:可以......
  • 清除SQL Server数据库日志(ldf文件)的几种方法
    随着系统运行时间的推移,数据库日志文件会变得越来越大,这时我们需要对日志文件进行备份或清理。  随着系统运行时间的推移,数据库日志文件会变得越来越大,这时我们需要对日志文件进行备份或清理。  解决方案1-直接删除本地ldf日志文件:(比较靠谱方案!)  1.......
  • 还原 SM2 压缩公钥的几种方法
    写这篇文章的起因是朋友让我帮忙解决一个与SM2算法加密相关的问题。由于我对SM2算法并不熟悉,因此在解决问题的过程中走了很多弯路,花了很多时间去了解SM2算法以及如何通过代码还原压缩公钥。随着越来越多的系统采用国密算法,我们在与其对接时难免会遇到类似的问题。然而,关于这......
  • C#常见编译错误记录
    C#引用类库时出现黄色三角加感叹号的处理方法,一个C#项目在引用中有个引用项上有个黄色三角加感叹号导致报错。解决:类库的目标框架不一致,修改成一样就可以了。选中类库右击属性;“目标框架”,修改成与引用项目目标框架一致即可。 ......
  • jQuery实操练习题
    ##题目:创建一个点击按钮显示/隐藏文本的功能要求:-在HTML中创建一个按钮元素和一个文本元素。-使用jQuery实现点击按钮时,文本的显示和隐藏切换。-初始状态下,文本应该是隐藏的。-当用户点击按钮时,如果文本是隐藏的,则显示文本;如果文本是显示的,则隐藏文本。提示:-可以使用jQ......
  • JQUERY基础知识
    JQUERYJQuery简介jQuery是什么?有什么用,跟js的关系jQuery是一个JavaScript库,它简化了客户端JavaScript编程的过程,特别是针对HTML文档遍历和操作、事件处理、动画效果和Ajax操作。使用jQuery可以更容易地编写可维护的JavaScript代码,同时提高了跨浏览器的兼容性jQuery安装方式......
  • elecrton 中使用jquery
    其他库都行,就是jquery需要额外配置参考:https://blog.csdn.net/sinat_28734889/article/details/77869455引入jquery后判断<scriptsrc="https://code.jquery.com/jquery-2.2.0.min.js"></script><script>if(typeofmodule==='object'){window.jQ......