jquery动画与事件案例
生活随笔
收集整理的這篇文章主要介紹了
jquery动画与事件案例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼都已經測試通過，直接打開注釋即可看見效果！
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){//鼠標單擊事件/*$("#div1").click(function(){alert('a');});*///鼠標移動上的事件/*$("#div1").mousemove(function(){$(this).css("background","yellow");});*///鼠標離開事件/*$("#div1").mouseout(function(){$(this).css("background","green");});*///鼠標指針進入時/*$("#div1").mouseenter(function(){$(this).css("background","pink");});*///鼠標指針離開時/*$("#div1").mouseleave(function(){$(this).css("background","red");});*///用戶按下鍵盤的時間/*$("[name='pass']").keydown(function(){alert("按下了鍵");});*///用戶釋放鍵盤的時間/*$("[name='pass']").keyup(function(){alert("釋放了鍵");});*///當鍵盤或按鈕被按下時/*$("[name='pass']").keypress(function(){alert("按下了鍵");});*///獲得焦點/*$("[name='pass']").focus(function(){alert("聚焦");});*///失去焦點/*$("[name='pass']").blur(function(){alert("失去焦點");});*///綁定單個事件/*$("#div2").bind("click",function(){alert('單擊完了');})*///綁定多個事件/*$("#div2").bind({mouseover:function(){$(this).css("background","red");},mouseout:function(){$(this).css("background","yellow");}});*///移除綁定的事件/*$("#div2").unbind("mouseover");*///toggle()方法，相當于模擬鼠標多次單擊事件/*$("p").toggle(function(){$(this).css("background","red")},function(){$(this).css("background","orange")},function(){$(this).css("background","yellow")},function(){$(this).css("background","green")},function(){$(this).css("background","cyan")},function(){$(this).css("background","blue")},function(){$(this).css("background","people")});*///動畫，jquery顯示和隱藏/*$("p").hide();$("#div2").click(function(){$("p").show("300");});*///隱藏/*$("#div2").click(function(){$("p").hide("300");});*///改變元素的透明度(淡入和淡出)//淡入/*$("p").hide();$("#div2").click(function(){$("p").fadeIn("slow");})*///淡出/*$("#div2").click(function(){$("#div1").fadeOut("slow");})*///改變元素的高度/*$("#div2").click(function(){$("#div1").slideUp("slow");})*//*$("#div1").hide("3000");$("#div2").click(function(){$("#div1").slideDown("slow");})*/})</script><style type="text/css">#div1{width: 200px;height: 150px;background: pink;border-radius: 5px;line-height: 50px;text-align: center;cursor: pointer;}#div2{width: 200px;height: 150px;background: blueviolet;border-radius: 5px;line-height: 50px;text-align: center;cursor: pointer;}</style></head><body><div id="div1">按鈕1<p style="background: brown;">p1</p></div><div id="div2">按鈕2</div>密碼<input type="password" name="pass" /></body> </html>總結
以上是生活随笔為你收集整理的jquery动画与事件案例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 九族是哪九族 九族是指什么
- 下一篇： 第二章jQuery选择器