鼠标和键盘悬停
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标悬停</title>
<script type="text/javascript" src='./js/jquery.min.js'></script>
<script type='text/javascript'>
$(function(){
//监听鼠标悬停事件
$("#b").mouseover(function(){
//用类选择器修改元素的样式
$(".c").css("background-color","pink")
$(".c").css("color","green")
$(".c").css("font-size","30px")
})
});
// 用类选择器修改鼠标离开事件
$(function(){
//监听鼠标悬停事件
$("#b").mouseout(function(){
//用类选择器修改元素的样式
$(".c").css("background-color","white")
$(".c").css("color","red")
$(".c").css("font-size","16px")
})
});
// 用类选择器修改鼠标离开事件
$(function(){
$("#z").mouseover(function(){
$("#z").css("background-color","pink")
});
});
</script>
</head>
<body>
<div class="c">风萧萧兮易水寒，壮士一去兮不复返</div><br/><br/>
<input type="button" id="z" value="悬停变色"><br/><br/>
<img id="b" src="./img/微信图片_20181121185908.jpg" /><br/><br/>
</body>
</html>
形变动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate 动画</title>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
//jquery单一入口
$(function(){
$("#b2").click(function(){
//通过标签选择器来进行动画操作
$("div").animate({
left:'400px',
width:'400px',
// margin:'200px'
height:'300px'
});
$("div").animate({
left:'600px',
});
});
});
</script>
</head>
<body>
<!-- position: absolute 绝对定位 -->
<div style='background-color:yellow;width :100px;height: 100px;position: absolute;'></div>
<br/><br/>
<input style="margin-top:400px;" type="button" id="b2" value="开始动画"/>
</body>
</html>
淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery的学习</title>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- jquery代码的入口，用来等待页面元素全部加载完成 -->
<script type="text/javascript">
$(function() {
/* 用jquery选择器来选取某一个div的内容*/
var coo=$("#b").html();
var con= $(".a").val();
alert(con)
// jquery绑定点击事件 click 单击 hide 隐藏 参数单位是毫秒
$(".a").click(function(){
//隐藏div
// $("#b").hide(3000);
$("#b").fadeOut(3000); //慢慢消失 淡出
});
$(".a1").click(function(){
$("#b").fadeIn(3000); //慢慢出来 淡入
});
$("#aa").click(function(){
$("#b").fadeToggle(1000);
});
});
</script>
</head>
<body>
<div id="b">
<img src="./img/微信图片_20181121185908.jpg"/>
</div>
<input id='b' type="text" width="200" value="默认显示" />
<input class='a' type="button" value="滚蛋吧肿瘤君"/>
<input class='a1' type="button" value="出来吧皮卡丘"/>
<input id="aa" type="button" value="出来再进去">
</body>
</html>