jQuery常用事件方法mouseenter+mouseleave+hover

jQuery常用事件方法：

  • jQuery事件方法与原生Js事件方法名称类似,不需要写on,通过jQuery对象打点调用,括号内参数是事件函数
  • mouseenter()方法:鼠标进入一个元素触发的事件
  • mouseleave()方法:鼠标离开一个元素触发的事件

注意:mouseenter和mouseleave没有事件冒泡,在使用时替换mouseover和mouseout更加合适

下面是代码对比：

<div class="parent">
   <div class="box"></div>
</div>
 <script src="../jq/jquery-1.12.4.min.js"></script>
   <script>
     var $box = $(".box");
     var $parent = $(".parent");
     //对比mouseenter、mouseleave 和 mouseover、mouseout
     // 对比mouseenter、mouseleave 不冒泡
     $box.mouseenter(function(){
        console.log("box mouse in")
      })
     $box.mouseleave(function(){
        console.log("box mouse out")
     })
     $parent.mouseenter(function(){
        console.log("parent mouse in")
     })
     $parent.mouseleave(function(){
        console.log("parent mouse out")
     })

//mouseover、mouseout  冒泡
$box.mouseover(function(){
    console.log("box mouse in")
})
$box.mouseout(function(){
    console.log("box mouse out")
})
$parent.mouseover(function(){
    console.log("parent mouse in")
})
$parent.mouseout(function(){
    console.log("parent mouse out")
})

hover()方法:相当于将mouseenter和mouseleave事件进行了合写

hover(鼠标移上执行的事件函数,鼠标离开执行的事件函数)

//hover() 对mouseenter和mouseleave合并书写
//$box.hover(function () { }, function () { })
$box.hover(function(){
    $box.addClass("big");
},function(){
   $box.removeClass("big")
})

到此这篇关于jQuery常用事件方法mouseenter+mouseleave+hover方法的文章就介绍到这了,更多相关jQuery常用事件方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 实例讲解jquery中mouseleave和mouseout的区别

    本文详细的介绍了关于jQuery中mouseleave和mouseout的区别,分享给大家供大家参考,具体内容如下 很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件.而在实现过程中,可能会出现一些不理想的状况. 先看下使用mouseout的效果: <p>先看下使用mouseout的效果:</p> <div id="container" style="width: 300px;">

  • JQuery入门——事件切换之hover()方法应用介绍

    JQuery入门——事件切换之hover()方法应用介绍

    1.在JQuery中,有两个方法用于事件的切换,一个方法是hover(),另一个是toggle().所谓切换事件,即有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换.如一个超级链接标记<a>若想实现当鼠标悬停时触发一个事件,鼠标移出时又触发一个事件,可以用切换事件轻松实现. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

  • Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击

    实例如下所示: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击</title>    <script src="JS/jquery-1.9.1.js" type="text/javascript"></

  • jQuery实现hover合成事件的方法

    jQuery实现hover合成事件的方法

    本文实例讲述了jQuery实现hover合成事件的方法.分享给大家供大家参考.具体如下: jQuery hover合成事件,利用合成Hover事件制作折合面板,鼠标Hover上面即可展开面板,与Click不尽相同,此特效代码来自锋利的jQuery一书. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

  • jQuery hover事件简单实现同时绑定2个方法

    本文实例讲述了jQuery hover事件简单实现同时绑定2个方法.分享给大家供大家参考,具体如下: 这里将hover事件同时挂2个方法: 1个是悬停的时候执行的,另外一个是离开的时候执行 代码如下: $(document).ready(function() { $("#orderedlist li").hover( function() {$(this).addClass("blue");}, function() {$(this).removeClass(&qu

  • jQuery常用事件方法mouseenter+mouseleave+hover

    jQuery常用事件方法mouseenter+mouseleave+hover

    jQuery常用事件方法: jQuery事件方法与原生Js事件方法名称类似,不需要写on,通过jQuery对象打点调用,括号内参数是事件函数 mouseenter()方法:鼠标进入一个元素触发的事件 mouseleave()方法:鼠标离开一个元素触发的事件 注意:mouseenter和mouseleave没有事件冒泡,在使用时替换mouseover和mouseout更加合适 下面是代码对比: <div class="parent">    <div class=&qu

  • jQuery常用数据处理方法小结

    本文实例总结了jQuery常用数据处理方法.分享给大家供大家参考.具体如下: $.trim():删除字符串前后的空白字符. var str = ' 薯条 '; var formatStr = $.trim(str); //'薯条' $.param():数组或者对象序列化. var obj = { name: 'dog', count: 10 }; var str = $.param(obj); //"name=dog&count=10" $.isArray():检测是否为数组.

  • jQuery绑定事件方法及区别(bind,click,on,live,one)

    第一种方式: $(document).ready(function(){ $("#clickme").click(function(){ alert("hello world click") }) }) 第二种方式(简写方式为第一种): $('#clickmebind').bind("click", function(){ alert("Hello World bind"); }); 第三种方式: $('#clickmeon'

  • Jquery常用的方法汇总

    //jQuery的优点 :  1 轻量级         2 强大的选择器         3 出色的DOM操作的封装         4 可靠的事件处理机制         5 完善的Ajax         6 不污染顶级变量         7 出色的浏览器兼容性         8 链式操作方式         9 隐式迭代         10 行为曾与结构层的分离         11 丰富的插件支持         12 完善的文档         13 开源 <script sr

  • jquery常用特效方法使用示例

    1. jQuery fadeIn() 用于淡入已隐藏的元素. 语法: 复制代码 代码如下: $(selector).fadeIn(speed,callback); 实例: 复制代码 代码如下: $("button").click(function(){  $("#div1").fadeIn();  $("#div2").fadeIn("slow");  $("#div3").fadeIn(3000);});

  • 利用javaScript处理常用事件详解

    利用javaScript处理常用事件详解

    JS事件指再浏览器窗体或者HTML元素上发生的,乐意触发JS代码块运行的行为,下面,我们一起来看看相关事件. 1.窗体事件 例如 onload事件:当页面完全加载完成之后(包括图像,js文件,css文件等)该事件就会被触发. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>花狗在线</title> <script> window.o

  • jQuery用unbind方法去掉hover事件及其他方法介绍

    今天遇到jquery怎么去掉hover的问题,最开始以为直接unbind("hover")就可以搞定,可是搞了半天都失败拉.百度也搜了很多关于jquery中对hover事件unbind,后还是在一个老外的博客上看到了正确的方法,现在爱微网拿出来共享网上所说的jquery取消hover事件有以下几种方法: 复制代码 代码如下: /* 这种方法是错误的 */ $(#hover_div).unbind(hover); /* 这种方法也是错误的 */ $(#hover_div).unbind(

  • JQuery中的常用事件、对象属性与使用方法分析

    本文实例讲述了JQuery中的常用事件.对象属性与使用方法.分享给大家供大家参考,具体如下: JQuery中的常用事件 .click() 鼠标单击触发事件,参数可选(data,function) .dblclick() 双击触发,同上 .mousedown()/up() 鼠标按下/弹起触发事件 .mousemove() 鼠标移动事件 .mouseover()/out() 鼠标移入/移出触发事件 .mouseenter()/leave() 鼠标进入/离开触发事件* .hover(func1,fun

  • jquery中的常用事件bind、hover、toggle等示例介绍

    1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果.但是也有一些差异: 当一个文档完全下载到浏览器中时,会触发window.onload事件.而使用$(document).ready()注册的事件处理程序会在html下载完成并解析为Dom树之后,代码就可以运行,但并不意味着所有关联文件都已经下载完毕. 一个页面中一般只有一个onload事件处理程序

  • jquery常用函数与方法汇总

    1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目. jQuery 1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队列. duration:延时时间,单位:毫秒 queueName:队列名词,默认是Fx,动画队列. 例: 头部与底部延迟加载动画效果 $(document).ready(function() { $('#header') .css({ 'top':-50 }) .delay(1000).anima

随机推荐