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实战_读书笔记2 选择器
Jan 22 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
js实现五星评价功能
Mar 08 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
JS数组去重详情
Nov 07 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 cout<<的一点看法
2010/01/24 PHP
php无限遍历目录示例
2014/02/21 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
JS 实现Json查询的方法实例
2013/04/12 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
python爬取51job中hr的邮箱
2016/05/14 Python
python 类详解及简单实例
2017/03/24 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
python pandas模块基础学习详解
2019/07/03 Python
python处理大日志文件
2019/07/23 Python
python实现机器人卡牌
2019/10/06 Python
Django学习之文件上传与下载
2019/10/06 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
小学一年级评语大全
2014/04/22 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
篮球赛口号
2014/06/18 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
擅自离岗检讨书
2014/09/12 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
2015年女工委工作总结
2015/07/27 职场文书
高一数学教学反思
2016/02/18 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP