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

常用的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加载完成。