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. ueeditor 百度编译器使用onchange效果

    <script id="editor" type="text/plain" style="width:100%;height:200px;&qu ...

  2. windows 日常使用

    打开任务管理器:shift+ctrl+esc 各种快捷打开的方式 regedit.msc 注册表 gpedit.msc 组策略 lusrmgr.msc本地用户和组 CMD命令窗口打开任务管理: tas ...

  3. VS2010安装项目程序打包操作详解

    (转自:http://blog.sina.com.cn/s/blog_74f702e60101at62.html) 1.打开VS2010,选择 新建项目---其他项目类型---Visual Studi ...

  4. win10与centos7的双系统U盘安装（一：制作u盘启动盘）

    博主近来在学习linux系统,当然学习第一步自然是安装系统了,博主选择的是centos7,博主自己的电脑是联想的,系统是win10专业版,在历经数次失败后,博主成功使用u盘安装了win10和cento ...

  5. JQuery button控制div或者section

    一.项目你需求 点击左边导航栏的某个按钮,右边内容栏显示出,相应的内容 效果如图   二.html与css.jQuery 1.div模式 <!DOCTYPE html PUBLIC " ...

  6. 阿里云服务器创建swap分区

    阿里云服务器使用了4核8G内存配置,但最近由于jenkins构建时执行gradle打包安卓应用,导致即时的内存严重不足,线上应用长时间无法访问. 执行free命令才发现,swap分区一直是没有创建的. ...

  7. RabbitMQ 设置消息的优先级

    在RabbitMQ中,可以设置消息的优先级,也就相当于在队列中置顶某条消息,让某个消息优先得到处理的功能. 既然是设置消息的优先级,那么就是针对生产者,也就是消息发布端. 设置消息的优先级一共有2个步 ...

  8. 《Python》并发编程

    手工操作 —— 穿孔卡片 1946年第一台计算机诞生--20世纪50年代中期,计算机工作还在采用手工操作方式.此时还没有操作系统的概念.     程序员将对应于程序和数据的已穿孔的纸带(或卡片)装入输 ...

  9. 什么是XP

    极限编程(XP)是敏捷过程中最富盛名的一个.下述这些特点使得敏捷过程能够较好地适应商业竞争环境下对小型项目提出的有效资源和有限开发时间的约束. 极限编程的有效实践 极限编程的整体开发过程 极限编程的迭 ...

  10. Centos7部署kubernetes集群CA证书创建和分发(二)

    1.解压软件包 [root@linux-node1 ~]# cd /usr/local/src/ [root@linux-node1 src]# ls k8s-v1.10.1-manual.zip [ ...