摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="jquery-3.3.1.min.js">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{
width:300px;
margin: 0 auto;
}
a,button{display: block}
.link{color: #333; margin-left:80px;}
</style>
</head>
<body>
<div>
<input type="text" name="username">
<input type="password" name="password">
<button>登陆</button>
<a href="" title="">忘记密码？</a>
</div>
</body>
<script type="text/javascript">
// addClass() 向被选中的元素添加一个或多个class
// removeClass() 向被选择的元素移除一个或多个类
// attr() 设置被选中的元素属性值或者返回被选择元素的属性值
// removeAttr() 移除被选中的元素属性值
// hasClass('className') 判断被选中的元素是否包含指定的class
// val() 返回被选中元素的值
// hide() 隐藏显示的元素
// show() 显示隐藏的元素
// toggle() 切换
// blur() 元素失去焦点
// focus() 元素获得焦点
// change() 元素的值发生改变的时候
// click() 点击事件
$(document).ready(function(){
$('a').addClass('link');
$("input[name='username']").focus(function() {
$(this).css('backgroundColor','lightpink');
});
$('button').click(function(){
$name = $("input[name='username']").val();
$name.hide();
$pass = $("input[name='password']").val();
$name.show();
console.log($name);
console.log($pass);
})
})
</script>
</html>
批改老师：韦小宝批改时间：2019-03-15 14:49:26
老师总结：整体来说写的还是算很不错了 注释中的方法没事的时候要多去练习哦
