使用jQuery操作dom，追加和删除样式-鼠标移入移出练习
1.实现鼠标移入则添加背景色，鼠标移出则删除背景色
<!DOCTYPE html>
<html>
<head>
<title>test1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<style type="text/css">
.abc{
background:red;
}
</style>
<script type="text/javascript">
$(function(){
$("li").mouseover(function(){
$(this).addClass("abc");
});
$("li").mouseout(function(){
$(this).removeClass("abc");
});
});
</script>
</head>
<body>
<ul>
<li>apple</li>
<li>banana</li>
<li>pear</li>
<li>oragle</li>
</ul>
</body>
</html>2.实现QQ登录功能，默认是用户名点击则为空等待用户输入
第一种：click
<!DOCTYPE html>
<html>
<head>
<title>test2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("input").click(function(){
$(this).val("");
});
});
</script>
</head>
<body>
<form action="">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" value="用户名"><br></td>
</tr>
<tr>
<td>密码 ：</td>
<td><input type="password" value="密码"><br></td>
</tr>
</table>
</form>
</body>
</html>第二种：（**）
<!DOCTYPE html>
<html>
<head>
<title>test2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<style type="text/css">
.a{
opacity:0.5;
}
</style>
<script type="text/javascript">
$(function(){
$("input").on("focus",function(){//获得焦点
$(this).removeClass("a");
if($(this)[0].value==null||$(this)[0].value==""||$(this)[0].value=="please input password"){
$(this).val("");
}else{
$(this).select();
}
})
.on("blur",function(){
if($(this)[0].value==null||$(this)[0].value==""||$(this)[0].value=="please input password"){
$(this).val("please input password");
$(this).addClass("a");
}else{
$(this).removeClass();
}
});
});
</script>
</head>
<body>
<form action="">
<table>
<tr>
<td>password：</td>
<td><input type="text" class="a" value="please input password"><br></td>
</tr>
</table>
</form>
</body>
</html>