JQuery this 和 $(this) 的区别


Posted in Javascript onAugust 23, 2009

What is "this"?
In many object-oriented programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked.

$("#textbox").hover( 
function() { 
this.title = "Test"; 
}, 
fucntion() { 
this.title = "OK”; 
} 
);

这里的this其实是一个Html 元素(textbox),textbox有text属性,所以这样写是完全没有什么问题的。
但是如果将this换成$(this)就不是那回事了,Error?报了。
Error Code:
$("#textbox").hover( 
function() { 
$(this).title = "Test"; 
}, 
function() { 
$(this).title = "OK"; 
} 
);

这里的$(this)是一个JQuery对象,而jQuery对象?]有title 属性,因此这样写是错误的。

JQuery拥有attr()方法可以get/set DOM对象的属性,所以正确的写法应该是这样:

正确的代码:

$("#textbox").hover( 
function() { 
$(this).attr('title', ‘Test'); 
}, 
function() { 
$(this).attr('title', ‘OK'); 
} 
);

使用JQuery的好处是它包?了各种浏览器版本对DOM对象的操作,因此统一使用$(this)而不再用this应该是比较不错的选择。
Javascript 相关文章推荐
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
JS清除选择内容的方法
Jan 29 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
JS实现容器模块左右拖动效果
Jan 14 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
ext checkboxgroup 回填数据解决
Aug 21 #Javascript
获取HTML DOM节点元素的方法的总结
Aug 21 #Javascript
自己的js工具 Event封装
Aug 21 #Javascript
自己的js工具 Cookie 封装
Aug 21 #Javascript
自己的js工具_Form 封装
Aug 21 #Javascript
javascript 面向对象编程基础 多态
Aug 21 #Javascript
javascript 面向对象编程基础:继承
Aug 21 #Javascript
You might like
PHP+javascript模拟Matrix画面
2006/10/09 PHP
php模板原理讲解
2013/11/13 PHP
PHP单链表的实现代码
2016/07/05 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
利用javascript查看html源文件
2006/11/08 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
JavaScript闭包的简单应用
2017/09/01 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
python中dir函数用法分析
2015/04/17 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
python高阶爬虫实战分析
2018/07/29 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
Python实现AI换脸功能
2020/04/10 Python
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
学习型家庭事迹材料
2014/12/20 职场文书
学习委员竞选稿
2015/11/20 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
《海上日出》教学反思
2016/02/23 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
详解Python中*args和**kwargs的使用
2022/04/07 Python
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android