jQuery基础:mouseeter( ) 与 mouseover( ) 区别

1、结论

  • mouseove:不论鼠标指针穿过被选元素或其子元素,都会触发;
  • mouseenter:只有在鼠标指针穿过被选元素时,才会触发事件;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            padding: 5px;
            border: 1px red solid;
        }

        span{
            display: inline-block;
            width: 50px;
            height: 50px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="over">
        <span>0</span>
    </div>
    <div class="enter">
        <span>0</span>
    </div>
</body>
<script src="libs/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        var x = 0;
        var y = 0;
        $(".over").mouseover(function(){
            $(this).find("span").text(x+=1);
        });
        $(".enter").mouseenter(function(){
            $(this).find("span").text(x+=1);
        })
    })
</script>
</html>
时间: 2024-10-27 13:43:58

jQuery基础:mouseeter( ) 与 mouseover( ) 区别的相关文章

jQuery中hover与mouseover和mouseout的区别分析

本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于hover事件.两个没什么区别,应该是一样的.但昨天一个动画效果才让我见识了,这两个并不能等同. <div class="wrapper"> <div class="img"></div> <div class="tex

[jquery]基础篇--this与$this区别

参考: http://www.cnblogs.com/hannover/p/4109779.html 1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的  $()  这个符号,实际上这个符号在JQuery中相当于JQuery(),即$(this)=jquery();也就是说,这样可以返回一个jquery对象.那么,当你在网页中alert($('#id'));时,会

Jquery基础之事件操作

事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事件处理机制,极大的增强了事件处理的能力. 一.DOM加载事件 页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表 展示两个事件的异同.    w

jQuery基础——事件篇

jQuery基础--事件篇 鼠标事件 click与dbclick事件 click方法监听用户单击操作,dbclick监听用户双击操作,这两个方法类似. dbclick与click事件不同的是: click事件触发需要以下几点: click事件其实是由mousedown与mouseup 2个动作构成,所以点击的动作只有在松手后才触发 dblclick事件触发需要以下几点: dblclick又是由2个click叠加而来的,所以dblclick事件只有在满足以下条件的情况下才能被触发 鼠标指针在元素里

Jquery基础教程第二版学习记录

本文仅为个人jquery基础的学习,简单的记录以备忘. 在线手册:http://www.php100.com/manual/jquery/第一章:jquery入门基础jquery知识:jquery能做什么:为什么需要jquery. 第二章:选择符工厂函数$()css选择符属性选择符自定义选择符DOM遍历方法 第三章:事件jQuery.noConflict([extreme]):运行这个函数将变量$的控制权让渡给第一个实现它的那个库.常用方法:(包括键盘,鼠标事件)blur([[data],fn]

【JQuery】(1)JQuery基础

JQuery基础 2019-11-02  21:11:17  by冲冲 1.jQuery简介 jQuery:轻量级."写的少,做的多".JavaScript函数库. 2.jQuery功能 HTML元素选取 HTML元素操作 HTMLDOM遍历和修改 CSS操作 HTML事件函数 JavaScript特效和动画 Ajax异步操作 提供丰富的插件 3.jQuery版本 目前jQuery有三大版本: 1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增.因此一般项目来说,

【jquery基础教程】jquery事件及操作大汇总

在学习Javascript语言中,有一个优秀的Javascript库是大家都会遇到的--jquery,今天小编汇总了jquery事件及操作,现在一起来看看jquery基础教程吧! 事件 bind()        向匹配元素附加一个或更多事件处理器 blur( )        触发.或将函数绑定到指定元素的 blur 事件 change()        触发.或将函数绑定到指定元素的 change 事件 click()        触发.或将函数绑定到指定元素的 click 事件 dblc

JQuery基础知识(2)

JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒. 可选的 callback 参数是滑动完成后所执行的函数名称. 2.JQuery slideUp();用于向上滑动元素 语法: $(selector).slideUp(speed,callback

jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)

1.jQuery鼠标事件之click与dbclick事件 方法一:$ele.click()(不带参数) <div id="test">点击触发<div> $("ele").click(function(){ alert('触发指定事件') }) $("#test").click(function(){ $("ele").click() //手动指定触发事件 });   方法二:$ele.click( h