上一篇讲到jQuery中的事件，深入学习了加载DOM和事件绑定的相关知识，这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。 ...接上篇jQuery：详解jQuery中的事件（一） 3、合成事件 jQuery有两个合成事件——hover()方法和toggle()方法，同ready()方法一样，这些都是jQuery自定义的方法...*这里要注意的一点是，jQuery的hover()方法准确来说是替代jQUery中的bind("mouseenter")和bind("mouseleave")，而不是替代bind("mouseover"...这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁。 停止事件冒泡：停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。...5、移除事件：在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。在此就不举例说明了。
jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件处理能力。 ...一、jQuery中的事件 1、加载DOM： 执行时机：在常规的JavaScript中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法...注意以上两种方法的区别： window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，也即在此时JavaScript才可以访问网页中的任何元素； $(document...要解决这个问题，可以使用jQuery中的另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数。...明天继续完成jQuery事件的下半部分，包括的内容有合成事件、事件冒泡、移除事件等内容。
首先最简单的方法。jquery的一种简写形式： alert("页面加载完成！")... onload必须等等页面中的图片、声音、图像等远程资源被加载完毕后才调用而jQuery中只需要页面结构被加载完毕。...jQuery中的页面加载完毕事件，表示的是页面结构被加载完毕。...所以，建议使用方式： 样式控制的，比如图片大小控制，使用$(window).load()； jS事件触发的方法，可以在$(document).ready()里面加载。...; }); }) 这个例子就是给所有的a标签绑定了一个click事件。即当所有链接被鼠标单击的时候，都执行 alert(“Hello World!”)
的方方式绑定事件没有 on 2、className 是DOM对象的方法，jQuery不能调用。...3、jQuery对象.val();表示获取该对象 value 属性的值； 4、jQuery对象.val("值");表示设置该对象 value 属性的值； 四、页面加载事件 1、DOM中页面加载事件...2、jQuery中页面加载事件 2.1、方式一：DOM转jQuery方式 $(window).load(function () { console.log("load:1"); }); $(window...特点：不是整个页面的所有元素，而是页面中的基本元素加载完后就执行，所以比使用 load 的方式快一些。...$ 也可以换成 jQuery。 特点：不是整个页面的所有元素，而是页面中的基本元素加载完后就执行，所以比使用 load 的方式快一些。
e.target == $("#id/.class")[0]) { //函数体 } }); }); target 属性规定哪个 DOM 元素触发了该事件
jquery_shijian_function.html... ...background-color","red"); }, function(){ $("body").css("background-color","yellow");//注意yellow的写法...--class="change"不能放在此里面，因为其改变的是框内的背景颜色--> Input anything:<input type="text" name="inputtext" class
加载Dom两种方式 1.1.1. window.onload方式 1.1.2. jQuery方式 1.1.3...事件传播(事件冒泡) 1.4.1. 传播：小---->中---->大 1.4.2....(事件冒泡) //给p标签添加点击事件现在点击p标签的内容 就可以触发事件，点击页面的其它位置不会触发。...; }) //给div添加点击事件,点击了p标签就会触发到两个事件,p属于div的一部分。...// $("#xy").text(x+","+y); // }) //pageX：页面左上角的坐标 //给div添加鼠标移动事件，求出以网页左上角为0,0 起始点的
注意：自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。...jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。...该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。 注意：如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。...DOM 元素 event.data 包含当前执行的处理程序被绑定时传递到事件方法的可选数据 event.delegateTarget 返回当前调用的 jQuery 事件处理程序所添加的元素 event.isDefaultPrevented...常用jQuery事件的范例代码 <!
，但是它是一个原生js对象 // this.style.background = 'red'; // $(this) 指的是当前发生事件的jquery对象...$(this).css({'background':'gold'}); // 获取jquery对象的索引值,通过index() 方法...，但是它是一个原生js对象 $(this) 指的是当前发生事件的jquery对象 2....小结 jQuery常用事件: click() 鼠标单击 blur() 元素失去焦点 focus() 元素获得焦点 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发...） ready() DOM加载完成
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(
前几天自己着重读了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 ] ) 官方文档 参数一：properties...: '+=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. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下： 优点: 操作简单，且不用担心事件覆盖等问题。...事件处理 因为普通注册事件方法的不足，jQuery又开发了多个处理方法，重点讲解如下： on(): 用于事件绑定，目前最好用的事件绑定方法 off(): 事件解绑 trigger().../ triggerHandler(): 事件触发 2.1 事件处理 on() 绑定事件 因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() /...案例：发布微博案例 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中。2.点击的删除按钮，可以删除当前的微博留言。 ...代码实现 $(function () { // 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中 $
二.Query 通过.bind()方法来为元素绑定这些事件。可以传递三个参数：bind(type,[data],fn)： type 表示一个或多个类型的事件名字符串....前提：jquery包的引入 准备的html:待续 第一部分：添加绑定事件: bind() 1.匿名函数 //使用点击事件 $('input').bind('click',function(){ //...alert('移出'); }, 'mouseover':function() { alert('移入'); } }); 第二部分：删除绑定事件:unbind() 1.删除所用当前的元素事件...//使用 unbind 删除绑定的事件 $('input').unbind(); //删除所有当前元素的事件 2.删除指定的事件 //使用 unbind 参数删除指定类型事件 $('input...').unbind('click'); //删除当前元素的 click 事件 3.删除指定函数 //使用 unbind 参数删除指定处理函数的事件 function fn1(){ alert('点击
.die() 从元素中删除先前.live()绑定的所有事件。 .die() 这个方法不接受任何参数。 ...，比如"click", selector 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。 ...selector 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。 ...用法： $('p').on("click",function(){ alert($(this).text()); }) //当点击段落的时候，显示该段落中的文本....unbind(event) 一个jquery.event对象。 .unbind() 此签名不接受任何参数。
handler 每次事件出发会执行的函数。 ...handler 每次事件出发会执行的函数。 ...handlerOut 当鼠标指针离开元素时候触发执行的事件函数。 ...}, function(){ $(this).removeClass("hover") } ); 鼠标在表格单元格中来回滑动的时候添加特殊的样式...，触发的事件。
（摘自网络） 如何来阻止Jquery事件冒泡？...，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转） 2.return false; 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转） 还有一种有冒泡有关的...： 3.event.preventDefault(); 如果把它放在头部A标签的click事件中，点击“点击我”。 ...会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度 它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）...友情提示:事件冒泡不一定是个坏的东西，有些情况会让不同层次捕获不同的事件！
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
