Jquery真的不难~第四回 JQ也是事件驱动的(匿名函数的使用)

简介:

上一篇文章主要说的是JQ中如何去操作HTML标签的样式,今天主要来学习一下JQ几个比较重要的事件,如单击click,双击dblclick,鼠标移入mouseover,移出mouseout,焦点focus,移出焦点blur等等

  • 前言

  • 单击

  • 双击

  • 鼠标移入与移出

  • 焦点与移出焦点

  • JS中的匿名函数

前言

事件一词,大家应该不会陌生,我认为可以这样定义事件,当某个或某几个操作之后,会引入一个或者几个结果的产生,而这个结果我们叫它事件,即Event,JS世界中的事件与传统高级语言中的事件很类似,如对鼠标的单击,双击,键盘的按下,抬起等等,而在JQ的封装下,我们可以为JQ对象(一般是以$开头的变量,当然$只是JQ的标准写法,你可以自己去重新定义它)很容易的添加事件,格式一般为:

Jq对象.事件(function () {... });

代码书写方法很友好,其中还使用JS中的匿名方法(函数),稍候我会继续介绍匿名方法。

单击

$("#test").click(function () {
            alert("单击事件")
        });

双击

   $("#test").dblclick(function () {
            alert("双击事件")
        });

鼠标移入与移出

$("#msg").mouseover(function(){$(this).addClass("selected");});
$("#msg").mouseout(function(){$(this).removeClass("selected");});焦点与移出焦点

对于JQ事件,我们可以使用连接串的写法,即将多个事件写在一行中,JQ对象只在第一个事件前出现即可,如下代码:

$("#msg").mouseout(function(){$(this).removeClass("selected");})
         .mouseover(function(){$(this).addClass("selected");})

JS中的匿名函数

JS中的函数(方法)有两种,实名函数与匿名函数,实名函数一般用来干一件独立的事,因为匿名函数一般对在某个实名函数里出现,起到了返回全局变量的作用,如下代码:

        function zzl() {
             var res = function () {//匿名函数
                return {
                    msg: "OK"
                };
            };
            return res;
        }

         alert((zzl())().msg);

事实上,定义实名函数的第二种,即变量式函数也是使用了一个匿名函数的东西,呵呵,代码如下:

var log=function(msg){
  alert(msg);
}

有时,在函数中返回一个对象与返回一个函数总是让我们感到头病,有时,可能不知道如何去调用一个这样的复杂函数,看代码:

     var ReturnObject = function () {
            return { //返回一个对象
                msg: "返回一个对象"
            };
        }
        var ReturnFunction = function () {
            var fun = function () {
                return {
                    msg: "返回一个函数"
                };
            };
            return fun; //返回一个函数
        }

事实上,调用的时候,你的头脑是否清晰,如果清晰的活,还就没什么难的了,返回是对象,直接就是ReturnObject().msg,返回的是函数,当然

你要加个()了,就像这样ReturnFunction()().msg),当然如果你不()(),这样的写法如果你认识可读性差,可以改为(ReturnFunction())().msg

看上去就清晰一些了,呵呵!

输出一下吧:

  console.log(ReturnObject().msg);
 console.log(ReturnFunction()().msg);
  console.log((ReturnFunction())().msg);

结果如下:

恩,其实所有的东西都是相通的,只要你相信你自己,就一定可以成功!

感谢您的阅读!晚安!

感谢让我找到了写手的感觉,呵呵!谢谢!

本文转自博客园张占岭(仓储大叔)的博客,原文链接:Jquery真的不难~第四回 JQ也是事件驱动的(匿名函数的使用),如需转载请自行联系原博主。

目录
相关文章
|
6月前
|
JavaScript 前端开发
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
62 0
|
JavaScript
jQuery入门第四章(JQ 事件绑定 )
jQuery入门第四章(JQ 事件绑定 )
111 0
jQuery入门第四章(JQ 事件绑定 )
|
JavaScript 前端开发
jQuery入门第五章(JQ事件类型补充 )
jQuery入门第五章(JQ事件类型补充 )
156 0
|
JavaScript
jQuery入门第三章(JQ 节点操作)
jQuery入门第三章(JQ 节点操作)
87 0
|
JavaScript 前端开发 Android开发
时隔一年多 JQuery 再度发布 3.6.1 新版本,你还在用JQ吗?
在上周(2022-08-26) JQuery 刚更新了一个 3.6.1 维护版本,距离上一个版本发布时间已过去一年零五个月之久......
|
JavaScript 前端开发 数据格式
|
JavaScript 前端开发