當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

jquery动画与事件案例

發(fā)布時(shí)間：2023/12/3 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery动画与事件案例小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

代碼都已經(jīng)測(cè)試通過(guò)，直接打開(kāi)注釋即可看見(jiàn)效果！

<!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(){//鼠標(biāo)單擊事件/*$("#div1").click(function(){alert('a');});*///鼠標(biāo)移動(dòng)上的事件/*$("#div1").mousemove(function(){$(this).css("background","yellow");});*///鼠標(biāo)離開(kāi)事件/*$("#div1").mouseout(function(){$(this).css("background","green");});*///鼠標(biāo)指針進(jìn)入時(shí)/*$("#div1").mouseenter(function(){$(this).css("background","pink");});*///鼠標(biāo)指針離開(kāi)時(shí)/*$("#div1").mouseleave(function(){$(this).css("background","red");});*///用戶(hù)按下鍵盤(pán)的時(shí)間/*$("[name='pass']").keydown(function(){alert("按下了鍵");});*///用戶(hù)釋放鍵盤(pán)的時(shí)間/*$("[name='pass']").keyup(function(){alert("釋放了鍵");});*///當(dāng)鍵盤(pán)或按鈕被按下時(shí)/*$("[name='pass']").keypress(function(){alert("按下了鍵");});*///獲得焦點(diǎn)/*$("[name='pass']").focus(function(){alert("聚焦");});*///失去焦點(diǎn)/*$("[name='pass']").blur(function(){alert("失去焦點(diǎn)");});*///綁定單個(gè)事件/*$("#div2").bind("click",function(){alert('單擊完了');})*///綁定多個(gè)事件/*$("#div2").bind({mouseover:function(){$(this).css("background","red");},mouseout:function(){$(this).css("background","yellow");}});*///移除綁定的事件/*$("#div2").unbind("mouseover");*///toggle()方法，相當(dāng)于模擬鼠標(biāo)多次單擊事件/*$("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")});*///動(dòng)畫(huà)，jquery顯示和隱藏/*$("p").hide();$("#div2").click(function(){$("p").show("300");});*///隱藏/*$("#div2").click(function(){$("p").hide("300");});*///改變?cè)氐耐该鞫?淡入和淡出)//淡入/*$("p").hide();$("#div2").click(function(){$("p").fadeIn("slow");})*///淡出/*$("#div2").click(function(){$("#div1").fadeOut("slow");})*///改變?cè)氐母叨?*$("#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>

總結(jié)

以上是生活随笔為你收集整理的jquery动画与事件案例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。