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. mysql 如何在访问某张数据表按照某个字段分类输出

    也许大家有时候会遇到需要将把数据库中的某张表的数据按照该表的某个字段分类输出,比如一张数据表area如下 我们需要将里面的area按照serialize字段进行分类输出,比如这种形式: areas   ...

  2. Linux第三周作业

    1.三个法宝 ①存储程序计算机工作模型,计算机系统最最基础性的逻辑结构: ②函数调用堆栈,堆栈完成了计算机的基本功能:函数的参数传递机制和局部变量存取 : ③中断,多道程序操作系统的基点,没有中断机制 ...

  3. jar包在控制台下运行

    今天有个项目需要在控制台下面运行jar文件 流程 1 新建java项目 2 新建 HelloWorld.java public class HelloWorld { public static voi ...

  4. 使用ADO.NET访问、查询和操作数据库

    ADO.ENT的主要组件 提供两个组件,用来访问和处理数据:.NET Framework 数据程序和DataSet(数据集) .NET Framework:是专门为数据处理及快速地只进,只读访问数据而 ...

  5. OO第一阶段总（休）结（养）分（生）析（息）

    第一次作业: 这是一次让我认识到ddl面前潜力真的可以无限大的作业. 一直以为OO是一门和数据结构一样先用几周的时间讲讲Java然后写写”Hello World”小程序再开始讲正课的我(我也不知道为什 ...

  6. 每天CSS学习之text-decoration

    text-decoration是CSS的一个属性,其作用是给文本装饰上划线.中间线.下划线或不装饰.其值如下所示: 1.none:不装饰任何线.该值是默认值.如下所示: p{ text-decorat ...

  7. vue-router-2-动态路由配置

    const User = { template: '<div>User{{ $route.params.id }}</div>' } const router = new Vu ...

  8. Cracking The Coding Interview 2.2

    #include <iostream> #include <string> using namespace std; class linklist { private: cla ...

  9. 3.10 C++虚基类 虚继承

    参考:http://www.weixueyuan.net/view/6367.html 总结: 本例即为典型的菱形继承结构,类A中的成员变量及成员函数继承到类D中均会产生两份,这样的命名冲突非常的棘手 ...

  10. DevExpress v18.1新版亮点——Office File API篇

    用户界面套包DevExpress v18.1日前正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevExpress Office File API v18.1 的新功能,快来下载试 ...