近期在写jQuery的时候出了这样一个问题?

<html>

<head>

	<title></title>

</head>

<style type="text/css">

	.clicked{

		width: 100px;

		height: 40px;

		border-radius: 3px;

		background-color: #cba;

	}

</style>

<body>

	<a href="#" id="test" >yes</a>

<script type="text/javascript"

	src="jquery-1.10.2.min.js">

</script>

<script type="text/javascript">

	$(function() {

		$('a').click(function(event) {

			$(this).addClass('clicked');

			setTimeout(function(){

				$(this).removeClass('clicked');

			},3000);

		});

	});

</script>

</body>

</html>

发现过了"一天" 这个button的效果也没有被移除,这让我十分的诧异.jQuery出了问题?

我毫不犹豫的问了自己这样一个问题,紧接着,我就否决了.为啥呢?由于我认为我想多了.....

可是这件事要搞明确.

可是问题在以下,为什么以下的那个setTimeout()无法工作呢.

我百思不得其解.

于是乎,我在setTimeout的匿名函数中打印了这种东西.

cosole.log(this === window);

返回值 true //////? what.

怎么会这样,我是写着玩的...

于是我又细致探究了一下.

原来

在传统的onevent属性代码中,this 引用接收事件元素 ---可是仅仅在属性中,而不在从属调用的函数中.

这句话是什么意思呢?

就是它确实是在我们的那个click中.可是假设在里面调用闭包的函数时,this对象就又又一次指回了我们的window对象.

那要如何解决问题呢...非常好办啊..

<span style="font-size:18px;"><script type="text/javascript">

	$(function() {

		$('a').click(function(event) {

			$this = $(this);

			$this.addClass('clicked');

			setTimeout(function(){

				console.log(this === window);

				$this.removeClass('clicked');//2

			},3000);

		});

	});

</script></span>

对了.就是将$(this) 保存成一个本地的变量..那么为什么将this 或者$(this)拷贝到一个本地变量能解决问题?

javascript为參数核函数的局部变量创建了一个闭包.

闭包能够归纳为一下的4个内容.

1能够在javascript函数中嵌套还有一个函数,嵌套能够为多级.

2函数不仅能读取自己的 參数和局部变量,并且能读写嵌套函数中的变量.

3即使外部函数已经返回之后再调用内部函数相同有效.比方setTimeout

4无论匿名或者命名函数都一样.this是javascript特殊的keyword,所以这些原则都不适用,通过将this的值拷贝到一个局部变量中,就能利用闭包使该值在不论什么嵌套函数中使用.

Best Wishes.

jQuery 之 $(this) 出了什么问题?的更多相关文章

  1. jquery定时滑出可最小化的底部提示层

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/index.htm当打开页面或者刷新页面后等待两秒钟,会在底部滑出可最小化的提示层.滑出层半透明,可关闭再现. ...

  2. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  3. 一款效果精致的 jQuery 多层滑出菜单插件

    想要以用户友好的方式呈现多级菜单是件不容易的事情,而且还要跨浏览器兼容就更难了.Multi-Level Push Menu 这款 jQuery 插件提供了呈现这种菜单的解决方案,能够让你无限制的展示菜 ...

  4. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  5. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  6. JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法(转）

    原文:JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法 jquery-easyui是一个基于jquery的图形界面插件,利用easyui可以创建很多好看的网页界面 ...

  7. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

  8. jQuery渐隐渐出的文字提示

    <html> <head> <title>jquery渐隐渐出的文字提示</title> <style type="text/css&q ...

  9. jQuery.reveal弹出层

    jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说 ...

随机推荐

  1. Jquery dom搜索之siblings()方法

    如果给定一个dom的元素集合的算则其对象,siblings()方法允许我们在dom树中搜索这个元素集合的同胞元素,并匹配这些元素构造一个新的对象,Jquery文档里面是这么说的,那么让我来用简单易懂的 ...

  2. mac outlook无法发送邮件

    工具-帐户 第一步把SSL钩挑上 第二步 下面的更多选项,验证选择“使用接收服务器信息” 搞定了!记得个赞!

  3. 简单的UIScrollView 下拉刷新

    这里只贴主要代码 #import "ViewController.h" @interface ViewController ()<UIScrollViewDelegate&g ...

  4. 射频识别技术漫谈(22)——RC系列射频芯片的寄存器操作

    前面提到,RC系列内部64个寄存器的正确操作是软件编写的关键.正确设置寄存器首先要做到与寄存器正确通信,其次是要对寄存器写入正确的值. RC系列射频芯片与微控制器的接口有并口和SPI接口两种类型.显然 ...

  5. 射频识别技术漫谈(13)——Mifare S50与Mifare S70

    Mifare S50和Mifare S70又常被称为Mifare Standard.Mifare Classic.MF1,是遵守ISO14443A标准的卡片中应用最为广泛.影响力最大的的一员.而Mif ...

  6. Nexus 5完全拆解

    Nexus 5,由LG制造,配备高通骁龙四核处理器,4.95英寸1080P显示屏,支持4G LTE,运行最新的Android 4.4 KitKat原生操作系统.国外著名拆解网站iFixit第一时间带来 ...

  7. Spring Boot使用Redis进行消息的发布订阅

    今天来学习如何利用Spring Data对Redis的支持来实现消息的发布订阅机制.发布订阅是一种典型的异步通信模型,可以让消息的发布者和订阅者充分解耦.在我们的例子中,我们将使用StringRedi ...

  8. 20 你应该知道的PHP库

    下面是一些非常有用的PHP类库,相信一定可以为你的WEB开发提供更好和更为快速的方法. 图表库 下面的类库可以让你很简的创建复杂的图表和图片.当然,它们需要GD库的支持. pChart – 一个可以创 ...

  9. Libev学习笔记2

    这一节根据官方文档给出的简单示例,深入代码内部,了解其实现机制.示例代码如下: int main (void) { struct ev_loop *loop = EV_DEFAULT; ev_io_i ...

  10. iOS 基于Socket 的 C/S 网络通信结构（下一个）

    以前实现简单 Server 程序,服务端通过 void WriteStreamClientCallBack(CFWriteStreamRef stream, CFStreamEventType eve ...