APP
通過jquery實現(xiàn)鼠標移入移出效果
鼠標移入用mouseover方法
鼠標移出用mouseout方法
但是，jquery給我們提供了一個復(fù)合事件替換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給我們提供了一個復(fù)合事件替換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中的動畫隱藏、顯示效果實現(xiàn)
使用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函數(shù)庫、jQuery極大地簡化了JavaScript編程。
jQuery設(shè)計的宗旨是“write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設(shè)計模式，優(yōu)化HTML文檔操作、事件處理、動畫設(shè)計和Ajax交互。jQuery兼容各種主流瀏覽器。</div>
</body>
</html>
本文摘自 ：https://blog.51cto.com/m
