標籤：ogg src cal 樣本 javascrip 按鍵 yacc java 效果
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>
--
<body> <input /><span id="first">注意用詞</span>
--
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(),
文法類似
使用jQuery快速高效製作網頁互動特效
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
