jQuery中mouseover与mouseenter、attr与prop、attr与css区别

最新推荐文章于 2019-08-29 17:23:32 发布

小龙爷ღ

最新推荐文章于 2019-08-29 17:23:32 发布

阅读量235

点赞数 1

分类专栏： JQuery 文章标签： jQuery mouseover与mouseenter区别 attr与prop区别 attr与css区别

本文链接：https://blog.csdn.net/qq_45086879/article/details/100116595

版权

JQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

今天主要说下mouseover与mouseenter、attr与prop、attr与css这三个的区别

一.mouseover与mouseenter的区别
1）两对事件：

mouseover------mouseout

mouseenter-----mouseleave

2）区别：

mouseover和mouseout会有事件冒泡，也就是说鼠标移入、移出当前元素的子元素或父元素时都会触发该事件。

mouseenter和mouseleave 事件不会冒泡，依旧是说鼠标移入、移出时，单签元素的子元素或父元素不会触发该事件。

案例：大家看控制台输出可以知道鼠标移动到子div3的时候也会触发事件，这就是mouseover的事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }

        #div2 {
            float: left;
            width: 200px;
            height: 200px;
            margin-left: 40px;
            background-color: deeppink;
        }

        .div3 {
            width: 100px;
            height: 100px;
            margin-top: 50px;
            background-color: deepskyblue;
        }

        .div4 {
            width: 100px;
            height: 100px;
            margin-top: 50px;
            background-color: deepskyblue;
        }

    </style>
</head>
<body>
<div id="div1">
    <div class="div3"></div>
</div>
<div id="div2">
    <div class="div4"></div>
</div>
</body>
</html>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("#div1")
        .mouseover(function () {
            console.log('mouseover 进入');
        })
        .mouseout(function () {
            console.log('mouseout 离开');
        })

    $("#div2")
        .mouseenter(function () {
            console.log('mouseenter 进入');
        })
        .mouseleave(function () {
            console.log('mouseleave 离开');
        })

</script>

二、attr()与prop()的区别

区别：

操作非布尔类型的属性用attr()

操作checked、selected、disabled这类布尔(boolean)类型的属性用 prop()

三、attr()与css()的区别

区别：

1） attr()是用来获得或设置标签属性的（和Html标签有关）

2） css()是获取/修改元素的样式属性 (和style有关)

3）前者可以修改< img >的src属性，可以修改< a >的href属性，可以修改< input >的title属性。然而后者却不行，他它只能修改样式相关的特征。所以，后者是前者的子集，只是对 style这个特定的属性进行操作

总结：它们之间的区别可以用一句话来概括：即attr设置和获取某个属性值,css设置和获取style中的属性。

小龙爷ღ

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery中mouseover与mouseenter、attr与prop、attr与css区别

今天主要说下mouseover与mouseenter、attr与prop、attr与css这三个的区别一.mouseover与mouseenter的区别 1）两对事件： mouseover------mouseout mouseenter-----mouseleave 2）区别： mouseover和mouseout会有事件...
复制链接

扫一扫

专栏目录