基本事件介绍

  • 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. monowall

    https://www.cat-home.org/?action=show&id=158

  2. ctf平台

    CTF靶场 蓝鲸安全:http://whalectf.xin bugku:https://ctf.bugku.com XCTF攻防世界:https://adworld.xctf.org.cn/ i春秋 ...

  3. json系列(二)cjson,rapidjson,yyjson大整数解析精度对比

    前言上一篇介绍了3种json解析工具的使用方法,对于基础数据的解析没有任何问题.我们传输的json数据里有unsigned long型数据,需要借助json解析工具得到正确的unsigned long ...

  4. 【C# 线程】Windows系统下常见的7种I/O模型 之Overlapped I/O模型

    overview 这个字符到底是什么含义呢?其实它的意思就是当程序在等待设备操作的时候,可以继续往下做而不必阻塞到那个地方等待设备操作的返回,这就造成了程序运行和设备操作时间上的重叠.  Overla ...

  5. 决策树CART回归树——算法实现

    决策树模型 选择最好的特征和特征的值进行数据集划分 根据上面获得的结果创建决策树 根据测试数据进行剪枝(默认没有数据的树分支被剪掉) 对输入进行预测 模型树 import numpy as np de ...

  6. Weisfeiler-Lehman(WL) 算法和WL Test

    Weisfeiler-Lehman 算法 很多论文中会讲,从另一个角度来讲,GCN模型可以看作图上非常有名的 Weisfeiler-Lehman 算法的一种变形.那么什么是 Weisfeiler-Le ...

  7. Docker-可视化管理工具总结-推荐使用Portainer

    对于初学docker的小白,一款好的可视化工具有助于快速掌握docker基本形态和概念,下面针对docker可视化工具做些总结 ui-for-docker UI For Docker是一个使用Dock ...

  8. Python:读取二进制文件时使用print输出\x

    问题: 有二进制文件,通过open打开和read()读入并输出时,输出为\x十六进制编码,不能正确显示其具体代表的字符 with open(r'C:\Users\Le\Desktop\Test\tki ...

  9. WPS:在Word中插入Visio绘制的流程图

    在Word菜单栏 插入->对象 如果Visio绘图已经保存为了文件,可以选择由文件创建

  10. pyqt(二)

    二.文本和图片 1. 文本控件 文本控件是QLabel from PyQt5.QtWidgets import QWidget,QApplication,QLabel from PyQt5.QtCor ...