jQuery中的事件
1，基礎事件
基礎事件又包括
a：window事件
在javaScript中的window事件又 window onload = fn(); 和onclick 在jQuery中常用的事件有文檔就緒事件，對應的方法ready()
$(document).ready(fn(){});
b：鼠標事件
常用的鼠標事件有：
click(fn); 單機鼠標時發生，fn表示綁定的函數
keydown(fn); 鼠標指針移過時，fn表示綁定函數
blur(fn) 鼠標指針移出時，失去焦點時，所執行的函數
比如 最常見的光棒事件
$(function () { //獲取所有的li元素 $("li").mouseover(function () { $(this).css("background", "pink"); }); //注冊事件 $("li").mouseout(function () { $(this).css("background", ""); }); });<ul> <li>一個示例</li> <li>二個示例</li> <li>三個示例</li> </ul>c：鍵盤事件
鍵盤事件指當鍵盤聚焦到Web瀏覽器時，用戶每次按下或者釋放按鍵時所產生的事件常用的鍵盤有keydown(),keyup(),keypress()
//鍵盤事件 $("input").keyup(function(event) { var s =event.keyCode; alert(s);//打印鍵盤的keycode值}); <h2>鍵盤事件</h2><br> --<br> <body> <input /><span id="first">注意用詞</span> <br> --d：表單事件
表單事件是所有事件中最穩定，且支持最穩定的事件之一，除了用戶選取單選框，復選框等產生的click事件外，當元素獲得焦點時觸發focus事件，失去焦點時觸發blur事件
//表單事件 $("input").focus(function () { $("#first").addClass("a"); }) $("input").blur(function () { $("#first").removeClass("a"); }); });--- <h2>鍵盤事件</h2> <input /><span id="first">注意用詞</span>e：綁定事件
綁定事件是指為匹配到的元素同事綁定一個或者多個事件，使用bind()方法
語法：bind(type,[data],,fn)
對應的unbind() 解除事件
例如：為一個無序列表綁定光棒效果
$("li").bind({ "mousemove": function () { $(this).css("background", "blue"); }, //鼠標移過 獲得焦點 "mouseout": function () { $(this).css("background", ""); }, //鼠標移出失去焦點 click: function () { alert(this.innerHTML); } }).unbind("mouseout mousemove"); //解除事件 });--<body> <ul> <li>一個示例</li> <li>二個示例</li> <li>三個示例</li> </ul> </body>2，復合事件
hover()和toggle()方法，這兩個方法和 ready()方法相似都是jQuery自定義的方法。
a:hover()方法用于模擬鼠標指針懸停事件
<script src="js/jQuery1.11.1.js" type="text/javascript"></script><script> $(function () { $("#menu").hover(function () { //鼠標懸停事件 改變元素css樣式 $("#myacc").css("display", "block"); }, function () { $("#myacc").css("display", "none"); }); });</script>通常用在網站導航欄下拉的隱藏效果，相當于鼠標事件的mouseover 和mouseout事件
b:toggle()方法 在1.9以上的jquery都刪除了這個事件。
toggle()方法相當于鼠標連續單擊事件，執行的fn
$(function () { $("#one").toggle( function () { $("#two").show(); //控制元素顯示 }, function () { $("#two").hide(); //控制元素隱藏 } ); }); //產生類似于 導航欄的單擊出現再次單擊關閉的效果-3，
a：控制 元素的顯示與隱藏
在jQuery中，可以使用【show() hide()】控制元素的的顯示和隱藏
屬性：【speed】[callback]
speed的默認的值有slow(0.6s) normal(0.4s) fast(0.2s)
前者控制元素顯示或隱藏的速度，后者是指元素執行完方法后callback的自定義函數
----$(function () { $("body").click(function () { $("img").show("slow"); //單擊窗體 一圖片以slow方式顯現出來 }); });------省略部分代碼<img src="1.jpg">b:相似的方法還有控制元素的淡入淡出分別對應fadein()和fadeout()
對應語法是$(selector).fadein([speed],[callback]) --以淡出的方法控制元素
$(selector).fadeout([speed],[callback])--控制元素淡出
c：改變元素高度的方法
slideDown(),slideUp(),
語法類似
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
