JQuery学习笔记之获取焦点和失去焦点事件

来源：互联网发布：最新m2数据 2017 编辑：程序博客网时间：2024/04/27 20:07

html代码：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <script type="text/javascript" src="jquery-3.1.0.js"></script>    <script type="text/javascript" src="JavaScript.js"></script></head><body>    <form>        用户名：<input type="text" id="user"/><br/><br/>        密  码：<input type="password" id="pwd"/><br/><br/>        <input type="button" value="按钮"/>    </form></body></html>

JQuery代码：

$(document).ready(function () {    $(":text").focus(function () {                      // 当输入框获取到焦点时触发的事件；        $(":text").css("background-color", "green");    // 事件触发时通过css样式修改输入框的背景颜色；    });    $(":text").blur(function () {        $(":text").css("background-color", "red");    });    $(":password").focus(function () {        $(":password").css("background-color", "blue");    });    $(":password").blur(function () {        $(":password").css("background-color", "yellow");    });    $(":button").click(function () {        $(":text").focus();             // 通过focus()函数来触发focus事件；        $(":password").css("background-color", "BlueViolet");    });});

0 0