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 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
深入理解js中this的用法
May 28 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 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
Zend公司全球首推PHP认证
2006/10/09 PHP
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
删除数组元素实用的PHP数组函数
2008/08/18 PHP
PHP实现微信发红包程序
2015/08/24 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
php实现图片压缩处理
2020/09/09 PHP
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
python获取多线程及子线程的返回值
2017/11/15 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
用python发送微信消息
2020/12/21 Python
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
生产部厂长职位说明书
2014/03/03 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
党员服务承诺书
2014/05/28 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
2015年幼师工作总结
2015/04/28 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
利用Python多线程实现图片下载器
2022/03/25 Python
pt-archiver 主键自增
2022/04/26 MySQL