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 相关文章推荐
javascript 面向对象编程基础 多态
Aug 21 Javascript
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
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/08/08 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
python实现同时给多个变量赋值的方法
2015/04/30 Python
开源Web应用框架Django图文教程
2017/03/09 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
行政人员工作职责
2013/12/05 职场文书
高中自我评价范文
2014/01/27 职场文书
精神文明建设标语
2014/06/16 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
客户答谢会致辞
2015/01/20 职场文书
放假通知怎么写
2015/08/18 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书