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 相关文章推荐
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 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
PHP音乐采集(部分代码)
2007/02/14 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
php浏览历史记录的方法
2015/03/10 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
PDO::exec讲解
2019/01/28 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
Position属性之relative用法
2015/12/14 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
浅析Ajax语法
2016/12/05 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
python 实现逻辑回归
2020/12/30 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
应届大学生自荐信
2013/12/05 职场文书
家长会邀请书
2014/01/25 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
教师个人自我评价范文
2014/04/13 职场文书
英语专业自荐书
2014/06/13 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
银行奉献演讲稿
2014/09/16 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
教师年终个人总结
2015/02/11 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
python如何在word中存储本地图片
2021/04/07 Python