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 锁定弹出层实现代码
Feb 23 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
Vue中使用vux的配置详解
May 05 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
php中and 和 &&出坑指南
Jul 13 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 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仿discuz分页效果代码
2008/10/02 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
js控制随机数生成概率代码实例
2019/03/21 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
分分钟入门python语言
2018/03/20 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
客房主管岗位职责
2013/12/09 职场文书
食品安全检查制度
2014/02/03 职场文书
导游个人求职信范文
2014/03/23 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python