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 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
编写兼容IE和FireFox的脚本
May 18 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
javascript简单链式调用案例分析
May 10 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
详解js静态检查工具eslint配置文件
Nov 23 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
加强版phplib的DB类
2008/03/31 PHP
php生成随机数或者字符串的代码
2008/09/05 PHP
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
浅谈node模块与npm包管理工具
2018/01/03 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
入党积极分子自我鉴定
2014/02/18 职场文书
师范生自我鉴定
2014/03/20 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
大学生逃课检讨书
2015/05/04 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python