滑鼠事件 .click 滑鼠單擊 .dblclick 滑鼠雙擊 // 單擊事件 $("a").click(function(){ $("img").eq($(this).index()) // 獲取當前點擊的a的index .css({"opacity":"1"}) .siblings() .css ...
滑鼠事件
.click 滑鼠單擊
.dblclick 滑鼠雙擊
// 單擊事件 $("a").click(function(){ $("img").eq($(this).index()) // 獲取當前點擊的a的index .css({"opacity":"1"}) .siblings() .css({"opacity":"0"}); }); // 雙擊事件 $("a").dblclick(function(){ $("img").eq($(this).index()) // 獲取當前點擊的a的index .css({"opacity":"1"}) .siblings() .css({"opacity":"0"}); });
.mousedown() 滑鼠按下
.mouseup() 滑鼠鬆開
.mousedown+.mouseup=click
// 滑鼠按下 $("a").mousedown(function(){ console.log("滑鼠按下"); }); // 滑鼠鬆開 $("a").mouseup(function(){ console.log("滑鼠鬆開"); });
.mouseenter() 滑鼠進入
.mouseleave（) 滑鼠移出
有點類似於hover的感覺
// 滑鼠移入 $("a").mouseenter(function(){ console.log("滑鼠移入"); }); // 滑鼠移出 $("a").mouseleave(function(){ console.log("滑鼠移出"); });
mouseenter+mouseleave=hover
.hover() 裡面可以放兩個函數，第一個函數為移入的狀態，第二個函數為移出的狀態，多用於移出時還原
// 滑鼠懸停 $("a").hover(function(){ $("img").eq($(this).index()) // 獲取當前點擊的a的index .css({"opacity":"1"}) .siblings() .css({"opacity":"0"}); }); // 滑鼠懸停（over和out） $("a").hover(function(){ $("img").eq($(this).index()) .css({"opacity":"1"}) .siblings() .css({"opacity":"0"}); },function(){ $("img").eq($(this).index()) .css({"opacity":"0"}) .siblings() .css({"opacity":"1"}); });
mouseover 滑鼠進入（包括子元素）
mouseout 滑鼠移出（包括子元素）
比較少用，因為有冒泡和捕獲
// 滑鼠進入元素及其子元素 $("a").mouseover(function(){ $("img").eq($(this).index()) .css({"opacity":"1"}) .siblings() .css({"opacity":"0"}); }); // 滑鼠離開元素及其子元素 $("a").mouseout(function(){ $("img").eq($(this).index()) .css({"opacity":"1"}) .siblings() .css({"opacity":"0"}); });
mousemove 在元素內部移動
一有移動就會觸發，因此非常消耗資源
// 滑鼠移動 $("a").mousemove(function(){ console.log("滑鼠移動"); });
scroll 滑鼠拖拽滾動條
滑鼠一滾動就會觸發，因此消耗資源
// 滑鼠滾動 $("a").scroll(function(){ console.log("滑鼠滾動"); });
鍵盤事件
keydown 當鍵盤或者按鍵被按下時
參數為event，是鍵盤事件的屬性
event.key 按下的鍵
event.keyCode 按下的鍵的鍵碼（常用於識別左右上下箭頭）
// 鍵盤按下 $(document).keydown(function(event){ console.log(event); console.log(event.key);//a console.log(event.keyCode);//65 });
滑鼠不等於游標焦點
keydown只能在聚焦中有用
window 代表瀏覽器的視窗，document 是 HTML 文檔的根節點
從常理上說，元素沒有焦點是不能觸發鍵盤事件的（除了window、document等，可以理解為只要在這個頁面上，他們都是聚焦的）。
觸發鍵盤事件常用的就是表單元素
keyup 按鍵被釋放的時候，發生在當前獲得焦點的元素上
keydown 鍵盤被按下即可（包括所有鍵，以及輸入法輸入的內容）
keypress 鍵盤按鍵被按下的時候（必須是按下字元鍵，不包括其他按鍵，也不包括輸入法輸入的文字）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <script> $(function(){ $("input").keydown(function(e){ console.log("keydown"); }); }) $(function(){ $("input").keypress(function(e){ console.log("keypress"); }); }) </script> </head> <body> <form> <input type="text"> </form> </body> </html>
在input框中輸入內容的時候同樣顯示在下麵的p標簽中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <script> $(function(){ $("input").keydown(function(e){ var text=$(this).val(); $("p").text(text); }); }) </script> </head> <body> <form> <input type="text"> </form> <p></p> </body> </html>
其他事件
.ready() DOM載入完成
$(document).ready(function())
.resize() 調整瀏覽器視窗大小，只針對window對象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <script> $(function(){ $(document).resize(function(){ console.log("document+resize"); }); $(window).resize(function(){ console.log("window+resize"); }); }) </script> </head> <body> <form> <input type="text"> </form> <p></p> </body> </html>
.focus() 獲取焦點
.blur() 失去焦點
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <script> $(function(){ $("input").focus(function(){ console.log("(*^▽^*)"); }); $("input").blur(function(){ console.log("o(╥﹏╥)o"); }); }) </script> </head> <body> <form> <input type="text"> </form> <p></p> </body> </html>
.change() 元素的值發生改變，常用於input
有延遲機制，當快速改變內容時，不是實時跟著觸發事件
在輸入框中輸入的過程中，不會觸發.change事件，當游標離開或者手動點擊時才會觸發
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <script> $(function(){ $("input").change(function(){ console.log("change"); }); }) </script> </head> <body> <form> <input type="number"> </form> <p></p> </body> </html>
或者select列表的選擇也會觸發
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <script> $(function(){ $("select").change(function(){ console.log("change"); }); }) </script> </head> <body> <form> <select name="" id=""> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> </form> <p></p> </body> </html>
.select() 當input或者textarea中的文本被選中時觸發，針對於可選中文字的輸入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <script> $(function(){ $("input").select(function(){ console.log("select"); }); }) </script> </head> <body> <form> <input type="text" value="這是文本哦"> </form> <p></p> </body> </html>
.submit() 表單提交事件
button是html新增標簽，在其他地方依然是普通按鈕，但是在非IE瀏覽器中，在表單內部會起到提交表單的功能
用處：
1、提交表單
2、禁止提交表單（回調函數返回值為false）
3、提交表單時進行指定操作（表單驗證）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <script> $(function(){ // 給input[type="button"]添加提交表單的功能 $("input[type='button']").click(function(){ $("form").submit();//提交表單 }); //阻止表單提交 $("button").click(function(){ $("form").submit(function(){ return false;//只要回調函數的返回值是假，表單就不會被提交 }); }); //表單驗證 $("form").submit(function(){ if($("input[type='text']").val()!="cyy") return false; }) }) </script> </head> <body> <form action="javascript:alert('我被提交啦~')"> <input type="text"> <input type="button" value="button按鈕"><!-- 不能提交表單 --> <button>提交按鈕</button><!-- 可以提交表單 --> </form> <p></p> </body> </html>
事件參數 event
event.keyCode 左37 右39 上38 下 40
滑鼠在div框移動時，獲取滑鼠在頁面中的位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <script> $(function(){ $("div").mousemove(function(event){ $(".span1").text(event.pageX); $(".span2").text(event.pageY); }) }) </script> <style> div{ width:300px; height:300px; border:1px solid; margin:0 auto; text-align: center; line-height:300px; color:orange; } </style> </head> <body> <div> pageX:<span class="span1"></span> pageY:<span class="span2"></span> </div> </body> </html>
事件綁定與取消
.on(事件，[選擇器]，[值]，函數) 綁定一個或多個事件
以下兩種方式效果相同
// 單擊事件 $("a").click(function(){ index=$(this).index(); // 獲取當前點擊的a的index swiper(); }); //改寫成on的綁定 $(document).on("click","a",function(event){ event.stopPropagation();//阻止冒泡 index=$(this).index(); // 獲取當前點擊的a的index swiper(); });
為什麼使用on方法：
如果是動態生成的元素，使用.click這種方式是無法綁定的，因為會找不到該元素
需要使用live方法
從jquery1.7開始，把 bind delegate live 方法給移除，使用了 on 方法
這種方式可以獲取到動態生成的元素，因為是從document開始搜索的
$(document).on("click","a",function(event){
event.stopPropagation();//阻止冒泡
index=$(this).index(); // 獲取當前點擊的a的index
swiper();
});
也可用於綁定多個事件
//綁定多個事件 $("a").add(document).on({ click:function(event){ event.stopPropagation();//阻止冒泡 index=$(this).index(); // 獲取當前點擊的a的index swiper(); }, mouseenter:function(event){ event.stopPropagation();//阻止冒泡 index=$(this).index(); // 獲取當前點擊的a的index swiper(); }, keydown:function(event){ if(event.keyCode==37){//左 index=index>0 ? --index : $("a").length-1; }else if(event.keyCode==39){//右 index=index<$("a").length-1 ? ++index : 0; }else{ return true; } swiper(); } });
.off() 取消事件綁定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <script> $(function(){ $(".bind").on("click",function(){ $(".btn").on("click",flash) .text("點擊有效"); }); $(".unbind").on("click",function(){ $(".btn").off("click",flash) .text("點擊無效");; }); var flash=function(){ $("div").show().fadeOut("slow");//先顯示，再緩慢隱藏 } }) </script> <style>
