jQuery--基本事件总结
基本事件介绍
- 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--基本事件总结的更多相关文章
- JQuery基本事件函数
1,click单击事件 2,blur失去光标事件,focus获得光标事件 3,JQuery.on()函数:为html元素绑定事件,如下代码: $("div").on("c ...
- jQuery(基本事件)
- jQuery的基本事件
1.用法 <!--jquery通过bind()这个方法来为元素绑定事件,可以传三个参数,type.data.fn--> <!--type表示一个或者多个事件的名称--> < ...
- jquery的基本事件大全
].name); });jQuery.getScript( url, [callback] ) 使用GET请求javascript文件并执行. $.getScript(”test.js”, funct ...
- Jquery入门之---------基本事件------------
Javascript有一个非常重要的功能,就是事件驱动. 当页面完成加载后,用户通过鼠标或键盘触发页面中绑定事件的元素即可触发.Jquery为开发者更有效率的编写事件行为,封装了大量有益的事件方法供我 ...
- jQuery代码优化：基本事件
jQuery对事件系统的抽象与优化也是它的一大特色.本文仅从事件系统入手,简要分析一下jQuery为什么提供mouseenter和mouseleave事件,它们与标准的mouseover.mouseo ...
- 7 HTML&JS等前端知识系列之jquery的事件绑定
preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...
- jQuery入门级part.2
一,事件编程 基本事件: blur(fn) 当失去焦点时 change(fn) 当内容发生改变时 click(fn) 当鼠标单击时 dblclick(fn) 当鼠标双击时 focus ...
- jQuery 图片剪裁插件初探之 Jcrop
主页:http://deepliquid.com/content/Jcrop.html 官方下载地址:http://deepliquid.com/content/Jcrop_Download.html ...
- Jquery 学习二
一.事件编程 1.基本事件(以方法形式存在的) 基本语法: 原生Javascript代码中的事件绑定方式: DOM对象.事件 = 事件的处理程序 jQuery代码中的事件绑定方式: jQuery对 ...
随机推荐
- python-利用json模块处理json数据几个函数总结
1.前言 json是一种轻量级的数据交换格式,它是JavaScript的子集,易于人阅读和编写. 前端和后端进行数据交互,其实就是JS和Python进行数据交互. 接口间或者前后端间的语言不一致,不同 ...
- 命令行下Git调用IDEA的diff功能
命令行下git diff, 有人欢喜有人厌, 本文以IDEA diff为例, 介绍如何更换Git的diff工具. IDEA diff IDEA作为一个图形化工具, 其实也提供了极少一部分命令行接口, ...
- 一个快速制作表格的方法，和熬夜做表say拜拜
如今已是大数据时代了,统计工作是非常繁琐的一项工作,通常统计老师为了录单工作到下半夜或者是通宵,现在有了很多制作表单的软件,可以大大减轻基层统计老师的工作量,也增加了会员资料的保密性,给我们统计工作带 ...
- 什么是句柄C#
话不多说,下面分享下我对句柄的看法. 如果没有意外的话,ABCDE他们将依次进行占用CPU资源.但是可能会发生如下情况 句柄,就是用来维护进程或者系统范围内的一个标识.就比如我们去访问一个文件的时候, ...
- Arava: 写一个控制台风格的Mp3播放器
Mp3播放器 来写一个控制台版的mp3播放器.以前很喜欢 cmd.fm 这种控制台风格的播放器. 播放mp3使用 mp3spi 库:下载mp3spi库文件,解压,拿出根目录下的 mp3spi1.9.5 ...
- VSCode空格变成虚点
"editor.renderWhitespace": "all",
- Appium+ios环境搭建
appium 环境搭建 安装homebrew(Mac OSX上的软件包管理工具) $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubuse ...
- C++_Leecode20有效的括号
一.题目介绍 1.题目描述 给定一个只包括 '(',')','{','}','[',']' 的字符串 s ,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正 ...
- PHP底层运行原理简括
PHP是一种适用于web开发的动态语言.具体点说,就是一个用C语言实现包含大量组件模块的软件框架.是一个强大的UI框架. 简言之:PHP动态语言执行过程:拿到一段代码后,经过词法解析.语法解析等阶段后 ...
- QQ聊天记录快速迁移
QQ聊天记录快速迁移 在工作中大家经常会用到QQ来沟通,但是很多时候在其它设备上登录QQ就无法查看到之前的聊天记录和图片,这是因为电脑上的QQ聊天记录一般都是保存在电脑本地硬盘里,所以我们在换设备登录 ...