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 相关文章推荐
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
详解JavaScript函数
Dec 01 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
angular组件间传值测试的方法详解
May 07 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
原生JS实现记忆翻牌游戏
Jul 31 Javascript
Openlayers实现距离面积测量
Sep 28 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
多数据表共用一个页的新闻发布
2006/10/09 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
js控制input输入字符解析
2013/12/27 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
探究Python中isalnum()方法的使用
2015/05/18 Python
python实现rsa加密实例详解
2017/07/19 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
如何执行一个shell程序
2012/11/23 面试题
银行实习自我鉴定
2013/10/12 职场文书
计算机操作自荐信
2013/12/07 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
食品安全工作方案
2014/05/07 职场文书
合作协议书格式范本
2016/03/21 职场文书
JavaCV实现照片马赛克效果
2022/01/22 Java/Android
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL