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 EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
js实现文本框选中的方法
May 26 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
小程序开发基础之view视图容器
Aug 21 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
js实现图片实时时钟
Jan 15 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 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 fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
酒店总经理工作职责
2013/12/13 职场文书
幼儿教育感言
2014/02/05 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
软件项目开发计划书
2014/05/01 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
慈善募捐倡议书
2015/04/27 职场文书
教师远程培训心得体会
2016/01/09 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python