JQ中的事件与应用

$(“a”).hover( function(){}, function(){} )
切换事件
切换事件
hover()方法： 代码2：
$(“a”).mouseenter(function(){ }) $(“a”).mouseleave(function(){ })
切换事件
切换事件
hover()方法： 由此可见，hover()的功能是当鼠标移到元素上时，执 行第一个元素；移出时执行第二个元素。语法如下： hover(in,out) in为鼠标移到元素时触发的函数，out为鼠标移出元 素时触发的元素。下面通过示例进行说明：
绑定事件
绑定事件
一个元素绑定多个事件： 在bind方法中，通过空格将事件隔开，可以绑定多个 事件。 $(function() { $("#btnBind").bind("click mouseout", function() { $(this).attr("disabled", "true"); //按钮不可用 }) })
绑定事件
绑定事件
可选参数data是作为event.data属性值传递给事件的 数据。 fn是绑定到事件的事件处理函数。 下面通过示例说明bind的用法：
绑定事件
绑定事件
方法绑定事件： 方法：bind(type,fn) 示例： 功能描述：页面中有一个按钮，绑定该按钮的click事 件，将自身不可用属性设置为true， 使得按钮单击后就不能被使用。 实现代码：示例\bind方法绑定事件.html
移除事件
移除事件
unbind方法移除事件： 方法：unbind([type],[fn]) 示例： 功能描述：设置三个按钮，前两个按钮设置指定的 事件，第三个按钮移除所有事件。点击 第三个按钮后，前两个按钮的事件响应 失效。 实现代码：示例\unbind方法移除事件.html 练习：如何使第二个按钮的点击失效，第一个不受影响？
JQuery选择器的介绍中，有专门的表单选择器，可见 表单在JQuery中有很重要的地位，在事件处理中，也针对 表单设计了特定的应用。
表单应用
表单应用
文本框中的事件应用： 方法： 示例： 功能描述：创建一个文本框，CSS与Jquery结合。当文 本框获取焦点时，同时提示输入的格式。 用户输入邮箱后，文本框丢失焦点时。将 检测邮箱是否为空或格式是否不正确，不 正确给出提示。正确给出一个打勾提示。 实现代码：示例\文本框中的事件应用.html
绑定事件
绑定事件
映射绑定事件： 方法：bind(type：fn1，type：fn2…) 示例： 功能描述：设置文本框，绑定focus事件和change 事件，两个事件执行时，显示事件名称 实现代码：示例\映射方式绑定不同事件.html
绑定事件
绑定事件
绑定事件时传递参数： 方法：bind(type，data，fn) 示例： 功能描述：设置文本框，绑定focus事件和change 事件，两个事件执行时，通过传递的参 数内容显示事件名称 。 实现代码：示例\过bind()方法绑定事件，与之相对的，通过 unbind()方法移除事件。该方法可以移出所有事件或指定 的事件，语法格式如下： unbind([type],[fn])，其中，type为事件类型，fn为事 件处理函数。如果该方法没有参数，移除所有绑定的事 件，如果带有参数type，则移出所有type类型的绑定事件 ，如果带有参数fn，移除指定的函数fn。
Jquery中的事件与应用
事件机制
什么是事件
事件本质就是对消息的封装，用作对象之间的通信；发 送方叫事件发送器，接收方叫事件接收器； 例如当用户浏览页面时，当页面加载时，执行一个load 事件，页面根据规定，做出第一次加载的种种操作：设置 背景色、显示欢迎界面等。
事件机制
事件的冒泡
事件在元素对象与功能代码间起到桥梁的作用，那么， 事件在触发后是如何执行代码的呢？ 事件在被触发后分为两个阶段，一是捕获，二是冒泡 但是大多数浏览器不支持捕获，JQ也不支持。因此在事件 触发后，执行冒泡。下面通过示例说明了冒泡现象： 示例：示例\事件中的冒泡.html
表单应用
表单应用
下拉列表框联动： 方法： 示例： 功能描述：页面中三个下拉列表框，分别保存厂商、 品牌、型号的数据，选择厂商时，品牌 随之改变；选择品牌时，型号随之改变。 单击查询按钮时，将选择呈现出来。 实现代码：示例\下拉列表框联动.html
谢谢！
body
div
按钮
事件机制
事件的冒泡
在实际应用中，我们希望单击按钮就执行单一的事件， 不要触发外面的元素事件。此时可以通过下面方法来阻止 事件的冒泡： event.stopPropatation() 尝试在前面示例中的click方法中加入stopPropatation， 观察冒泡是否被阻止。 说明：也可以通过return false来阻止冒泡的过程。
其他事件
其他事件
Jquery还有其他的事件处理方法，例如one()和 trigger()方法。语法格式如下： one方法： one(type,[data],fn)，其中，type为事件类型，data为 可选参数，表示作为event.data属性值传递给事件对象额 外的数据对象。fn为事件处理函数。
绑定事件
绑定事件
除了上述写法之外，也可以通过bind()方法进行事件 的绑定，语法为： bind(type,[data],fn) 其中，type为一种或多种类型的字符串，例如 “click”、“change”，可以存在的选择有：blur、focus load、resize、scroll、upload、click、dblclick、 mousedown、mouseup、mousemove、mouseover、 mouseout、mouseenter、mouseleave、change、select、 submit、keydown、keypress、keyup、error。
事件机制
事件的冒泡
奇怪的看到，在示例中单击了一次按钮，但是计数为3， 这是因为事件的执行存在冒泡现象。虽然单击的是按钮， 但是外围div的事件也被触发，之后div外围的body的事件也 被触发，整个事件波及的过程就像水泡一样向外冒，称为 冒泡现象。在上面的示例中，冒泡的过程如下图所示：
事件机制
事件的冒泡
绑定事件
绑定事件
练习：方法绑定事件： 方法：bind(type,fn) 示例： 功能描述：页面有一个加号按钮，绑定该按钮的click 事件，点击时自动添加元素，为新添加 的减号按钮绑定click事件，单击时删除。 元素。 实现代码：示例\练习-动态创建可删除节点.html
切换事件
切换事件
toggle()方法： 调用toggle方法时，可以依次调用指定的N个函数， 直到最后一个函数，然后重复对这些函数轮番调用。 下面是函数的使用形式： toggle(fn1,fn2,fn3…..)
切换事件
切换事件
toggle方法切换事件： 方法：toggle(fn1,fn2,fn3…) 示例： 功能描述：创建一个img，用户第一次单击该标志时 变换另外一幅图片，第二次单击时，显 示第三幅图片，第三次单击时，显示初 始图片。依次轮番显示。 实现代码：示例\hover切换事件.html
页面载入事件
Ready方法的几种写法
$(document).ready(function(){ 代码部分 }) $(function(){ 代码部分 }) jquery(document).ready(function(){ 代码部分 })
绑定事件
绑定事件
我们在示例“事件中的冒泡”中，利用了如下方法指 定元素的click事件： $(function() { $(“#btnShow").click(function(event) { }) })
其他事件
其他事件
trigger方法绑定事件： 方法： trigger(type,[data]) 示例： 功能描述：创建一个文本框，给它设置一个默认值。 页面加载时，自动获取文本框的值，显示 在页面中，同时文本框处于选中状态。 实现代码：示例\trigger方法绑定事件.html
表单应用
表单应用
切换事件
切换事件
hover方法切换事件： 方法：hover(in,out) 示例： 功能描述：创建一个div，在该标记中，设置另外两 个div，一个是标题，一个是内容，当鼠 标移到标题上时，自动显示内容，移出 时，关闭显示内容。 实现代码：示例\hover切换事件.html
切换事件
切换事件
页面载入事件
Ready方法的工作原理
第一章中，我们介绍了Jquery中ready方法和Javascript 中OnLoad方法的区别： OnLoad方法必须等页面元素都加载之后才能执行， 而ready方法只需要等页面DOM模型加载之后就能执行。
页面载入事件
Ready方法的工作原理
当Jquery脚本加载到页面时，会设置一个isReady标志 位，用于监听加载进度，当遇见ready方法执行时，检查 isReady是否被设置，如果未被设置，说明页面加载未完 成，此时将未完成的加载缓存起来，等执行完ready方法 后，将未完成部分一一执行。
Jquery中，有两个方法用于事件的切换：hover()和 toggle()。所谓切换事件，即有两个以上的事件绑定于 一个元素，在元素的行为动作间进行切换。如一个超级 链接标记，若想实现鼠标悬停时触发一个事件，鼠标移 出时触发另一个事件，利用hover()就可实现。
切换事件
切换事件
hover()方法： hover()可以使元素在鼠标悬停和鼠标移出间切换，在 实际运用中，也可通过mouseenter和mouseleave替换。 下面代码是等价的： 代码1：