首页 > 代码库 > 常见的JQuery应用举例
常见的JQuery应用举例
在学习JS之后，JQuery(以下简称JQ)为我们提供了一种更加便捷和简单的操作模式，利用它开发人员将更为高效的进行工作，下面将一些常见的问题进行举例。
1.点击某处弹出提醒，例如某些游戏在注册时会弹出“过渡游戏有害健康”的提示语，利用JQuery可以解决这一问题。
首先运行效果如下，鼠标点击勾选框时弹出“适度游戏的提示框”。
要解决这个问题，其实H5的hover事件和JS都可以解决，但是利用JQ代码更加方便快捷，主要是鼠标事件的应用：mouseover和mouseout。
其运行代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type=text/css>
#div1{
width: 300px;height: 80px;background-color: bisque;
display: none;
}
</style>
<script language="JavaScript" src="http://www.mamicode.com/js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
$("input").mouseover(function(){
$("#div1").css("display","block");
});
$("input").mouseout(function(){
$("#div1").css("display","none");
});
});
</script>
</head>
<body>
<input type="checkbox" />XX游戏协议
<div id="div1">
为了您的身体健康，请适度游戏。
</div>
</body>
</html>
相同的，我们可以按照这个思路解决类似的问题，如导航栏点击背景色改变等。
2.利用JQuery实现动画
jQuery animate() 方法允许您创建自定义的动画
下面是一些常用的动画显示效果：
.show()：让隐藏元素显示，同时修改元素的宽度、高度、opacity属性
.hide():让显示元素隐藏，与show()相反；
.slideDown(): 让隐藏元素显示，效果为从上往下，增加高度
.slideUp(): 让显示的元素隐藏，效果从下往上，减小高度
.slideToggle():让显示的隐藏，让隐藏的显示
.fadeOut(): 让显示元素隐藏，淡出
.fadeIn()： 让隐藏元素显示，淡入
.fadeToggle(): 让显示的隐藏，让隐藏的显示。淡入淡出
.fadeTo(时间，透明度，函数):同fadeToggle，但是多了透明度参数，可以指定显示的最终透明度
.animate({最终的样式属性键值对},动画时间,动画效果("linear" "swing"),回调函数)： 自定义动画
应用举例：让动画往右移动，拉伸并且透明度降低。效果如下图
其运行代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script language="JavaScript" src="http://www.mamicode.com/js/jquery-1.10.2.js"></script>
<style type="text/css">
div{
position: absolute;
}
</style>
<script type="text/javascript">
$(function(){
$("div").animate({
left:"350px",
width:"100px",
height:"200px",
opacity:"0.1"
},3000,function(){
alert("动画完成")
});
});
</script>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
overflow: hidden;
}
</style>
</head>
<body>
<div>动画</div>
</body>
</html>
除此之外，JQ还有更强大的地方，总而言之，JQ是非常利于提高开发者工作效率的。
常见的JQuery应用举例