• 在线客服

  • 扫描二维码
    下载博学谷APP

  • 扫描二维码
    关注博学谷微信公众号

  • 意见反馈

原创 常用的jQuery事件有几种?分别是什么?

发布时间:2022-01-06 10:08:49 浏览 2212 来源:博学谷 作者:小谷

    常用的jQuery事件有几种?分别是什么?事件方法会触发匹配元素的事件或将函数绑定到所有匹配元素的某个事件。事件方法触发器或添加一个函数到被选元素的事件处理程序。

    jQuery事件学习目标:至少掌握两个常用的jQuery事件

    jQuery常用事件如下:

    click() 鼠标单击

    blur() 元素失去焦点

    focus() 元素获得焦点

    mouseover() 鼠标进入(进入子元素也触发)

    mouseout() 鼠标离开(离开子元素也触发)

    ready() DOM加载完成

    示例代码:

    <script>
        $(function(){
            var $li = $('.list li');
            var $button = $('#button1')
            var $text = $("#text1");
            var $div = $("#div1")
    
            //  鼠标点击
            $li.click(function(){             
                // this指的是当前发生事件的对象,但是它是一个原生js对象
                // this.style.background = 'red';
    
                // $(this) 指的是当前发生事件的jquery对象
                $(this).css({'background':'gold'});
                // 获取jquery对象的索引值,通过index() 方法
                alert($(this).index());
            });
    
            //  一般和按钮配合使用
            $button.click(function(){
                alert($text.val());
            });
    
            //  获取焦点
            $text.focus(function(){
                $(this).css({'background':'red'});
    
            });
    
            //  失去焦点
            $text.blur(function(){
                $(this).css({'background':'white'});
    
            });
    
            //  鼠标进入
            $div.mouseover(function(){
                $(this).css({'background':'gold'});
    
            });
    
            //  鼠标离开
            $div.mouseout(function() {
                $(this).css({'background':'white'});
            });
        });
    </script>
    
    <div id="div1">
        <ul class="list">
            <li>列表文字</li>
            <li>列表文字</li>
            <li>列表文字</li>
        </ul>
    
        <input type="text" id="text1">
        <input type="button" id="button1" value="点击">
    </div>

    说明:this指的是当前发生事件的对象,但是它是一个原生js对象;$(this) 指的是当前发生事件的jquery对象。

    jQuery常用事件小结:click() 鼠标单击、blur() 元素失去焦点、focus() 元素获得焦点、mouseover() 鼠标进入(进入子元素也触发)、mouseout() 鼠标离开(离开子元素也触发)、ready() DOM加载完成。

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

上一篇: jQuery如何获取和设置元素属性?代码怎么写? 下一篇: 事件代理如何使用?代码怎么写?

相关推荐 更多

热门文章

  • 前端是什么
  • 前端开发的工作职责
  • 前端开发需要会什么?先掌握这三大核心关键技术
  • 前端开发的工作方向有哪些?
  • 简历加分-4步写出HR想要的简历
  • 程序员如何突击面试?两大招带你拿下面试官
  • 程序员面试技巧
  • 架构师的厉害之处竟然是这……
  • 架构师书籍推荐
  • 懂了这些,才能成为架构师
  • 查看更多

扫描二维码,了解更多信息

博学谷二维码