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自己说 ...
随机推荐
- c++之构造函数学习
#include<stdio.h> class Test { private: int i; int j; int k; public : ...
- IWebBrowser隐藏滚动条
刚才在项目里看到一个IWebBrowser2,竟然需要通过MoveWindow的方式把滚动条遮挡,如果要缩小IWebBrowser2控件的显示大小呢?这种方法至少我用不习惯,起码也得从源头解决这样的问 ...
- Zencart先生成订单后付款，类似淘宝后台修改订单价格
Zencart 使用 Paypal 付款,会出现漏单的情况,即 paypal 已经收到客户的付款,但是网站后台没有客户的订单.导致 paypal 漏单的原因大致会是当客户跳转到Paypal 网站付款完 ...
- Python学习之字符串函数
下面是在看python核心编程中序列字符串中提到的一些函数,根据自己的学习理解总结了下,方便日后用到的时候查看. 1.string.capitalize() 把字符串的第一个字符大写 例子: ...
- 10min系列之二日志可视化进阶
10min系列之二日志可视化进阶(作者原创,同步发布在github) 本文需要有一定的python和前端基础,如果没基础的,请关注我后续的基础教程系列博客 本文所有的demo,都是浏览器下展示的 原创 ...
- python自学笔记（五）python文本操作
一.python自带方法 r:read 读 w:write 写 a:append 尾行追加 先命令行进入python后 >>>d = open('a.txt','w') #在对应路径 ...
- 名叫Florida的女孩问题
近读列纳德·蒙洛迪诺的<醉汉的脚步>,读到第六章,作者举了一个超级变态的例子来解释条件概率或者说是贝叶斯概率. 1.先来看一个简单点的问题:已知所有有2个孩子的家庭,其中一个家庭2个孩子都 ...
- android天气查询（二）之网络json数据的获取
前面一篇文章介绍了如何使用ksoap获取天气信息,但是使用的网络资源受到了限制,所以我们这里会采用第二种方法,可以无限制的获取.http://m.weather.com.cn/data/1010101 ...
- Java集合框架的知识总结
说明:面试准备,写的挺不错的. 转载地址: http://www.cnblogs.com/zhxxcq/archive/2012/03/11/2389611.html 1.综述 所有集合类都位于jav ...
- 为什么每个程序员都应该用Mac OS X？
1.Mac OS X 是基于 Unix 的.这一点太重要了,尤其是对开发人员,至少对于我来说很重要,这意味着Unix 下一堆好用的工具都可以随手捡到.如果你是个 windows 开发人员,我想你会在 ...