<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-1.11.3/jquery.min.js"></script>
    <script>
        $(function(){
            var $lis = $("ul li");
            var $btn =  $("#btn1");
            var $text = $("#txt1");
            var $div = $("div");
            // 添加点击事件
            $lis.click(function(){
                // 获取当前点击的标签对象
                // 原生js的写法
                // this.style.color = "red";
                // jquery写法
                $(this).css({"color":"red"});
                // 获取点击标签的索引
                alert($(this).index())
            });

            $btn.click(function(){
                // 获取文本框的内容
                alert($text.val());
            });
            // 给text文本框添加获取焦点事件
            $text.focus(function(){
                // 获取得到焦点的文本框，然后设置样式属性
                $(this).css({"background":"red"});
            });
            // 给text文本框添加失去焦点事件
            $text.blur(function(){
                $(this).css({"background":"white"});
            });
            // 给div设置鼠标悬停（进入）事件
            $div.mouseover(function(){
                $(this).css({"background":"green"});
            });
            // 给div设置鼠标离开事件
            $div.mouseout(function(){
                $(this).css({"background":"white"});
            });
        });
    </script>
</head>
<body>
    <div>
        <ul>
            <li>苹果</li>
            <li>鸭梨</li>
            <li>香蕉</li>
        </ul>
        <input type="text" id="txt1">
        <input type="button" id="btn1" value="你点我">
    </div>
    
</body>
</html>