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 相关文章推荐
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
javaScript中的空值和假值
Dec 18 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 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垃圾回收机制简单说明
2010/07/22 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
php输出xml属性的方法
2015/03/19 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python对excel文档去重及求和的实例
2018/04/18 Python
Python3.4解释器用法简单示例
2019/03/22 Python
Python画图高斯分布的示例
2019/07/10 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
PyTorch中permute的用法详解
2019/12/30 Python
keras中的backend.clip用法
2020/05/22 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
python中添加模块导入路径的方法
2021/02/03 Python
应聘美工求职信
2013/11/07 职场文书
出纳的岗位职责
2013/11/09 职场文书
大学生简单自荐信
2013/11/10 职场文书
会计自荐书
2013/12/02 职场文书
通信生自我鉴定
2014/01/18 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
清明节寄语2015
2015/03/23 职场文书
新郎新娘致辞
2015/07/31 职场文书
大学班长竞选稿
2015/11/20 职场文书