jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件处理能力。 ...一、jQuery中的事件 1、加载DOM: 执行时机:在常规的JavaScript中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法...要解决这个问题,可以使用jQuery中的另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数。...change,resize,mouseenter,keyup,scroll,focus,mouseleave,blur,unload等,也可以是自定义事件名称。...明天继续完成jQuery事件的下半部分,包括的内容有合成事件、事件冒泡、移除事件等内容。
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。 ...接上篇jQuery:详解jQuery中的事件(一) 3、合成事件 jQuery有两个合成事件——hover()方法和toggle()方法,同ready()方法一样,这些都是jQuery自定义的方法...*这里要注意的一点是,jQuery的hover()方法准确来说是替代jQUery中的bind("mouseenter")和bind("mouseleave"),而不是替代bind("mouseover"...这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后,事件对象就被销毁。 停止事件冒泡:停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。...5、移除事件:在绑定事件的过程中,不仅可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件。在此就不举例说明了。
jQuery根据 W3C 标准规范了事件对象,所以在jQuery事件回调方法中获取到的事件对象是经过兼容后处理过的一个标准的跨浏览器对象 ...DOM元素; .this和event.target都是dom对象 如果要使用jquey中的方法可以将他们转换为jquery对象。...',['参数1','参数2']) trigger触发浏览器事件与自定义事件的区别 自定义事件对象,是jQuery模拟原生实现的 自定义事件可以传递参数 triggerHandler事件 trigger事件还有一个特性...:会在DOM树上冒泡,所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡 trigger事件是具有触发原生与自定义能力的...() 会影响所有与 jQuery 对象相匹配的元素,而 .triggerHandler() 仅影响第一个匹配到的元素 使用 .triggerHandler() 触发的事件,并不会在 DOM 树中向上冒泡
e.target == $("#id/.class")[0]) { //函数体 } }); }); target 属性规定哪个 DOM 元素触发了该事件
jquery_shijian_function.html... jquery.js"> ...background-color","red"); }, function(){ $("body").css("background-color","yellow");//注意yellow的写法...--class="change"不能放在此里面,因为其改变的是框内的背景颜色--> Input anything:<input type="text" name="inputtext" class
案例1:测试两种方式的区别【个数+顺序】 1.2. 绑定事件两种方式 1.2.1....事件传播(事件冒泡) 1.4.1. 传播:小---->中---->大 1.4.2....(事件冒泡) //给p标签添加点击事件现在点击p标签的内容 就可以触发事件,点击页面的其它位置不会触发。...; }) //给div添加点击事件,点击了p标签就会触发到两个事件,p属于div的一部分。...// $("#xy").text(x+","+y); // }) //pageX:页面左上角的坐标 //给div添加鼠标移动事件,求出以网页左上角为0,0 起始点的
= $("#div1") // 鼠标点击 $li.click(function(){ // this指的是当前发生事件的对象...,但是它是一个原生js对象 // this.style.background = 'red'; // $(this) 指的是当前发生事件的jquery对象...$(this).css({'background':'gold'}); // 获取jquery对象的索引值,通过index() 方法...,但是它是一个原生js对象 $(this) 指的是当前发生事件的jquery对象 2....小结 jQuery常用事件: click() 鼠标单击 blur() 元素失去焦点 focus() 元素获得焦点 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发
parent > child在给定的父元素下匹配所有的子元素 参数 parentSelectorV1.0 任何有效选择器 childSelectorV1.0 用以匹配元素的选择器,并且它是第一个选择器的子元素...label>Newsletter: jQuery...me.removeClass('dataTitle').siblings('a').addClass('dataTitle'); return false; }); siblings([expr]) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合...Hello AgainAnd Again $("div").siblings() 结果:[ Hello, And Again ] 添加点击事件...,使用与动态添加的节点,自带的节点可以直接使用.click方法。
1 鼠标事件 click() ------- 鼠标单击事件 dbclick() -------鼠标双击事件 mouseenter() ...-------鼠标移入事件 mouselever() ------鼠标移出事件 hover() ------光标悬停事件 2 键盘事件 keydown(...注意: shift、alt、ctrl等键按下并不会产生字符,所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。 ...如果是keypress事件中,则拿到ASCII码. } ); 案例2:传递数据给事件处理函数 语法: jQueryObject.keydown( [[ data ,] handler ] ); data...: 通过event.data传递给事件处理函数的任意数据; handler: 指定的事件处理函数; 举例: // 只允许按下的字母键生效, 65~90是所有小写字母的键盘代码范围. var validKeys
jQuery 是为事件处理特别设计的。 ---- 什么是事件? 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 实例: 在元素上移动鼠标。...keyup focus scroll mouseleave blur unload hover jQuery 事件方法语法 在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery...}); ---- 常用的 jQuery 事件方法 $(document).ready() $(document).ready() 方法允许我们在文档完全加载完后执行函数。...该事件方法在 jQuery 语法 章节中已经提到过。 click() click() 方法是当按钮点击事件被触发时会调用一个函数。 该函数在用户点击 HTML 元素时执行。...在下面的实例中,当点击事件在某个 元素上触发时,隐藏当前的 元素: 实例 $("p").click(function(){ $(this).hide(); }); dblclick(
注意:自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。...jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。...该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。 注意:如需移除指定的事件处理程序,当事件处理程序被添加时,选择器字符串必须匹配 on() 方法传递的参数。...DOM 元素 event.data 包含当前执行的处理程序被绑定时传递到事件方法的可选数据 event.delegateTarget 返回当前调用的 jQuery 事件处理程序所添加的元素 event.isDefaultPrevented...常用jQuery事件的范例代码 <!
前几天自己着重读了jQuery1.11.1的源码,又结合了之前对DE事件模型的分析,最后也实现一个简陋的事件模型。 jQuery的事件系统离不开jQuery的缓存系统。...jQuery的第一代缓存是直接将数据存储在 缓存体 这个数据结构中,但是需要在元素上添加一个uuid来作为标示, 标记在缓存体中的位置。...所以jQuery第二代缓存系统应运而生,这次不对元素进行添加属性,而是判断元素的valueOf()方法的返回值,如果没有返回值是 对象,则说明缓存体中并没有该元素的缓存数据,进而使用ECMA5的Object.defineProperty...简单讲述了缓存系统,现在着重讲解下jQuery的事件系统: 主要使用了几个数据结构,即元素的缓存体,Event构造函数,和Handler构造函数。 ...其次就是对fn的封装,在库中,fn的包装函数 实现了新事件对象的创建,以及对新创建的事件对象的修补,并调整了在回调中this的指向。
一、事件 在1.7之前的版本中jQuery处理事件有多个方法, (google 搜索: jquery live bind degelate)作用各不相同,后来统一的使用on/off方法 1、.on( events...,所谓的命名空间就相当于给这个事件命名,我删除事件的时候就只删除对应这个,不会误伤这个事件类型的其他事件 $('.box li').on('click.hello', function(){ var...jQuery提供"linear(线性)" 和 "swing(旋转)" 参数3:完成后执行的函数 $('.target').hide(); $('#book').hide(300, 'linear',...上面几个简单的动画不能满足需求的时候,jquery提供了自定义动画行为的方法 1、.animate( properties [, duration ] [, easing ] [, complete...: '+=50', height: 'toggle' }, 5000, function() { // Animation complete. }); }); 2、.clearQueue 清除动画队列中未执行的动画
//以下内容是jQuery中的一部分(仅供参考) 事件 加载Dom两种方式 加载事件我们有两种方式,一种就是javascript直接写:window.onload来加载。...还有一种就是我们的jQuery中的加载方式$(function(){}) window.onload方式 window.onload:在整个月面中所有内容加载完成后,才会执行事件。...); }) 在理论上面jQuery方式的加载事件要比window.onload方式的加载事件先执行。...在jQuery类库的不同版本中效果可能不太一样(1.0、2.0、3.0),和浏览器也有关系 案例1:测试两种方式的区别【个数+顺序】 区别1:顺序,上面我们已经测试了,理论上先执行jQuery方式...因为p是在div中,属于div的一部分。
,但是有时候我们想根据业务需求,新增一些自定义的事件,比如:客人进线后,如果分配到了一个空闲的客服,希望触发一个特定的事件。...这里有几个要注意的地方: 1. 系统自带的默认通道变量,比如Caller-ANI,在自定义事件中并不能通过赋值的方式篡改。...每一次自定义事件的触发,设置的业务变量(比如:上面的MY-VAR-1),只在本次事件中有效,并不象freeswitch自带的变量,可以一直传递到后面的事件中。 3....如果需要添加自定义变量,且一直能向下传递到所有事件中,可以用export导出变量 exe.export("MY-VAR-2", "something", true); 而且用export导出的变量,在取值时...订阅事件时,可以指定订阅指定事件,上面的示例中,我们用的是ALL,即订阅所有事件。
1. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制,是开发人员抑郁操作优缺点如下: 优点: 操作简单,且不用担心事件覆盖等问题。...事件处理 因为普通注册事件方法的不足,jQuery又开发了多个处理方法,重点讲解如下: on(): 用于事件绑定,目前最好用的事件绑定方法 off(): 事件解绑 trigger().../ triggerHandler(): 事件触发 2.1 事件处理 on() 绑定事件 因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() /...案例:发布微博案例 1.点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中。2.点击的删除按钮,可以删除当前的微博留言。 ...代码实现 $(function () { // 1.点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中 $
/jquery-1.10.1.min.js"> $(function() { /*想要自定义事件..., 必须满足两个条件 1.事件必须是通过on绑定的 2.事件必须通过trigger来触发 */ /* $(".
handler 每次事件出发会执行的函数。 ...handler 每次事件出发会执行的函数。 ...handlerOut 当鼠标指针离开元素时候触发执行的事件函数。 ...}, function(){ $(this).removeClass("hover") } ); 鼠标在表格单元格中来回滑动的时候添加特殊的样式...,触发的事件。
搜索功能举例 jquery回车监听事件在最后那行代码 define('widget/search.js', [], function (require, exports, module) {...').on('click', function (e) { search(); }); } }; //回车监听事件...function (event) { if (event.keyCode == 13) { search(); } }); }); HTML自定义属性的应用...考虑到搜索功能是网站的公共功能,可以从多个页面跳转到搜索页,故做如下优化: html自定义属性,区分是从哪个页面跳转到搜索 在public.js中初始化搜索(public.js会被所有页面引入) js...根据type(页面来源)和keyword(关键字)进行搜索 html代码 data-act的作用: public.js据此判断是搜索功能还是其他功能 data-role的作用: search.js 据此判断搜索的类型
(摘自网络) 如何来阻止Jquery事件冒泡?...,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转) 2.return false; 事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转) 还有一种有冒泡有关的...: 3.event.preventDefault(); 如果把它放在头部A标签的click事件中,点击“点击我”。 ...会发现它依次弹出:我是最里层---->我是中间层---->我是最外层,但最后却没有跳转到百度 它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)...友情提示:事件冒泡不一定是个坏的东西,有些情况会让不同层次捕获不同的事件!