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;}