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通过Ajax提交表单并返回结果
Jul 31 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
探索node之事件循环的实现
Oct 30 Javascript
Vant picker 多级联动操作
Nov 02 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
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
php简单截取字符串代码示例
2016/10/19 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
javascript 小数取整简单实现方式
2014/05/30 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
JavaScript Split()方法
2015/12/18 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
基于vue实现分页效果
2017/11/06 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
用python实现刷点击率的示例代码
2019/02/21 Python
详解python:time模块用法
2019/03/25 Python
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
大学活动策划书范文
2014/01/10 职场文书
工作违纪检讨书
2014/02/17 职场文书
机关办公室岗位职责
2014/04/16 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
无犯罪记录证明
2014/09/19 职场文书
个人查摆剖析材料
2014/10/16 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
信访维稳承诺书
2015/05/04 职场文书
学习十八大的感悟
2015/08/11 职场文书
机械生产实习心得体会
2016/01/22 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
使用CSS连接数据库的方式
2022/02/28 HTML / CSS