Javascript有一个非常重要的功能,就是事件驱动。

   当页面完成加载后,用户通过鼠标或键盘触发页面中绑定事件的元素即可触发。Jquery为开发者更有效率的编写事件行为,封装了大量有益的事件方法供我们应用。

事件的简写形式:

  为了开发者更加方便的绑定事件,Jquery 封装了常用的事件以便节约更多的代码。  -------------》简写事件。

  下面我们来主要分析一下简写事件都有哪些?

  从触发的条件来看,可以分为:

          1:鼠标触发的事件;

          2:键盘触发的事件;

          3:文档触发的事件;

          4:表单触发的事件;

  为了便于大家更快的记忆,我为大家准备了这张图表来助于记忆与掌握:

  

<div style = "width:200px;height:200px;background:green;">
<p style = "width:100px;height:100px;background:red;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, officiis!
</p>
</div>
<strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, et quis nemo obcaecati earum consequuntur.</strong>

  

//mouseover事件
$("div").mouseover(function(){
$('strong').html(function(index,value){
return value+'1';
});
}); //click事件
$('div').click(function(){
$('strong').css('color','red');
});
//keypress事件
$('input').keypress(function(e){
alert(e.charCode);
});

  

好了!基本的事件就讲到这了,欢迎大家继续关注!

Jquery入门之---------基本事件------------的更多相关文章

  1. jQuery入门(1)jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  2. jQuery入门(2)使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  3. jQuery入门(3)事件与事件对象

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  4. jQuery入门(4)jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  5. JQuery入门

    JQuery入门 1 jQuery的概述 1.1 jQuery简介 jQuery是一个 JavaScript函数库,它是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极 ...

  6. jQuery入门必须掌握的一些API

    jQuery 中文版文档:http://www.css88.com/jqapi-1.9/category/ajax/ jQuery入门,必须掌握以下的API,平时工作中经常会用到.未列出的API,在掌 ...

  7. Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...

  8. jquery(入门篇)无缝滚动

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. 第一百六十二节,jQuery入门介绍

    jQuery入门 学习要点: 1.什么是  jQuery 2.学习 jQuery的条件 3.jQuery的版本 4.jQuery的功能和优势 5.其他 JavaScript库 6.是否兼容低版本  I ...

随机推荐

  1. df、du、fdisk:Linux磁盘管理三板斧的使用心得(转载)

    From:http://os.51cto.com/art/201012/240726_all.htm 作者介绍:李洋(博客),博士毕业于中科院计算所.10多年来一直从事计算机网络信息安全研发工作,曾主 ...

  2. 01.base-v1.js

    /* Date: 2014-01-21 */ function login() { return location.href = "https://passport.jd.com/new/l ...

  3. JSON序列化和反序列化

    public class JSONHelper { public static string Serialize<T>(T obj)//序列化为JSON { System.Runtime. ...

  4. [ZOJ 1011] NTA (dfs搜索)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1011 题目大意:在一棵树上,给你起始状态,问你能否到达终止状态. ...

  5. GCD 深入理解(一)

    http://www.cocoachina.com/industry/20140428/8248.html 本文由@nixzhu翻译至raywenderlich的<grand-central-d ...

  6. Hive参数层面常用优化

    1.hive数据仓库权限问题: set hive.warehouse.subdir.inherit.perms=true; 2.HiveServer2的内存 连接的个数越多压力越大,可以加大内存:可以 ...

  7. Android性能优化之:ViewStub

    ViewStub是Android布局优化中一个很不错的标签/控件,直接继承自View.虽然Android开发人员基本上都听说过,但是真正用的可能不多. ViewStub可以理解成一个非常轻量级的Vie ...

  8. js对象2--工厂模式的由来--杂志

    一:工厂模式引入前提例子 先看一个案例 <script type="text/javascript"> var person= new Object(); //创建一个 ...

  9. CSS3里的常用选择器总结

    选择器       属性选择器:  img[src="images/2.jpg"]               开头匹配:  a[href ^="page/"] ...

  10. Start:at cnblogs firstDay

    C#旨在设计成为一种"简单.现代.通用",以及面向对象的程序设计语言,此种语言的实现,应提供对于以下软件工程要素的支持:强类型检查.数组维度检查.未初始化的变量引用检测.自动垃圾收 ...