基本事件介绍

  • blur() 　　　　　　失去焦点
  • change() 　　　　　　改变(select)
  • click() 　　　　　　 单机
  • dbclick() 　　　　　　双击
  • error()　　　　　　 页面异常
  • focus() 　　　　　　 获得焦点
  • focusin() 　　　　　　jquery提供的额外事件。获得焦点。js focus。区别：focusin可以在父元素上检测到子元素获取焦点
  • fucusout() 　　　　　　jquery提供的额外事件。失去焦点。js blur。区别：fucusout可以在父元素上检测到子元素失去焦点
  • keydown() 　　　　　　键盘按下
  • keypress() 　　　　　　键盘按
  • keyup()　　　　　　 键盘弹起
  • mousedown()　　　　　　 鼠标按下
  • mouseenter() 　　　　　　jquery提供的额外事件。鼠标移入。js mouseover 区别：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
  • mouseleave() 　　　　　　jquery提供的额外事件。鼠标移出。js mouseout 区别：与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
  • mousemove()　　　　　　 鼠标移动
  • mouseover()　　　　　　 鼠标移入
  • mouseout() 　　　　　　 鼠标移出
  • mouseup() 　　　　　　鼠标弹起
  • resize() 　　　　　　改变大小
  • scroll() 　　　　　　滚动
  • select() 　　　　　　选择
  • submit() 　　　　　　提交
  • unload()　　　　　　 页面卸载(页面关闭)

代码实例

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 2 <html>

 3 <head>

 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 5 <title>Insert title here</title>

 6     <style type="text/css">

 7         #e02{

 8             border: 1px solid #000000;

 9               height: 200px;

10              width: 200px;

11         }

12

13     </style>

14     <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

15     <script type="text/javascript">

16         $(document).ready(function(){

17             $("#e01").blur(function(){

18                 $("#textMsg").html("文本框失去焦点：blur");

19             }).focus(function(){

20                 $("#textMsg").html("文本框获得焦点：focus");

21             }).keydown(function(){

22                 $("#textMsg").append("键盘按下：keydown");

23             }).keypress(function(event){

24                 $("#textMsg").append("键盘按下：keypress");

25             }).keyup(function(){

26                 $("#textMsg").append("键盘按下：keyup");

27             }).select(function(event){

28                 //支持谷歌

29                 var sub = $(this).val().substring(event.target.selectionStart,event.target.selectionEnd);

30                 $("#textMsg").html("文本内容被选中：select ， " + sub);

31             });

32

33             var i = 0;

34             $("#e02").mouseover(function(){

35                 $("#divMsg").html("鼠标移上：mouseover");

36             }).mousemove(function(){

37                 $("#divMsg").html("鼠标移动：mousemove , " + i++ );

38             }).mouseout(function(){

39                 $("#divMsg").html("鼠标移出：mouseout");

40             }).mousedown(function(){

41                 $("#divMsg").html("鼠标按下：mousedown");

42             }).mouseup(function(){

43                 $("#divMsg").html("鼠标弹起：mouseup");

44             });

45

46             $("#e03").click(function(){

47                 $("#buttonMsg").html("单击：click");

48             }).dblclick(function(){

49                 $("#buttonMsg").html("双击：dblclick");

50             });

51

52         });

53

54

55

56

57

58     </script>

59

60 </head>

61 <body>

62     <input id="e01" type="text" /><span id="textMsg"></span> <br/>

63     <hr/>

64     <div id="e02" ></div><span id="divMsg"></span> <br/>

65     <hr/>

66     <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>

67 </body>

68 </html>

jQuery--基本事件总结的更多相关文章

  1. JQuery基本事件函数

    1,click单击事件 2,blur失去光标事件,focus获得光标事件 3,JQuery.on()函数:为html元素绑定事件,如下代码: $("div").on("c ...

  2. jQuery(基本事件)

  3. jQuery的基本事件

    1.用法 <!--jquery通过bind()这个方法来为元素绑定事件,可以传三个参数,type.data.fn--> <!--type表示一个或者多个事件的名称--> < ...

  4. jquery的基本事件大全

    ].name); });jQuery.getScript( url, [callback] ) 使用GET请求javascript文件并执行. $.getScript(”test.js”, funct ...

  5. Jquery入门之---------基本事件------------

    Javascript有一个非常重要的功能,就是事件驱动. 当页面完成加载后,用户通过鼠标或键盘触发页面中绑定事件的元素即可触发.Jquery为开发者更有效率的编写事件行为,封装了大量有益的事件方法供我 ...

  6. jQuery代码优化：基本事件

    jQuery对事件系统的抽象与优化也是它的一大特色.本文仅从事件系统入手,简要分析一下jQuery为什么提供mouseenter和mouseleave事件,它们与标准的mouseover.mouseo ...

  7. 7 HTML&JS等前端知识系列之jquery的事件绑定

    preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...

  8. jQuery入门级part.2

    一,事件编程 基本事件: blur(fn)     当失去焦点时 change(fn)  当内容发生改变时 click(fn)    当鼠标单击时 dblclick(fn)  当鼠标双击时 focus ...

  9. jQuery 图片剪裁插件初探之 Jcrop

    主页:http://deepliquid.com/content/Jcrop.html 官方下载地址:http://deepliquid.com/content/Jcrop_Download.html ...

  10. Jquery 学习二

    一.事件编程 1.基本事件(以方法形式存在的) 基本语法: 原生Javascript代码中的事件绑定方式: DOM对象.事件 = 事件的处理程序   jQuery代码中的事件绑定方式: jQuery对 ...

随机推荐

  1. BI工具做数据可视化项目频频失败的原因

    现如今数据可视化可谓是非常之火,随着硬件价格的一降再降,仿佛做数据可视化项目,你没有数据大屏,你就没有逼格.理想很丰满,现实很骨感,并不是每一个数据可视化项目都能够成功.数据可视化项目的进行,无外乎是 ...

  2. shell中echo基础及高级用法详解-渐入佳境

    --作者:飞翔的小胖猪 --创建时间:2021年2月19日 1.1 基础用法 echo命令用来输出文本,在shell脚本中用来输出提示信息用的比较多. 单引号:原样输出所有的内容,不用转义就能输出特殊 ...

  3. JavaWeb-JDBC-Mybatis-Junit-Maven-Lombok

    Java与数据库 初识JDBC JDBC是什么? JDBC英文名为:Java Data Base Connectivity(Java数据库连接),官方解释它是Java编程语言和广泛的数据库之间独立于数 ...

  4. 革命性创新，动画杀手锏 @scroll-timeline

    在 CSS 规范 Scroll-linked Animations 中,推出了一个划时代的 CSS 功能.也就是 -- The @scroll-timeline at-rule,直译过来就是滚动时间线 ...

  5. WPF优秀组件推荐之Stylet（一）

    一.简介 Stylet是基于WPF的一款MVVM组件,虽然WPF本身是自带MVVM功能的,但实现起来不是很方便 ,通过Stylet,用户可以用很少的代码就能享受MVVM带来的舒适体验. 目前Style ...

  6. Java 多线程中的死锁概述

    死锁 死锁的定义 发生在并发中 当两个线程(或更多)线程(或线程)相互持有对方所需要的资源,又不主动释放,导致所有线程都无法继续执行,是程序陷入无尽的阻塞,这就是死锁. 如果多个线程之间的依赖关系是环 ...

  7. [动态规划] 适合DJ银行的日子

    [动态规划] 适合DJ银行的日子 前言:开始的时候用常规模拟做的超时了,然后看官方题解,大致意思就是连续n天单调可以用动态规划的思想 你和一群强盗准备打劫银行.给你一个下标从 0 开始的整数数组 se ...

  8. linux signal-list

    [root@bogon ~]# kill -l 1) SIGHUP 2) SIGINT 3) SIGQUIT 4) SIGILL 5) SIGTRAP 6) SIGABRT 7) SIGBUS 8) ...

  9. vscode中使用git

    vscode中使用git 使用vscode打开git的文件时,会自动的跟踪文件的改动, 如果要提交修改,首先点击+,这个相当于git add, 这样会暂时保存,然后点击上面的√,然后在输入栏中输入修改 ...

  10. Linux kernel serial_ir_init_module()释放后重利用漏洞

    受影响系统:Linux kernel < 5.1.6描述:-------------------------------------------------------------------- ...