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自己说 ...
随机推荐
- Linux新手笔记 sudo
centos 6.4 32bit 你是也像我一样,厌烦了在root用户和个人用户之间来回切换.或者干脆直接用root用户.可以这样设置,然后在命令前加sudo 即可使用自己到密码,临时用root身份执 ...
- oracle 计算两个时间之间的月份差，相差几个星期，相差多少天
相差多少天: sysdate-to_date('1991-01-01','YYYY-MM-DD'))<7 and (sysdate-to_date('1991=01=01','YYYY-MM ...
- ExtJs006类别名、备用名
Ext.onReady(function () { //Ext.define 其他配置项 //别名.备用名 Ext.define("User", { config: { name: ...
- UVA1471（ LIS变形）
这是LIS的变形,题意是求一个序列中去掉某个连续的序列后,能得到的最长连续递增序列的长度. 用DP的解法是:吧这个序列用数组a来记录,再分别用两个数组f记录以i结尾的最长连续递增序列的长度,g[i]记 ...
- Queue(队列)
队列是一种后进后出的数据结构,下面介绍一下队列中常见的函数: 一.queue 中的 empty 函数 queue<int> q ; q.empty() ; // 若队列中无元素,返回tr ...
- OpenGL: 环境配置和图元的绘制
前言 距离上一篇博客已经过去一个半月了,这段时间过得确实充实,虽然一大段时间泡在图书馆复习,但至少也能学到点东西.跨年晚和元旦一整天,全身心投入图形学小课设的编程,终于实现了老师要求的所有功能,回想起 ...
- 运用DIV拖拽实现resize和碰撞检测
运用DIV拖拽实现resize和碰撞检测 Div由拖拽改变大小 演示demo 当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式 用鼠标拖动右下 ...
- maven安装scala插件
默认情况maven不支持scala 所以需要安装maven-scala插件 更新地址:http://alchim31.free.fr/m2e-scala/update-site/ (m2eclipse ...
- .NET study collection links
Parameter Binding in ASP.NET Web API http://www.asp.net/web-api/overview/formats-and-model-binding/p ...
- 1_HelloWorld
学iOS开发与学Swift是两件事情,Swift只是一种语言,它有官方手册,里面包含了全部的语法.对其他任何一门语言很熟悉的人,学习Swift可能只需要几天的时间.而这之后,学习iOS开发才是难点,有 ...