首页
学习
活动
专区
圈层
工具
发布

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

上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。   ...接上篇jQuery:详解jQuery中的事件(一)   3、合成事件   jQuery有两个合成事件——hover()方法和toggle()方法,同ready()方法一样,这些都是jQuery自定义的方法...*这里要注意的一点是,jQuery的hover()方法准确来说是替代jQUery中的bind("mouseenter")和bind("mouseleave"),而不是替代bind("mouseover"...简单的说,mouseover和mouseout会引起触发的区域更大,mouseenter和mouseleave只能针对绑定的元素来触发。   ...这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后,事件对象就被销毁。  停止事件冒泡:停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。

3K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    第79天:jQuery事件总结(二)

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。   ...*这里要注意的一点是,jQuery的hover()方法准确来说是替代jQUery中的bind("mouseenter")和bind("mouseleave"),而不是替代bind("mouseover"...)和bind("mouseout"),那么这两对绑定函数,其实是两对事件是什么区别呢?...简单的说,mouseover和mouseout会引起触发的区域更大,mouseenter和mouseleave只能针对绑定的元素来触发。   ...这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后,事件对象就被销毁。  2、停止事件冒泡:停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。

    2K20

    前端(四)-jQuery

    方法,必须是转化为jQuery节点 alert($(this).html()); //$(this)转换为jQuery节点 }); 3.6.5 end() 结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态...事件与特效 4.1 基础事件 4.1.1 鼠标事件 事件名称 说明 mouseover() 鼠标移入事件 mouseout() 鼠标移出事件 mouseenter() 鼠标移入事件 mouseleaver...//对指定元素,绑定mouseover和mouseout事件 $(".on").bind({ "mouseover":function(){ $(".topDown").show...(); 解除指定元素绑定的所有事件 unbind(事件名); 解除指定元素绑定的指定事件 4.3 复合事件 4.3.1 hover 方法 说明 hover() 相当于mouseover和mouseout...的集合,并支持切换 //复合事件:hover,相当于mouseover和mouseout的集合,并支持切换 $(".on").hover(function(){ $(".topDown").

    9.3K30

    利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码

    今天给大家介绍一下怎样利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码的功能。...其实主要注意几点细节就可以轻松实现这样的功能了,第一点就是设置一个div不显示并且位置设置好,第二点就是利用JQuery中监听鼠标的方法来监听鼠标的移动或者离开。...理论就这些,下就给出一个具体的例子详细的介绍一下该过程是如何实现的。...”这个div的上方的时候就会触发该函数,然后执行div显示的代码。...mouseout指的是当鼠标从”#togbook”这个div的上方离开的时候就会触发该函数,然后执行div隐藏的代码。通过这两个简单函数就可以实现该过程了。

    2.2K90

    jQuery的链式操作

    tr").mouseout(function(){ $(this).removeClass("over"); }) 但是我们写成了: $(".stripe tr").mouseover(function...(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");}) 在jQuery中,执行完mouseover...•链式异步 个 人觉得链式操作最值得称赞的还是其解决了异步编程模型的执行流程不清晰的问题。jQuery中$(document).ready就非常好的阐释了这一理 念。...DOMCotentLoaded是一个事件,在DOM并未加载前,jQuery的大部分操作都不会奏效,但jQuery的设计者并没有把他当成事件一 样来处理,而是转成一种“选其对象,对其操作”的思路。...•Promise CommonJS中的异步编程模型也延续了这一想法,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。

    59930

    JQuery之内置函数响应事件

    今天给大家介绍一下on函数中events的种类和用法。 具体我把它分为:键盘事件,鼠标事件,input事件,还有一个是基础事件(例如:滚动,界面大小变化等等之类的)。...请看下面例子的演示。 6.mouseover  当鼠标指针位于元素上方时,会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。...4.选中内容select :当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。...可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。 四:其他事件: 1.scroll 当用户滚动指定的元素时,会发生 scroll 事件。...如果想要再继续深入学习每个函数的具体用法,可以参考JQuery中的官方API。里面介绍都很详细,我这里就不多介绍了。 如对内容有问题或有疑义,请及时提出,不甚感谢。本人QQ:208017534

    2.5K60

    JavaScript动漫作品(闭幕)

    这是一种使用一个强大JavaScript库的原因,比方jQuery。...jQuery已经为你做好了全部的跨浏览器測试,因此,你仅仅须要输入一个命令,jQuery会在幕后翻译它使得它在每一个浏览器中都可用。...在上面的几行代码中,我们说过,不管什么时候用户在舞台(stage)元素上移动鼠标。将触发一个叫做 stage_mousemove_listener()的函数(注意。在命令中。我们并没有包括參数)。...} 我们有个叫做e的參数在函数中,虽然我们没有传递不论什么东西给它。可是这是一个事件侦听器,我们将自己主动拥有一个叫做e的变量,这个变量存储有和事件相关的信息,比方鼠标数据。...跑跳运动函数并没有改变非常多。我们仅仅是增添了一些跟踪变量 running_dir,取出机器人将要撞击到强的声明(由于这是 mouseout函数的冗余。

    1.3K00

    jQuery

    学习jQuery就是学习调用里面封装的函数,其优化了DOM操作、事件处理、动画设计和Ajax交互。基本兼容了主流浏览器。链式编程、隐式迭代、支持插件拓展开发,轻量、免费、开源。...//DOM加载完成的入口 }) jQuery的顶级对象:$ `是jQuery 别称,在代码中`和jQuery和等价,为了方便都是$。...`是jQuery的顶级对象,相当于原生js中的window,元素通过`包装成jQuery对象,调用jQuery属性和方法。...//(3)fn:回调函数,在动画完成时执行的函数,每个元素执行一次 hide([speed,[easing],[fn]]);//中括号表示可以省略此参数,无动画直接显示 3.切换显示和隐藏 toggle...//$(“div”).on(“mouseover mouseout”, function() { // ...... //}); 事件委派: //li的处理事件委派给父ul,里面每个li都有了click

    22.1K50

    前端开发JS——jQuery常用方法

    注:mousemove 强调鼠标指针移动;如果处理器做任何重大的处理,或者如果该事件存在多个处理函数,这可能造成浏览器的严重的性能问题 4、jQuery鼠标事件之mouseover与mouseout事件...mouseover方法用于监听用户鼠标移入操作,只有鼠标移入区域内后才生效,mouseout方法用于监听用户鼠标移出操作,只有鼠标移除区域后才生效,处理事件的过程中会有事件冒泡,这两个方法用法及其类似...13、jQuery键盘事件之keypress()事件 keydown事件触发在文字还没敲进文本框,这时如果在keydown事件中输出文本框中的文本得到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成...可以自定义事件名 多个事件绑定同一个函数:$ele.on("mouseover mouseout", function(){}) //多个事件用空格隔开 多个事件绑定不同函数:$ele.on({...因为动画是异步的,所以要在动画之后执行某些操作就必须要写到回调函数里面 6、jQuery中淡出淡入切换fadeToggle方法(改变元素的透明度) fadeToggle 方法是上述两个方法的切换 $ele.fadeToggle

    5.7K20

    jquery基础事件

    一.常用的事件有:click、dblclick、 mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、...[data]是可选的,作为 event.data 属性值传递一个 额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象. fn 表示绑定到指 定元素的处理函数。...前提:jquery包的引入 准备的html:待续 第一部分:添加绑定事件: bind() 1.匿名函数 //使用点击事件 $('input').bind('click',function(){ //...3.同时绑定多个事件 //可以同时绑定多个事件 $('input').bind('mouseout mouseover', function(){ //移入和移出分别执行一次 $('div')....').bind({ //传递一个对象 'mouseout':function(){ //事件名的引号可以省略 alert('移出'); }, 'mouseover':function()

    1.5K30

    杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

    blur和 focusout 失去焦点[同理] mouseover和 mouseenter 移进 mouseover, 如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件 mouseout...停止事件冒泡 停止时间冒泡可以阻止事件中其他对象的事件处理函数被执行.在jquery中提供了stopPropagation()方法来阻止冒泡事件....在标准DOM中,mouseover和mouseout所发生的元素可以通过event.target()方法 来访问.相关元素是通过event.relateTarget()方法来访问的.event.relatedTarget...() 方法是在mouseover中相当于 IE浏览器的event.fromElement()方法,在mouse 中相当于IE浏览器的event.toElement方法. jquery对其进行了封装,使之能兼容各大浏览器...跨域:在一个服务器上,去访问另一个服务器 jQuery如何实现跨域请求?使用JSONP形式实现跨域。 javascript如果调用另一个域程序,不能执行当前域js函数。

    9.4K20

    硬核解析,巧用案例学习jQuery框架三种事件绑定方式

    jquery如何进行事件的绑定!...一、 jquery标准的绑定方式 Jquery框架的标准绑定的语法是: jq对象.事件方法(回调函数); 如: Jquery对象.cilck();点击事件 Jquery对象.mouseover();鼠标移入时触发...Jquery对象.mouseout();鼠标移出时触发 表单对象.submit();//让表单提交*** 在这里需要注意:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。...的on()方法可以将的一个事件绑定到jquery对象上, 语法格式如下: jq对象.on("事件名称",回调函数) 利用jquery的off()方法可以将的一个事件从jquery对象上解绑。...中的事件切换方法可以实现方法中定义的多个事件的循环触发。

    2.4K10
    领券