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自己说 ...
随机推荐
- sql update left join 更新，字段内容分隔符提取
UPDATE a SET [Province] = parsename(replace([FullName],'-','.'),2) from [dbo].[T_B_Emp] a left join ...
- des 加密 iOS
转载请注明原文出处 生成同名的Des.h文件和Des.m文件后,拷贝下方的代码可直接使用.注意在Des.m文件中将key值修改为项目所需的key.---> #define DesKey 过程很 ...
- webservice实例
前言:朋友们开始以下教程前,请先看第五大点的注意事项,以避免不必要的重复操作. 本文引自:http://www.iteye.com/topic/1135747 一.准备工作(以下为本实例使用工具) 1 ...
- UVa1585 Score
#include <stdio.h> int main(){ int T, O, score; char str[81], *p; scanf("%d" ...
- POJ 1840 Brainman（逆序对数）
题目链接:http://poj.org/problem?id=1804 题意:给定一个序列a[],每次只允许交换相邻两个数,最少要交换多少次才能把它变成非递降序列. 思路:题目就是要求逆序对数,我们知 ...
- [置顶] WebService调用工具（AXIS2）
package com.metarnet.util; import java.lang.reflect.InvocationHandler; import java.lang.reflect.Meth ...
- JQuery 限制文本框只能输入数字和小数点
$(function(){ /*JQuery 限制文本框只能输入数字*/ $(".NumText").keyup(function(){ $(this).val($(this).v ...
- Android手机安全软件的恶意程序检测靠谱吗--LBE安全大师、腾讯手机管家、360手机卫士恶意软件检测方法研究
转载请注明出处,谢谢. Android系统开放,各大论坛活跃,应用程序分发渠道广泛,这也就为恶意软件的传播提供了良好的环境.好在手机上安装了安全软件,是否能有效的检测出恶意软件呢?下边针对LBE安全大 ...
- 让程序只运行一个实例(Delphi篇)（三种方法，其中使用全局原子的方法比较有意思）
Windows 下一个典型的特征就是多任务,我们可以同时打开多个窗口进行操作,也可以同时运行程序的多个实例,比如可以打开许多个资源管理器进行文件的移动复制操作.但有时出于某种考虑(比如安全性),我们要 ...
- [置顶] P2P网贷对推动社会发展的影响
P2P网贷对推动社会发展的影响 1 真正的支持了实体经济,一般借款人就在几万或者50万以下 2 关照小微经济,新型行业.一般小微经济的创新更高,对社会的发展最大化. 3盘活存量 放到银行.保险.国债一 ...