常用的jQuery事件方法

最新推荐文章于 2024-03-16 11:36:04 发布

Southern Wind

最新推荐文章于 2024-03-16 11:36:04 发布

阅读量832

点赞数 4

分类专栏： jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/nanchen_J/article/details/120041589

版权

jQuery 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

在jQuery中，大多数DOM事件都有一个等效的jQuery方法。

如果想在页面中指定一个点击事件,语法格式如下：

$('p').click();

下一步就是点击后所触发的事件。可以通过一个函数实现

$("p").click(function(){
    // 触发事件过后所执行的代码
});

下面说一下常用的事件方法

$(document).ready()

$(document).ready()方法允许在文档完全加载完毕后执行函数。

click

click()方法是当用户点击html元素是触发的方法

例如：当用户点击<p>元素时，会隐藏<p>元素;

<body>
    <p>1点击此处会消失1</p>
    <p>2点击此处会消失2</p>
    <p>3点击此处会消失3</p>
    <script src="../../jquery-3.6.0.js"></script>    //引入jQuery库
    <script>
       $(document).ready(function(){
        $('p').click(function(){     //获取p标签的点击事件，当点击p元素时，会执行以下代码
            $(this).hide();          //（hide：隐藏）将p元素进行隐藏
        })
       })
    </script>
</body>

当点击"点击此处p1会消失" 时会隐藏如下图：

dblcick()

顾名思义dblcick():双击元素触发事件,当鼠标双击时会发生事件

<body>
    <p>1双击此处我会消失</p>
    <p>2双击此处我会消失</p>
    <p>3双击此处我会消失</p>
    <p>4双击此处我会消失</p>
    <p>5双击此处我会消失</p>
    <script src="../../jquery-3.6.0.js"></script>
    <script>
        $('p').dblclick(function(){    //双击鼠标发生下面的事件
            $(this).hide();            //将点击的p标签进行隐藏
        })
    </script>
</body>

mouseenter()

当鼠标的指针放在了这个元素时，则会发生mouseenter()事件

<body>    
<p id="p1">这里是p1</p>
    <script src="../../jquery-3.6.0.js"></script>
    <script>
        $('#p1').mouseenter(function(){
            alert('您的鼠标移到了id为p1的元素上面！')
        })
    </script>
</body>

mouseleave()

则与mouseenter()相反，当鼠标离开这个元素时，则会发生mouseleave()事件

<body>    
<p id="p1">这里是p1</p>
    <script src="../../jquery-3.6.0.js"></script>
    <script>
        $('#p1').mouseleave(function(){
            alert('您的鼠标移已经离开id="p1"的p标签了！')
        })
    </script>
</body>

mousedown() 和mouseup()

mousedown()当鼠标按下触发事件，mouseup()当鼠标松开时触发事件，可以用console.log打印到控制台查看结果。

<body>
    <p id="p1">这里是p1</p>
    <script src="../../jquery-3.6.0.js"></script>
    <script>
       $('p').mousedown(function(){
           console.log('鼠标已经在该段落上按下')
       })
       $('p').mouseup(function(){
           console.log('鼠标在段落上松开');
       })
    </script>
</body>

hover()

hover()和css中的hover一致，当鼠标放在该元素上时触发第一个（mouseenter）事件，离开时会触发第二个（mouseleave）事件

此方法用于模拟光标悬停事件

<body>
    <p>此处是p1</p>
    <script src="../../jquery-3.6.0.js"></script>
    <script>
        $('p').hover(function(){            //此处触发进入事件
            console.log('你已经进入了p1');
        },
        function(){                            //此处触发离开事件
            console.log('你可已经离开了p1');
        })
    </script>
</body>

focus() 与 blur()

这两个事件通常用于表单元素

focus():当元素获得焦点时则触发的事件

blur():当元素失去焦点时会触发的事件

<body>
<!--focus（）事件-->
    <input type="text">文本框
    <script src="../../jquery-3.6.0.js"></script>
    <script>
        $('input').focus(function(){            //当获得焦点时
            $(this).css('background-color','yellow');    //背景颜色会变成黄色
            $(this).css('outline','none');                //取消边框
        })
/*blur()事件*/
        $('input').blur(function(){             //失去焦点时
            $(this).css('background-color','red');    input背景颜色会变成红色
        })
    </script>
</body>

以上就是jQuery所有的事件

Southern Wind

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
常用的jQuery事件方法

在jQuery中，大多数DOM事件都有一个等效的jQuery方法。如果想在页面中指定一个点击事件,语法格式如下：$('p').click();下一步就是点击后所触发的事件。可以通过一个函数实现$("p").click(function(){ // 触发事件过后所执行的代码});下面说一下常用的事件方法$(document).ready()$(document).ready()方法允许在文档完全加载完毕后执行函数。clickclick()方法是当用户点击htm
复制链接

扫一扫