jq的私人网站：http://jquery.cuishifeng.cn/

具体的查看上面的网站

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jq事件操作</title>
    <style>
        .box,.box2 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="box">box</div>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <input class="inp" type="text">
</body>
<script src="js/jq.js"></script>
<script>
    //jq的弹出窗口事件有两种写法
    //1、jq设置点击弹窗
    var $box = $('.box');
    $box.click(function () {
        alert('这是jq事件')
    });
    //2、这是第二种
    var $box1 = $('.box1');
    $box1.on('click',function () {
        alert('这是第二种事件写法')
    });

    //获取焦点
    $('.inp').focus(function () {
        console.log('获取焦点')
    });

    //失去焦点
    $('.inp').blur(function () {
        console.log('失去焦点')
    });

    //mouseover和mouseenter是一样的
    $('.box').mouseenter(function () {
        console.log('鼠标移入')
    });

    $('.box').mouseout(function () {
        console.log('鼠标移出')
    });

    $('.box').mousemove(function () {
        console.log('鼠标在区域内移动')
    });

    $('.box2').mouseenter(function () {
        console.log('鼠标移入')
    });

    $('.box2').mouseout(function () {
        console.log('鼠标移出')
    });

    $('.box2').mousemove(function () {
        console.log('鼠标在区域内移动')
    });

    //事件转换成on状态
    $('.box2').on('mouseover',function () {
        console.log('事件转成on状态')
    })

</script>
</html>

（18）jq事件操作的更多相关文章

  1. jq事件操作汇总

    bind()        向匹配元素附加一个或更多事件处理器blur( )        触发.或将函数绑定到指定元素的 blur 事件change()        触发.或将函数绑定到指定元素的 ...

  2. Jquery的事件操作和文档操作

    对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...

  3. 前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍

    昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...

  4. ISO处理jq事件

    jq事件在IOS上,如果标签本身不具备某些功能,而我们通过document或者body绑定上去的话,有些事件是不起作用的,同时在IOS上jq事件也存在延迟. 事件不起作用 这里点击事件为例,在IOS中 ...

  5. HTML 事件(四) 模拟事件操作

    本篇主要介绍HTML DOM中事件的模拟操作. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4.  ...

  6. （旧）子数涵数·Flash——影片剪辑的事件操作

    一.综述 1.概念:影片剪辑的事件操作,就是onClipEvent命令,就如同在按钮上使用的on命令. 2.方法:onClipEnvent(参数){命令} 3.参数:onClipEnvent有许多的参 ...

  7. Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件）

    最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...

  8. 10-JavaScript之DOM的事件操作

    JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...

  9. 前端 ----关于DOM的事件操作

    关于DOM的事件操作   一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for ...

随机推荐

  1. pycharm搭建开发配置，远程调试，数据库配置，git配置等

    1 开发环境搭建 1.1 简介 使用虚拟机作为代码运行环境,本地使用pycharm进行代码编辑,使用远程调试功能进行debug. 1.1 安装centos虚拟机环境: 1.操作系统: 2.网络配置: ...

  2. linux下top命令参数详解

    top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.下面详细介绍它的使用方法. 内存信息.内容如下: Mem: 191272k to ...

  3. linux因勿删或误操作导致登录界面异常，命令无法使用，显示/bin/bash:No such file or directory

    一.故障现象 1.用secure CRT连接服务器时显示: /bin/bash:No such file or directory 翻译成中文是:没有此类文件或目录 2.直接登录服务器执行命令时显示: ...

  4. day28-python阶段性复习-基础二

    六.流程控制 if条件语句 #!/usr/bin/python if 1: print 'hello python' 1表示成立,0表示不成立       条件语句排断 if : 条件 elif: 添 ...

  5. angular4-http

    导入 Http 模块 import { HttpModule } from '@angular/http'; @NgModule({ imports: [BrowserModule, FormsMod ...

  6. js call回调的this指向问题

    function fn1(){ console.log(1); } function fn2(){ console.log(2); } fn1.call(fn2); //输出 1 fn1.call.c ...

  7. DevExpress ASP.NET Core Controls v18.2新功能详解

    行业领先的.NET界面控件2018年第二次重大更新——DevExpress v18.2日前正式发布,本站将以连载的形式为大家介绍新版本新功能.本文将介绍了DevExpress ASP.NET Core ...

  8. DevExpress WinForms v18.2新版亮点（五）

    行业领先的.NET界面控件2018年第二次重大更新——DevExpress v18.2日前正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevExpress WinForms v1 ...

  9. tf 模型保存

    tf用 tf.train.Saver类来实现神经网络模型的保存和读取.无论保存还是读取,都首先要创建saver对象. 用saver对象的save方法保存模型 保存的是所有变量 save( sess, ...

  10. 火狐下，td 的 bug;

    想实现类似的效果,看代码, <div style="width:488px;float:left; margin:-52px 0px 15px 15px;"> < ...