1.jQuery中的事件

在jQuery中,事件总体分为俩大类:基础事件和符合事件。  jQuery中的简单事件,与Javascript中的事件

几乎一样,都含有鼠标事件、键盘事件、载件事件等,只是其对应的方法名称有略微不同。

符合事件则是截取组合了用户操作,并且以多个函数作为响应而自定义的处理程序。

常用事件分类:

基础事件:鼠标事件、键盘事件、window事件、表单事件

符合事件:鼠标光标悬停、鼠标连续点击

1.事件绑定和处理函数的语法格式如下:

基础事件语法:

事件名=“函数名()”;

或者:

DOM 对象 . 事件名=函数;

在事件绑定处理函数后,可以通过DOM对象 . 事件名() 的方式显示调用处理函数。

2.载入事件:

在jQuery中,常用的window事件有文档载入事件,它对应的方法是ready();

3.鼠标事件:

在上图可以看到,jQuery中事件的方法名称与JavaScript 的事件方法名称不一样,如单击事件。

在javascript 中写作 onclick,而在jQuery中为click。

mouseenter() 和 mouseover()用法一样,都是鼠标指针移至页面元素上时触发事件。

区别如下:

mouseover();鼠标指针进入被选元素时会触发mouseover事件,如果鼠标指针在其被选元素的子元素上来回

进入时也会触发mouseover事件。

mouseenter();鼠标指针进入被选元素时会触发mouseenter事件,如果鼠标指针在其被选元素的子元素上来

回进入时不会触发mouseenter事件。

mouseout();鼠标指针进入被选元素时会触发mouseout事件,如果鼠标指针在其被选元素的子元素上来回

进入时也会触发mouseout事件。

mouseleave();鼠标指针进入被选元素时会触发mouseleave事件,如果鼠标指针在其被选元素的子元素上来

回进入时不会触发mouseleave事件。

简单区别:

进入代码环节:

效果图:

1:但鼠标悬浮的时候 页面的背景颜色为:orange

2:但鼠标悬浮的时候 页面的背景颜色为:pink

4.键盘事件:

常用的键盘事件有 keydown、keyup、keypress

keydown 事件发生在键盘被按下的时候,keyup事件发生在键盘释放的时候,在keydown 和 keyup 之间会

触发另一个事件------keypress事件。当按下键重复产生字符时,在keyup事件之前可能产生很多

下面进入代码案例环节:

样式:

环境设置:

效果如下:

注意:输入密码时 下边同样会显示所调用方法的属性,在密码框是点击回车 就会弹出右边的提示框

keyCode==13 意思是当按下enter键时,CmdLogoln获得焦点

绑定事件和移除事件

1:绑定事件

语法:

bind(type ,[data],fn)

案例:

除了bind方法之外 还有on() live() one()

移除事件:

语法:

nubind([type],[fn])

复合事件:

方法:hover() 和 toggle()

hover():

语法:

hover(enter, leave);

toggle()

语法:

有参

toggle(fn1 ,fn2,fn3,........fnN);

无参

toggle();

toggleClass(className);

代码:

效果图:

元素的显示和隐藏

控制元素的显示:

语法:

$(selector).show([speed],[callback]);

控制元素隐藏:

语法:

$(select).hide([speed],[callback]);

改变元素的透明度:

$(select).fadeId([speed],[callback]);

控制元素淡出

语法:

$(select).fadeOut([speed],[callback]);

改变元素的高度:

$(selector).slidUp([speed],[callback]);

$(selector).slidDown([speed],[callback]);

自定义动画:

语法:

$(selector ).animate({params},speed,callback)

jQuery中的事件与驱动的更多相关文章

  1. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  2. jQuery:详解jQuery中的事件(二)

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  3. jQuery:详解jQuery中的事件(一)

    之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...

  4. jQuery学习笔记(三)jQuery中的事件

    目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一.加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...

  5. Javascript事件模型系列(三)jQuery中的事件监听方式及异同点

    作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...

  6. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  7. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  8. jQuery中的事件机制深入浅出

    昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...

  9. jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

随机推荐

  1. (转)c# 扩展方法

    扩展方法能够向现有类型“添加”方法,而无需创建新的派生类型,重新编译或以其他方式修改原始类型.扩展方法必须是静态方法,可以像实例方法一样进行调用.且调用同名中实际定义的方法优先级要高于扩展方法. 先来 ...

  2. Docker用途 & 和tomcat的区别

    两者不是同一种类型.1.docker 是容器,tomcat是jsp应用服务器2.tomcat可以安装在物理机上,虚拟机上,也可以安装在Docker上.所以从这个角度讲,Docker也可以看做是一种超轻 ...

  3. 《HTTP 权威指南》笔记:第三章 HTTP 报文

    如果说 HTTP 是因特网的信使,那么 HTTP 报文就是它用来搬东西的包了. 这一章讲述关于 HTTP 报文的相关知识,包括: HTTP 报文的三个组成部分 请求报文以及其各种功能 响应报文以及各种 ...

  4. win下使用VM虚拟机安装Linux系统

    自己电脑上还是有个自己的虚拟机比较方便,之前用的Ubuntu,发现卡得不行. 现在装了个轻量级的Lubuntu,速度提升了不少. 1.下载Lubuntu,安装. 2.进入,设置root密码,初始化ro ...

  5. Learning by doing——百日“扇贝打卡” 历程&展望

    Java结课了.如果说这学期学习这门课后最明显的成果,那就是写了那么多的博客吧.而如果说本学期最有里程碑的事,那就是背了100多天单词,其中还获得了徽章! 这次想说说从中学以来一直喜欢的一门课--英语 ...

  6. java中的Sort函数,你值得看

    基于C语言中的sort如此这么方便,自然而然,java中也有类似C的sort函数. 1.普通数组:Arrays.sort(数组名,开始位置,结束位置). 2.类中属性排序: 模板: class A { ...

  7. 结合canvas和jquery.Jcrop.js裁切图像上传图片

    1.引入的外部资源: jquery.Jcrop.css.jquery.Jcrop.js.upimg.js 2.使用的页面元素 @* 选择照片 *@ <div class="line&q ...

  8. Docker 只要一小时,零基础入门Docker(转)

    转自:https://zhuanlan.zhihu.com/p/23599229 推荐:https://hijiangtao.github.io/2018/04/17/Docker-in-Action ...

  9. git回退代码到某次commit

    回退命令: $ git reset --hard HEAD^ 回退到上个版本 $ git reset --hard HEAD~3 回退到前3次提交之前,以此类推,回退到n次提交之前 $ git res ...

  10. 四则运算Java语言实验设计过程1

    题目要求: 像二柱子那样,花二十分钟写一个能自动生成三十道小学四则运算题目的 “软件”.要求:除了整数以外,还要支持真分数的四则运算(需要验证结果的正确性).题目避免重复.可定制出题的数量. 设计思路 ...