JQuery事件函数学习总结

1.单击函数

点击单元格背景色变为粉色

$("#t1 td").click(function() {
        $(this).css("background-color","pink");
    });

2.双击函数

双击单元格进行编辑

$("#t1 td").dblclick(function() {
        $(this).attr("contenteditable", true);
    });

3.焦点函数

获得焦点文字变红

$("#t1 td").focus(function() {
        $(this).css("color","red");
    });

4.失去焦点函数

失去焦点文字变黑

$("#t1 td").blur(function() {
        $(this).css("color", "black");
    });

5.内容改变事件

监听下拉列表的变化，选择对应的市出现对应的区

$("#t2 #city").change(function() {
        var map = {
                "沈阳市" : ["和平区","沈河区","皇姑区","大东区"],
                "大连市" : ["甘井子区","高新园区","沙河口区","旅顺口区 "],
                "丹东市" : ["振兴区","元宝区","振安区","沿江开发区 "],
                "锦州市" : ["古塔区","凌河区","锦西区","黑山区"]
        }
        var citys=map[$(this).val()];
        var html="<ul>";
        for (var i = 0; i < citys.length; i++) {
            var one = citys[i];
            html += "<li>" + one + "</li>"
        }
        html += "</ul>";
        $("#t2 ul").remove();
        // 向控件内部结尾添加代码
        $("#t2").append(html);
    });

6.鼠标函数

（1）鼠标移入函数
（2）鼠标移出函数
（3）鼠标点击函数
（4）鼠标松开函数

//鼠标移入字体变为橘色
    $("#t3 h3").mouseenter(function() {
        $(this).css("color","orange");
    });

    //鼠标移出字体变为黑色
    $("#t3 h3").mouseout(function() {
        $(this).css("color","black");
    });

    // 判断鼠标左、右、滑轮（滑轮为2）点击
    $("#t3 #btn").mousedown(function(e) {
        // 右键点击，字体变蓝
        if (e.which == 3) {
            $(this).css("color", "blue");
        }
        // 左键点击，字体变黑
        if (e.which == 1) {
            $(this).css("color", "black");
        }
    });

    //松开鼠标，字体变绿
    $("#t3 #btn").mouseup(function() {
        $(this).css("color", "green");
    });

7.键盘函数

//点击键盘Enter键，按钮字体变白
    $("#t3 #btn").keydown(function(e) {
        if (e.keyCode==13) {
            $(this).css("color", "white");
        }
    });

html代码：

<div id="t1">
       <table>
       <tr>
         <th>姓名</th>
         <th>性别</th>
         <th>年龄</th>
       </tr>
       <tr>
        <td>刘娜</td>
        <td>女</td>
        <td>21</td>
       </tr>
       <tr>
        <td>李雷</td>
        <td>男</td>
        <td>18</td>
       </tr>
       <tr>
        <td>张文</td>
        <td>男</td>
        <td>28</td>
       </tr>
       <tr>
        <td>李林</td>
        <td>女</td>
        <td>23</td>
       </tr>
       <tr>
        <td>张伟</td>
        <td>男</td>
        <td>21</td>
       </tr> 
    </table>
    </div>
    <div id="t2">
       <p>
        <select id="city">
           <option value="沈阳市">沈阳市</option>
           <option value="大连市">大连市</option>
           <option value="丹东市">丹东市</option>
           <option value="锦州市">锦州市</option>
        </select>
       </p>
    </div>

    <div id="t3">
       <h3>这是一个测试</h3>
       <input type="button" id="btn" value="点击" />
    </div>

    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="t1.js"></script>

CSS代码：

#t1 table{
    border: solid 1px #999;
    border-spacing: 0;
    border-collapse: collapse;
}

#t1 td{
    width: 150px;
    text-align: center;
}
#t1 td,#t1 th{
    border: solid 1px #999;
    height: 35px;
    font-size: 14px;
    letter-spacing:1px;
}

#t3 #btn{
    width: 170px;
    height: 40px;
    border-radius: 5px;
    /* 设置渐变色（渐变方向，从这个颜色渐变到，这个颜色）*/
    background: linear-gradient(to bottom,#EB56AA,#E51944);
    border:none;
    color:#FFF;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 16px;
    outline: none;
    /* 设置下边框 */
    border-bottom: solid 1px #A9176A;
    /* 设置阴影 */
    box-shadow:#666 0px 1px 3px;
}