滑鼠事件
.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
知識點補充：mousedown和mouseup事件滑鼠左鍵點擊和滑鼠右鍵點擊都是可以實作的，click和dblclick事件只有滑鼠左鍵點擊才能實作
// 滑鼠按下 $("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> div{ display: none; } </style> </head> <body> <button class="btn">點擊無效</button> <button class="bind">系結</button> <button class="unbind">取消系結</button> <div>按鈕被點擊了~</div> </body> </html>
.one() 系結一次性的事件處理函式
<!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("點擊無效");; }); $(".bindOne").on("click",function(){ $(".btn").one("click",flash) .text("僅一次點擊有效"); }); var flash=function(){ $("div").show().fadeOut("slow");//先顯示，再緩慢隱藏 } }) </script> <style> div{ display: none; } </style> </head> <body> <button class="btn">點擊無效</button> <button class="bind">系結</button> <button class="unbind">取消系結</button> <button class="bindOne">系結一次</button> <div>按鈕被點擊了~</div> </body> </html>
專案三大bug：
1、重繪后第一次按下左鍵無效，第二次按左鍵開始生效
原因：默認后面的覆寫前面的，因此顯示的是第4張；但是index是0，因此第一次按左鍵時，index變成了最后一張；視覺上看是沒有變化的
最簡單的解決方法：將 index 改為默認顯示的圖片，使之同步（ index=0 改成 $("a").length-1）
2、重繪后默認是最后一張，按下右鍵，出來的圖片不是第一張，而是第二張
前面一個解決方法，同時解決了1和2兩個bug
3、左右幾次按鍵之后，輕輕一動滑鼠，圖片切換到了最后一張；滑鼠移出再移入時又到了最后一張
原因：$("a").add(document) 這種寫法導致程式無法判斷什么時候是針對a，什么時候是針對document，導致滑鼠在document上移動時也觸發了mouseenter事件
解決方法：判斷只有當觸發事件的元素的標簽名是a的時候，才進行切換
但是，一般專案中輪播圖默認都是從0開始的
解決：函式封裝需要初始化
專案index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jquery</title> <link rel="stylesheet" href="style.css"> <script src="jquery.js"></script> <script src="script.js"></script> </head> <body> <span class="top"></span> <nav> <a href="#">banner1</a> <a href="#">banner2</a> <a href="#">banner3</a> <a href="#">banner4</a> </nav> <div class="img-box"> <img src="image/cat1.jpg"> <img src="image/cat2.jpg"> <img src="image/cat3.jpg"> <img src="image/cat4.jpg"> </div> </body> </html>
style.css
* { margin: 0; padding: 0; border: none; } html, body { overflow: hidden;/*解決因為盒模型溢位造成的垂直方向滾動條*/ height: 100%; background-color: rgb(145, 176, 200); } span.top { display: block; width: 16px; height: 16px; margin: 30px auto 40px; border-radius: 50%; background-color: #fff; } nav { position: relative; display: flex;/*彈性盒模型*/ width: 40%; margin: 0 auto 45px; justify-content: space-between;/*實作元素在容器內左右均勻分布*/ } nav:before { position: absolute; top: 20px; display: block; width: 100%; height: 10px; content: '';/*激活偽元素*/ background-color: #fff; } nav > a { font-size: 14px; position: relative; /*默認是static定位，會被絕對定位覆寫 修改為相對定位之后，會覆寫前面的元素*/ padding: 10px 20px; text-decoration: none; color: rgb(144, 146, 152); border: 2px solid rgb(144, 146, 152); background-color: #fff; } .img-box { position: relative; overflow: hidden; width: 250px; height: 250px; margin: 0 auto; background-color: #fff; box-shadow: 0 0 30px 0 rgba(144, 146, 152, .3); } .img-box img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 98%; margin: auto;/*以上5句實作絕對定位的居中*/ } /*# sourceMappingURL=style.css.map */
script.js
$(function(){ var index=$("a").length-1; //系結多個事件 $("a").add(document).on({ click:function(event){ event.stopPropagation();//阻止冒泡 index=$(this).index(); // 獲取當前點擊的a的index swiper(); }, mouseenter:function(event){ event.stopPropagation();//阻止冒泡 console.log($(this)[0].nodeName);//當前物件的標簽名 if($(this)[0].nodeName=="A"){ index=$(this).index(); // 獲取當前點擊的a的index }else{ return true; } 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(); } }); var swiper=function(){ $("img").eq(index) .css({"opacity":"1"}) .siblings() .css({"opacity":"0"}); } //初始化 var init=function(){ index=0; swiper(); } init(); });
效果圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/11174.html
標籤：jQuery
上一篇：jQuery的核心功能選擇器