72. python高级------jQuery(5)

72. python高级------jQuery(5)

python修炼第二十一天

2019年 4月 20日 晴

jQuery事件

1. 常用事件

• click() 鼠标单击
• blur() 元素失去焦点
• focus() 元素获得焦点
• mouseover() 鼠标进入（进入子元素也触发）
• mouseout() 鼠标离开（离开子元素也触发）
• ready() DOM加载完成

示例代码:

<script>
    $(function(){
        var $li = $('.list li');
        var $button = $('#button1')
        var $text = $("#text1");
        var $div = $("#div1")

       1. 鼠标点击
        $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());
        });

         2. 获取焦点
        $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对象