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. 解决eclipse/myeclipse导入项目时出现红色叹号的方法

  2. linux网络操作 ifconfig命令

    ifconfig 查看已经被激活的网卡详细信息 "ifconfig eth0" 查看特定的网卡信息 [root@ssgao ~]# ifconfig eth0 eth0 Link ...

  3. js 图片延时加载

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. hdu-2063-过山车（匈牙利算法）

    过山车 Problem Description RPG girls今天和大家一起去游乐场玩,终于可以坐上梦寐以求的过山车了.可是,过山车的每一排只有两个座位,而且还有条不成文的规矩,就是每个女生必须找 ...

  5. 深入理解java虚拟机---java虚拟机内存管理(七)

    本地方法栈.java堆.方法区 本地方法栈在HotSpot版本内与java虚拟机栈是合二为一的.不单独区分本地方法栈.但是java虚拟机中是有这样一块区域的. 作用: 1.本地方法栈为虚拟机栈执行ja ...

  6. jquery获取URL的参数和锚点

    由于经常会用到替换URL参数值,而网上写的方法代码都太长了,所以在这里写了一个简单的方法,供大家使用. 1)获取url参数 function getUrlParam(name) { var reg = ...

  7. maven包上传私服

    选择需要上传的项目右键-->Run As-->Run Configurations-->Maven Buid-->右键 new -->选择 base directory- ...

  8. linux,windows下日志文件查找关键词

    1.查找 /apps/tomcat/tomcat3/apache-tomcat-7.0.69/logs 目录下已.txt结尾的文件,在文件中搜索关键字 IfcmpEcrService并打印行号 /lo ...

  9. ASP.NET使用文件上传控件上传图片

    ASPX代码 <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default. ...

  10. nginx的日志切割

    nginx日志默认情况下统统写入到一个文件中,文件会变的越来越大,非常不方便查看分析.以日期来作为日志的切割是比较好的,通常我们是以每日来做统计的.下面来说说nginx日志切割. 如果我们使用的是yu ...