今天我們就談談jquery中的事件和簡單動畫吧，它們畢竟基礎是進階華麗的根本！！
1.事件
1.window事件
ready 準備就緒
2.鼠標事件
方法 執行時機
click(fn) 單擊鼠標
$(document).ready(function(){ $("dd>img").click(function(){ $("dt>img").show(); });mouseover(fn) 鼠標指針移過時
mouseout(fn) 鼠標指針移出時
$("#nav .navsBox ul li").mouseover(function(){ $(this).addClass("onbg"); //為該元素添加類樣式.onbg }).mouseout(function(){ $(this).removeClass("onbg");//為該元素移除類樣式.onbg });hover()
$(".top").hover(function(){ $(this).addClass('bgreen'); },function(){ $(this).removeClass('bgreen'); }); 3.鍵盤事件
keydown() 按下鍵盤時
keyup() 釋放按鍵時
keypress() 產生可打印的字符時
$(function(){ $("[type=password]").keyup(function(){ $("#e").append("keyup"); }).keydown(function(){ $("#e").append("keydown"); }).keypress(function(){ $("#e").append("keypress"); }); $(document).keydown(function(event){ if(event.keyCode=="13"){ alert("確認要提交么？？？"); } });});4.表單事件
focus() 獲得焦點
blur() 失去焦點
$(function(){ $("input").focus(function(){ $(this).next().css("color","red"); //alert("1123"); }); $("input").blur(function(){ $(this).next().css("color",""); }); });綁定事件與移除事件
bind（type,[data],fn） （綁定）
type 主要包括blur，focus，click，mouseout等基礎事件，此外，還可以是自定義事件
[data] 作為event.data屬性值傳遞給事件對象的額外數據對象，該參數不是必需的
fn 用來綁定處理函數
unbind（[type],[fn]） (移除)
type 主要包括blur，focus,click,mouseout等基礎事件，此外，還可以自定義事件
fn 用來解除綁定的處理函數
$(function(){ $("li").bind({ mouseover:function(){ $(this).css("background-color","green"); },mouseout:function(){ $(this).css("background-color",""); } }); $("li").unbind();}); 2.動畫
1.控制元素顯示與隱藏 $(selector).show([speed],[callback])
$(selector).hide([speed],[callback])
speed：可選。規定元素從隱藏（顯示）到可見（不可見）的速度
callback ：可選。show函數執行完了之后，要執行的函數
$(function(){ $("p:visible").hide(100); }); //$("p:hidden").show(100);2.改變元素的透明度
$(function(){ $("input").click(function(){ $("img").fadeOut(100); //淺出 //$("img").fadeIn(100); 淡入 }); })3.改變元素的高度
$(function(){ $("h2").click(function(){ // $(".txt").slideup(); $(".txt").slideDown(); });});以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
