1.JQuery的基本格式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>jQuery Demo</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<p>JQuery</p>
<input type="button" id="btn1" name="" value="点击">
<script>
$(function(){
$("#btn1").click(function(){
$("p").css("color","red");
});
});
</script>
</body>
</html>
2.鼠标移到图片上显示文字,离开时隐藏文字动画
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>jQuery Demo</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#qiche{
background: url("11.jpg") no-repeat;
width:800px;
height: 534px;
position:relative;
margin: 100px auto;
}
#pp{
position:absolute;
bottom: 0;
width:780px;
height: 50px;
background-color:rgba(0,0,0,.4);
color: #fff;
padding: 10px;
display: none;
}
</style>
</head>
<body>
<div id="qiche">
<p id="pp">我爱JQuery我爱JQuery</p>
</div>
<script>
$(function(){
$("#qiche").mouseenter(function(){
$("#pp").slideDown(1000);
});
$("#qiche").mouseleave(function(){
$("#pp").slideUp(1000);
});
});
</script>
</body>
</html>