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 相关文章推荐
nicejforms——美化表单不用愁
Feb 20 Javascript
在textarea中屏蔽js的某个function的javascript代码
Apr 20 Javascript
extjs 为某个事件设置拦截器
Jan 15 Javascript
jQuery 表格插件整理
Apr 27 Javascript
简单的代码实现jquery定时器
Nov 17 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 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获取字段名示例分享
2014/03/03 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
高中生的学习总结自我鉴定
2013/10/26 职场文书
小学班主任评语大全
2014/04/23 职场文书
团支部推优材料
2014/05/21 职场文书
财产分割协议书
2016/03/22 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
python中的None与NULL用法说明
2021/05/25 Python
PHP 时间处理类Carbon
2022/05/20 PHP
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle