本节目录

----------①鼠标事件

----------②键盘事件

----------③表单事件

----------④文档窗口事件

----------⑤举例，按下回车键触发事件

事件函数

指当THNL文档中发生某些事件时调用的函数方法，通常把事件处理方法放到<head>的jQuery中

常用的事件：

.ready()文档就绪事件

一、鼠标事件

.click()鼠标点击事件

.dbclick()鼠标双击事件

.mouseenter()鼠标穿过时事件

.mouseleave()鼠标离开时事件

.mousemove()鼠标移上时事件

.mouseover()鼠标位于元素上方时事件

.mouseup()鼠标松开事件

.mousedown()鼠标按下事件

二、键盘事件

.keydown()键盘按下事件

.keyup()键盘松开事件

.keypress()只在输入字符时获得事件，每个字符一次事件

三、表单事件

.submit()提交表单时事件

.change()输入域发生变化时事件

.focus()输入框被选中获得焦点时事件

.blur()输入框失去焦点时事件

四、文档窗口事件

.load()指定元素已经加载时事件

.resize()浏览器窗口改变事件

.scroll()可滚动元素滚动时事件（window对象可用）

.unload()离开关闭页面时发生事件

五、按键回车事件

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">

</script>

<script>

        $(function(){

                document.onkeydown = function(e){

                    var enter = document.all ? window.event : e;

                    //变量ev使用三元运算符定义 判断 ie浏览器？ 结果1=ie浏览器 ： 结果2=e

                    if(enter.keyCode==13) {

                        $("#picture").css({"display":"block"});//处理事件

                    }

                    else{

                        $("#picture").css({"display":"none"});

                    }

                }

        });

</script>

</head>

<body>

    <img src="../../博客/2.jpg" alt="小脸" style="display: none;" id="picture" />

</body>

</html>

早期自学jQuery-二事件的更多相关文章

  1. jQuery(二)事件

    鼠标事件: click dblclick mouseenter:鼠标进入 mouseleave:鼠标离开 hover:鼠标悬停 <!DOCTYPE html> <html> & ...

  2. jQuery:自学笔记(4)——事件与事件对象

    jQuery:自学笔记(4)——事件与事件对象 jQuery中的事件 什么是事件 所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...

  3. JQuery知识快览之二—事件

    事件是脚本语言的核心.本文将为大家介绍JQuery支持的一些事件和如何自定义事件 JQuery内置事件 1.Document加载事件 JQuery提供了ready,load,unload三个Docum ...

  4. jQuery学习-事件之绑定事件（二）

    在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) {   ...

  5. HTML 事件(二) 事件的注册与注销

    本篇主要介绍HTML元素事件的注册.注销的方式. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流.事件委托 4. ...

  6. Jquery的事件操作和文档操作

    对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...

  7. 深入学习jQuery鼠标事件

    × 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...

  8. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  9. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...

  10. jQuery的事件change

    人生还在继续,只有不断补充以前所不懂的知识,今天练习一个jQuery的事件change.这个事件是在对象失去focus并且原本值有所变化时就产生此事件.如select时,用户所选择的选项有变时,或是t ...

随机推荐

  1. Python基础10_函数

    直接贴笔记 : #!/usr/bin/env python # coding:utf-8 # 定义函数时要写成良好的注释习惯 通常用三个单引号 def test(x): ''' 计算一个y=2*x+1 ...

  2. Van Emde Boas Tree

    van Emde Boas trees 支持所有优先级优先级队列的操作,并且巧妙的是它对于SEARCH, INSERT,DELETE,MINIMUM,MAXMUN,SUCCESSOR,和PREDECE ...

  3. iOS Runtime 实操练习

    iOS  Runtime 知识详解: http://yulingtianxia.com/blog/2014/11/05/objective-c-runtime/ 一般可以运行Runtime进行以下操作 ...

  4. MacBook使用笔记2 - 安装windows虚拟机攻略

    转载请标注原链接:http://www.cnblogs.com/xczyd/p/5498878.html 5月初从阿里滚粗,然后失去了公司发的Mac Air.说实话Mac机器确实比windows好用一 ...

  5. 求数组的相邻子数组的最大值（txt文件存储）

    package mypackage; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File ...

  6. html走马灯效果

    实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实现,我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句,它的效果如下所示: ...

  7. 【java多线程】队列系统之PriorityBlockingQueue源码

    一.二叉堆 如题,二叉堆是一种基础数据结构 事实上支持的操作也是挺有限的(相对于其他数据结构而言),也就插入,查询,删除这一类 对了这篇文章中讲到的堆都是二叉堆,而不是斜堆,左偏树,斐波那契堆什么的  ...

  8. JS 格式化日期时间

    方法一: // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1 ...

  9. tcpdump抓包常用参数和用法

    tcpdump 与wireshark Wireshark(以前是ethereal)是Windows下非常简单易用的抓包工具.但在Linux下很难找到一个好用的图形化抓包工具.还好有Tcpdump.我们 ...

  10. 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息（包括：development、production）

    使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...