實際開發經常使用的jquey事件類型，並運用到圖片相冊

時間  2020-02-17
標籤 實際 開發 經常 使用 jquey 事件 類型 運用 圖片 相冊 简体版
原文   原文鏈接

鼠標事件javascript

.click  鼠標單擊css

.dblclick  鼠標雙擊html

    // 單擊事件
    $("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()  鼠標按下java

.mouseup()  鼠標鬆開node

.mousedown+.mouseup=clickjquery

    // 鼠標按下
    $("a").mousedown(function(){
        console.log("鼠標按下");
    });

    // 鼠標鬆開
    $("a").mouseup(function(){
        console.log("鼠標鬆開");
    });

.mouseenter() 鼠標進入瀏覽器

.mouseleave（)  鼠標移出app

有點相似於hover的感受函數

    // 鼠標移入
    $("a").mouseenter(function(){
        console.log("鼠標移入");
    });

    // 鼠標移出
    $("a").mouseleave(function(){
        console.log("鼠標移出");
    });

mouseenter+mouseleave=hoverflex

.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瀏覽器中，在表單內部會起到提交表單的功能

用處：

一、提交表單

二、禁止提交表單（回調函數返回值爲false）

三、提交表單時進行指定操做（表單驗證）

<!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：

一、刷新後第一次按下左鍵無效，第二次按左鍵開始生效

緣由：默認後面的覆蓋前面的，所以顯示的是第4張；可是index是0，所以第一次按左鍵時，index變成了最後一張；視覺上看是沒有變化的

最簡單的解決方法：將 index 改成默認顯示的圖片，使之同步（ index=0 改爲 $("a").length-1）

二、刷新後默認是最後一張，按下右鍵，出來的圖片不是第一張，而是第二張

前面一個解決方法，同時解決了1和2兩個bug

三、左右幾回按鍵以後，輕輕一動鼠標，圖片切換到了最後一張；鼠標移出再移入時又到了最後一張

緣由：$("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();

});

效果圖

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程