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