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 获取字符串字节数的多种方法
Jun 02 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 Javascript
JS ES6异步解决方案
Apr 29 Javascript
Vue+Flask实现图片传输功能
Apr 01 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中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
教师通用专业自荐书范文
2014/02/11 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
工程承包协议书
2014/10/20 职场文书
小学班主任自我评价
2015/03/11 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
zabbix监控mysql的实例方法
2021/06/02 MySQL
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技