常見的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="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="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應用舉例