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数组组合成字符串的脚本
Jan 06 Javascript
JavaScript实现动态增加文件域表单
Feb 12 Javascript
js确定对象类型方法
Mar 30 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 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中preg_replace_callback函数简单用法示例
2016/07/21 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
python制作小说爬虫实录
2017/08/14 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
python求质数列表的例子
2019/11/24 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
程序员机试试题汇总
2012/03/07 面试题
超市后勤自我鉴定
2014/01/17 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
承诺书范本
2015/01/21 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
MySQL一些常用高级SQL语句
2021/07/03 MySQL