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. php删除文件夹下面所有文件包括（删除文件夹）不删除文件夹

    function deldir($dir) { //先删除目录下的文件: $dh=opendir($dir); while ($file=readdir($dh)) { if($file!=" ...

  2. Module loader：模块加载器

    <p data-height="265" data-theme-id="0" data-slug-hash="XpqRmq" data ...

  3. ural1517

    题解: 后缀数组 求一下最长公共字串 代码: #include<cstdio> #include<cmath> #include<algorithm> #inclu ...

  4. Docker容器使用jenkins部署web项目--总结（二）

    (1)需要安装Docker容器,在Docker容器内安装jenkins,gogs,tomcat.   新建maven项目,添加findbugs plugin. 使用docker启动jenkins,go ...

  5. RabbitMQ 消息应答机制(message acknowledgments)

    消息应答机制是一个很重要的功能,它能保证消息队列中的某个消息是否被成功处理.如果RabbitMQ server收到Consumer端发来的应答信号,就会将Consumer刚才处理的消息删除,并发送下一 ...

  6. RabbitMQ fanout类型的Exchange

    就目前来说,Exchange是与消息发送端有关的,因为它可以指定将消息发送到哪个或哪些队列中. 本篇文章介绍的fanout类型就是指定将消息群发到与Exchange绑定的所有队列中. fanout这个 ...

  7. asp.net MVC之Action过滤器浅析

    在asp.net MVC中,Action过滤器是一大利器,它可以在以下两个步骤执行相关的代码: 1.执行Action方法之前:OnActionExecuting 2.Action方法执行完毕后:OnA ...

  8. 总结小bug

    1.下拉刷新问题 //不要用scroll-view 他会阻止刷新 //改用view <template name="movieGridTemplate"> <!- ...

  9. jdk8--stream并行流

    stream的并行流要理解一个框架如下: 单线程,多线程和并行流对比 package com.atguigu.java8; import java.util.concurrent.ForkJoinPo ...

  10. SharePoint online Multilingual support - Development(1)

    博客地址:http://blog.csdn.net/FoxDave 上一节讲了SharePoint Online网站多语言的实现原理机制,本节主要从编程的角度来谈一下如何进行相关的设置. 下面列出 ...