web前端jQuery基础入门人--常用的jQuery事件方法
小职 2021-09-18 来源 : 阅读 1134 评论 0

摘要:本篇主要介绍了web前端jQuery基础入门人--常用的jQuery事件方法,通过具体的内容展现,希望对大家web前端jQuery的学习有一定的帮助。

本篇主要介绍了web前端jQuery基础入门人--常用的jQuery事件方法,通过具体的内容展现,希望对大家web前端jQuery的学习有一定的帮助。

web前端jQuery基础入门人--常用的jQuery事件方法


在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>

web前端jQuery基础入门人--常用的jQuery事件方法


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

web前端jQuery基础入门人--常用的jQuery事件方法



 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所有的事件


我是小职,记得找我

✅ 解锁高薪工作

✅ 免费获取基础课程·答疑解惑·职业测评

web前端jQuery基础入门人--常用的jQuery事件方法

本文由 @小职 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程