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语言中的Literal Syntax特性分析
Mar 08 Javascript
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
javascript 常见功能汇总
Jun 11 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
python 拼接文件路径的方法
2018/10/23 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
python实现连续图文识别
2018/12/18 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
什么是URL
2015/12/13 面试题
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
优秀的导游求职信范文
2014/04/06 职场文书
运动会演讲稿300字
2014/08/25 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
先进基层党组织材料
2014/12/25 职场文书
神农溪导游词
2015/02/11 职场文书
团员年度个人总结
2015/02/26 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python