通过jquery实现鼠标移入移出效果
鼠标移入用mouseover方法
鼠标移出用mouseout方法
但是，jquery给我们提供了一个复合事件替换mouseover和mouseout
如下所示：
<!-- jquery引入到这个jsp里面 -->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<!-- 我们的jquery代码 -->
<script type="text/javascript">
//等页面加载完毕
$(function(){
//获取到三个元素，jquery可以直接给三个元素添加事件
//链式写法
/*$("h1").mouseover(function(){
$(this).css("background-color","red");
}).mouseout(function(){
$(this).css("background-color","white");
});*/
//jquery给我们提供了一个复合事件替换mouseover和mouseout
$("h1").hover(function(){
$(this).css("background-color","red");
},function(){
$(this).css("background-color","white");
});
});
</script>
</head>
<body>
<h1>111</h1>
<h1>222</h1>
<h1>333</h1>
</body>
</html>
jQuery中的动画隐藏、显示效果实现
使用jquery可以做一些很漂亮的动画特效
下面是一个简单的点击问题显示或者隐藏答案的一个案例：
<!-- 我们的jquery代码 -->
<script type="text/javascript">
//等页面加载完毕
$(function(){
$("h1").click(function(){
if($("h1+div").is(":hidden")){
$("h1+div").show(5000);
}else{
$("h1+div").hide(5000);
}
});
});
</script>
</head>
<body>
<h1>什么是jQuery</h1>
<div class="test" name="div1" style="border:1px solid red;width:200px;">jQuery是一个JavaScript函数库、jQuery极大地简化了JavaScript编程。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery兼容各种主流浏览器。</div>
</body>
</html>
更多推荐
通过jquery实现鼠标移入移出效果、jQuery中的动画隐藏、显示效果实现
发布评论