jquery中this的使用说明


Posted in Javascript onSeptember 06, 2010

原来js中的this这么好用

$(document).ready(function(){ 
var DragElement=null; 

$("#zz").mousedown(function(){ 

DragElement=this;//这时this指的就是$("#zz")对象 

$(document).mousemove(function(){ 

如果直接$(this).css("left")//由于是在mousemove内,这样this对象就不是$("#zz"), 

这时可以用$(DragElement).css("left")//这样取的就是$("#zz") 
}) 
}) 
})

$(this)生成的是什么

$()生成的是什么呢?实际上$()=jquery(),那么也就是说返回的是一个jquery的对象。
题外话:通常我们为了简便直接使用$(),实际上,该函数省略了一个参数context,即$(selector)=$(selector,document).如果指定context,可以指定context为一个dom元素集或者jquery对象。

那么依照,$()返回的是jquery对象这一结论,我们可以得出$(this)得到的是一个jquery对象.我们可以使用万能的alert()方法打印出一个对象:
alert($('#btn'));
显示的结果:
jquery中this的使用说明
该图红色框勾选出来的是一个object,不用考虑,该object自然是jquery的对象咯。也即是说我们用通过$('#btn')来调用jquery的方法和属性等。

this代表什么?

this,编程的人都知道this表示上下文所处的这个对象,这个自然是不错的,可是这个对象到底是个什么对象呢?加入js里面也有getType的话返回的值会是什么呢?其实js里面不需要使用getType,因为我们有万能的alert.请看看下面的代码:

$('#btn').bind("click",function(){ alert(this); 
alert($(this)); 
});

根据我们的经验(因为$()生成的是jquery的对象嘛),this自然是一个jquery的对象咯。可是我们看看返回的结果:
jquery中this的使用说明

返回的是什么?【object HTMLInputElement】——伟大的html对象,嘿嘿。所以我们通常在直接使用this.val()或者直接通过this来调用jquery所特有的方法或属性的时候会报错误: 为什么呢?明知故问!html对象当然“不包含属性或方法”了。那么为什么在一个jquery对象的上下文中调用this返回的是一个html对象而不是jquery对象 呢?翻遍jquery的api文档,貌似jquery中并未对this这一关键字进行过特殊“处理”,也就是说这里this是js中的,而不是jquery重新定义了的。so...当然这仅仅是我自己的想法,如果有对此更了解的朋友可以留言更正。而我们再看一下以上代码中alert($(this));的返回,自然是jquery的对象了,在此调用jquery特有的方法和属性,完全没有问题。

结论:

this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性,方法
$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值。

Javascript 相关文章推荐
页面中js执行顺序
Nov 09 Javascript
Jquery插件 easyUI属性汇总
Jan 19 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
快速使用node.js进行web开发详解
Apr 26 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
firefox下frameset取不到值的解决方法
Sep 06 #Javascript
js过滤数组重复元素的方法
Sep 05 #Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 #Javascript
JavaScrip单线程引擎工作原理分析
Sep 04 #Javascript
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 #Javascript
判断浏览器的javascript版本的代码
Sep 03 #Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 #Javascript
You might like
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
Angular2库初探
2017/03/01 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
Python 爬虫多线程详解及实例代码
2016/10/08 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
企业指导教师评语
2014/04/28 职场文书
纪检监察建议书
2014/05/19 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
整改报告格式
2014/11/06 职场文书
兵马俑导游词
2015/02/02 职场文书
法务专员岗位职责
2015/02/14 职场文书
喋血孤城观后感
2015/06/08 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
MySQL优化及索引解析
2022/03/17 MySQL
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android