jQuery中$(this)与this的区别
经常在写jQuery的时候分不清this 和 $(this),为了方便起见尽量不用this,只用$(this)。但是今天在别人的代码的基础上改一些东西,又遇到了这个this,不得不把它弄明白。
$(this)相当于jQuery(this),是一个jQuery对象,只能使用jQuery的属性和方法;而this中存放的是DOM元素,属于javascirpt中的DOM元素对象,要使用DOM元素对象的属性和方法。
例如下面的写法是正确的:
this.setAttribute('class','test');
如果写成下面这样,就会报错:
$(this).setAttribute('class','test');
报错说undefined,也就是所$(this)没有被定义。因为setAttribute是DOM对象的方法,而不是jQuery对象的方法。同样,反过来使用也会报错。例如:
this.attr('class','test');
因为attr是jQuery设置属性值的方法,不能用在DOM元素对象上面,因此这样写会报错。这个时候应该用$(this):
$(this).attr('class','test');
其实可以通过alert查看$(this)与this的不同,alert($(this));弹出的结果是[object Object ],alert(this);弹出来的是[object HTMLImageElement]。这里的Object指的就是jQuery对象,HTMLImageElement 指的是html元素对象。
$(this)与this的区别本质上是javascript对象与jQuery对象的区别。当然jQuery对象也可以转化为javascript对象。
$(this)[]==this;
即这种jQuery对象可以通过加下标为0方式转化成javascript对象,相当于$(this).get(0) == this;用这种get(0)的方式获取到对象的DOM对象然后就可以使用相应的DOM方法。
jQuery中$(this)与this的区别的更多相关文章
- JQuery对象与DOM对象的区别与转换
1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj ...
- 【jQuery】【转】jQuery中的trigger和triggerHandler区别
trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...
- jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )
jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...
- JQuery中的html(),text(),val()区别
jQuery中.html()用为读取和修改元素的HTML标签,.text()用来读取或修改元素的纯文本内容,.val()用来读取或修改表单元素的value值. 1.HTML html():取得第一个匹 ...
- jQuery中.attr()和.prop()的区别
之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...
- jquery中attr和prop的区别(转)
在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...
- Jquery中的 height(), innerHeight() outerHeight()区别
jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...
- JQuery之append和appendTo的区别,还有js中的appendChild用法
JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...
- jQuery学习-----(二)JQuery对象与DOM对象的区别与转换
1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj = ...
- 基于jquery中children()与find()的区别介绍
本篇文章介绍了,基于jquery中children()与find()的区别,需要的朋友参考下 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选 ...
随机推荐
- 严重: Exception sending context initialized event to listener instance of class org.springframework.web.context.ContextLoaderListener
十月 30, 2019 11:12:35 下午 org.apache.catalina.core.StandardContext listenerStart 严重: Exception sending ...
- [React] Use CSS Transitions to Avoid a Flash of Loading State
Based on research at Facebook, we know that if a user sees a flash of loading state, they perceive t ...
- (尚032)Vue_案例_消息订阅与发布(组件订阅与发布(PubSubJS库))
组件订阅与发布(PubSubJS库) npm info pubsub-js 安装库 npm install --save pubsub -js ============================ ...
- [Zjoi2006]三色二叉树(bzoj1864)(洛谷2585)题解
原题地址:https://www.luogu.org/problemnew/show/P2585 题目大意:可以把一个节点染成三种颜色,父节点和两个子节点(可以有一个)颜色不能相同.求最多(少)能有多 ...
- 洛谷 P1097 【统计数字】 题解
题目背景 警告:数据可能存在加强 题目描述 某次科研调查时得到了nn个自然数,每个数均不超过1500000000(^)( ).已知不相同的数不超过1000010000个,现在需要统计这些自然数各自出现 ...
- luogu P1725 琪露诺
二次联通门 : luogu P1725 琪露诺 /* luogu P1725 琪露诺 DP + 线段树 用线段树维护dp[i - R] ~ dp[i - L]的最大值 然后 转移方程是 dp[i] = ...
- CSS样式的引入方式
test.css div{ color:yellow; } 在html中引入 <link href="test.css" type="text/css" ...
- 避免MySQL出现重复数据处理方法
对于常规的MySQL数据表中可能存在重复的数据,有些情况是允许重复数据的存在,有些情况是不允许的,这个时候我们就需要查找并删除这些重复数据,以下是具体的处理方法! 方法一:防止表中出现重复数据 当表中 ...
- TypeError: BlobBuilder is not a constructor
var BlobBuilder = window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window. ...
- PowerDesigner应用01 逆向工程之配置数据源并导出PDM文件
物理数据模型(Physical Data Model)PDM,提供了系统初始设计所需要的基础元素,以及相关元素之间的关系:数据库的物理设计阶段必须在此基础上进行详细的后台设计,包括数据库的存储过程.操 ...