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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
webpack 开发和生产并行设置的方法
Nov 08 Javascript
javascript实现弹出层效果
Dec 10 Javascript
详解JavaScript修改注册表的方法
Jan 05 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python实现查询苹果手机维修进度
2015/03/16 Python
基python实现多线程网页爬虫
2015/09/06 Python
python简单实现AES加密和解密
2019/03/28 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
python中while和for的区别总结
2019/06/28 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
pytorch 求网络模型参数实例
2019/12/30 Python
Python 面向对象部分知识点小结
2020/03/09 Python
python dict如何定义
2020/09/02 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
2015年酒店服务员工作总结
2015/05/18 职场文书
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS