jQuery 之 $(this) 出了什么问题?
近期在写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) 出了什么问题?的更多相关文章
- jquery定时滑出可最小化的底部提示层
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/index.htm当打开页面或者刷新页面后等待两秒钟,会在底部滑出可最小化的提示层.滑出层半透明,可关闭再现. ...
- jquery制作弹出层带遮罩效果，点击阴影部分层消失
jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...
- 一款效果精致的 jQuery 多层滑出菜单插件
想要以用户友好的方式呈现多级菜单是件不容易的事情,而且还要跨浏览器兼容就更难了.Multi-Level Push Menu 这款 jQuery 插件提供了呈现这种菜单的解决方案,能够让你无限制的展示菜 ...
- js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .
js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...
- jQuery Dialog弹出层对话框插件
Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...
- JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法(转）
原文:JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法 jquery-easyui是一个基于jquery的图形界面插件,利用easyui可以创建很多好看的网页界面 ...
- jquery 简单弹出层(转)
预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...
- jQuery渐隐渐出的文字提示
<html> <head> <title>jquery渐隐渐出的文字提示</title> <style type="text/css&q ...
- jQuery.reveal弹出层
jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说 ...
随机推荐
- 关于ASP控件对象的一些简单操作
在线人数 Application.Lock(); Application[).ToString(); Application.UnLock(); Label1.Text = Application[& ...
- subversion和客户端的应用
1.安装svn的服务器端subversion.以及windows客户端TortoiseSVN: 2 cmd 建立库,名字为svnpro ----- svnadmin create F:\svnpro, ...
- AC自动机妙用
理解题意之后,很自然的想到了用AC自动机搞,结果网上一搜,全是暴搜,按照自己的思想,AC自动机搞起,果然在提交了数次之后,看到了Accept. AC自动机需要三个步骤: 第一步:建立字典树: 第二步: ...
- mysql 锁表查询及其处理
1.show OPEN TABLES where In_use > 0; 2.show processlist; 3.kill thread_id; 其中 thread_id为processli ...
- 8．PHP 教程_PHP字符串
字符串变量用于存储并处理文本. PHP中的字符串变量 字符串变量用于包含有字符的值. 在创建字符串之后,我们就可以对它进行操作了.您可以直接在函数中使用字符串,或者把它存储在变量中. 在下面的实例中, ...
- 读取IOS的相应路径
// IOS相应路径 NSString* bundlePath = [[NSBundle mainBundle] bundlePath]; NSLog(@"bundlePath = % ...
- 关于JVM的GC机制
GC优点: 1.提高生产率,不用逐行检查内存是否释放. 2.Java安全策略的一部分,不会使用户错误释放内存而导致JVM崩溃. GC算法基本两点: 1.检测出垃圾对象. 2.回收垃圾对象,释放相应堆空 ...
- Windows下配置PHP
啥也不说了,照着这两篇做,OK 1. windows下apache+php+mysql 环境配置方法 详细出处参考:http://www.jb51.net/article/30128.htm 2.ht ...
- Scraping JavaScript webpages with webkit | WebScraping.com
Scraping JavaScript webpages with webkit | WebScraping.com Scraping JavaScript webpages with webkit ...
- [置顶] JDK-CountDownLatch-实例、源码和模拟实现
Conception A synchronization aid that allows one or more threads to wait until a set of operations b ...