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学习笔记2 函数
Jan 11 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 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程序--记数器
2006/10/09 PHP
php标签云的实现代码
2012/10/10 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
深入浅析JS中的严格模式
2018/06/04 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
Python中的Matplotlib模块入门教程
2015/04/15 Python
Django 实现下载文件功能的示例
2018/03/06 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
玩具公司的创业计划书
2013/12/31 职场文书
新春寄语大全
2014/04/09 职场文书
租房协议书样本
2014/08/20 职场文书
商务邀请函
2015/01/30 职场文书
《开国大典》教学反思
2016/02/16 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL