鼠标事件

.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);//

    });

鼠标不等于光标焦点

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="data:image/cat1.jpg">

        <img src="data:image/cat2.jpg">

        <img src="data:image/cat3.jpg">

        <img src="data:image/cat4.jpg">

    </div>

</body>

</html>

style.css

* { margin:; padding:; 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:; right:; bottom:; left:; 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();

});

效果图

实际开发常用的jquey事件类型，并运用到图片相册的更多相关文章

  1. iOS开发-常用第三方开源框架介绍

    iOS开发-常用第三方开源框架介绍 图像: 1.图片浏览控件MWPhotoBrowser        实现了一个照片浏览器类似 iOS 自带的相册应用,可显示来自手机的图片或者是网络图片,可自动从网 ...

  2. inux 驱动程序开发中输入子系统总共能产生哪些事件类型（EV_KEY,EV_ABS,EV_REL)

    inux 驱动程序开发中, 输入子系统总共能产生哪些事件类型?,以及分别是什么意思?详见如下: Linux中输入设备的事件类型有EV_SYN 0x00 同步事件EV_KEY 0x01 按键事件,如KE ...

  3. Oracle开发：常用的数据库字段类型[转]

    Oracle常用的数据库字段类型如下: 字段类型 中文说明 限制条件 其它说明 CHAR 固定长度字符串 最大长度2000 bytes VARCHAR2 可变长度的字符串 最大长度4000 bytes ...

  4. 深入理解DOM事件类型系列第一篇——鼠标事件

    × 目录 [1]类型 [2]顺序 [3]坐标位置[4]修改键[5]相关元素[6]鼠标按键[7]滚轮事件[8]移动设备 前面的话 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备.本文 ...

  5. JavaScript事件类型

    JavaScript事件类型 Web浏览器中可能发生的事件有很多类型.这里我将主要将下面几种常用的事件类型: UI事件 焦点事件 鼠标与滚轮事件 键盘与文本事件 复合事件 变动事件 HTML5事件 设 ...

  6. Android App 开发常用的xUtils框架

      最近搜了一些框架供初学者学习,比较了一下XUtils是目前git上比较活跃 功能比较完善的一个框架,是基于afinal开发的,比afinal稳定性提高了不少,下面是介绍: 鉴于大家的热情,我又写了 ...

  7. JQuery常用实用的事件[较容易忽略的方法]

     JQuery常用实用的事件 注:由于JQuery片段较多就没有用插入代码文本插入,请见谅!JQuery 事件处理ready(fn)代码: $(document).ready(function(){ ...

  8. iOS开发——实用篇Swift篇&项目开发常用实用技术

    项目开发常用实用技术 实现拨打电话 要实现打电话功能,最简单最直接的方式便是:直接跳到拨号界面 (注意:这个需要真机调试,模拟器无效果)     UIApplication.sharedApplica ...

  9. 《JAVASCRIPT高级程序设计》事件处理程序和事件类型

    一.事件流 谈到事件,首要要理解事件流的概念:事件流是指从页面接受事件的顺序:“DOM2级事件”规定事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段.目前大部分的浏览器的事件流是事件冒泡, ...

随机推荐

  1. js 获取元素坐标 和鼠标点击坐标

    js 获取元素的位置 var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); aler ...

  2. 分布式缓存Redis的持久化方式RDB和AOF

    一.前言 Redis支持两种方式的持久化,RDB和AOF.RDB会根据指定的规则“定时”将内存中的数据存储到硬盘上,AOF会在每次执行命令后将命令本身记录下来.两种持久化方式可以单独使用其中一种,但更 ...

  3. 面向初学者的指南：创建时间序列预测 (使用Python）

    https://blog.csdn.net/orDream/article/details/100013682 上面这一篇是对 https://www.analyticsvidhya.com/blog ...

  4. mybatis入门案例分析

    mybatis入门案例分析 一.设计模式分析 public class MybatisTest { public static void main(String[] args) throws Exce ...

  5. CSS学习笔记--Div+Css布局实战(入门)

    基本页面布局 本教程带着大家做一个简单的页面布局 最重效果如下: 1.第一部,先创建上下左右4个DIV <!DOCTYPE html> <html> <head lang ...

  6. Docker 使用笔记-常用基础命令

    常用基础命令 环境:Linux Ubuntu 1.查看docker信息 docker version | docker info 2.启动docker服务 sudo systemctl start d ...

  7. webpack--运行npm run dev自动打开浏览器运行首页的两种方式以及热加载

    作为开发人员,我们在修改了代码之后,在vscode终端运行npm run dev指令后,希望它可以自动打开浏览器方便我们调试,有两种方式可以实现: 自动打开浏览器的两种方式: 方式一: 1.webpa ...

  8. java核心技术----访问权限

    Java支持四种不同的访问权限: 修饰符 说明 public 共有的,对所有类可见 protected 受保护的,对同一包内的类和所有子类可见 private 私有的,在同一类内可见 默认的 在同一包 ...

  9. Flink安装及实例教程

    通过本教程我们将快速部署好flink在linux下的环境,并通过flink完成一个小demo的测试 一.准备阶段 flink压缩包下载(1.7.2): http://archive.apache.or ...

  10. HotSpot虚拟机对象创建

    2.3.1对象创建 Java是一门面向对象的语言,在Java程序的运行过程中无时无刻都有新的对象被创建出来.从语言的层面看,创建对象通常仅仅是一个new关键字而已,从虚拟机的角度看,创建对象又是怎样的 ...