jquery里面的$(this)和this的区别
感谢原文作者:何少旭
原文链接:https://www.cnblogs.com/heshaoxu/p/7672736.html
前言
当你用的是jquery时,就用$(this)
,如果是JS,就用this
。
示例
/*JQuery*/
$(this).html( $(this).html() + " BAM! ");
/*JS*/
this.innerHTML();
this.reset();
这个里的html()
是JQUERY方法,用$(this).html()
,当然,JS里也有相似方法innerHTML
,如果用innerHTML
,就要这样写了,这里的reset
是JS方法,所以同上得用this.reset()
。
jquery对象$(this)[0]
等同于JS里的元素this
,这里的this
是一样的,相信你应该看出来了,JS里的元素只要包上$()
就是jquery对象了,而jquery的对象只要加上[0]
或者.get(0)
,就是js元素了。
解释
$(this)是jquery对象,this就是简单指当前元素。jquery对象不能直接指定元素的属性(ele.style),需要get(index)或者直接(index)取得对象中元素才行
JQuery中的 $() 这个符号,实际上这个符号在JQuery中相当于JQuery(),即$(this)=jquery(this);
也就是说,这样可以返回一个jquery对象。那么,当你在网页中alert($('#id'));时,会弹出一个[object Object ],这个object对象,也就是jquery对象了。
那么,我们再回过头来说$(this)
,这个this
是什么呢?假设我们有如下的代码:
$("#desktop a img").each(function(index){
alert($(this));
alert(this);
}
那么,这时候可以看出来:
alert($(this)); //弹出的结果是[object Object ]
alert(this); //弹出来的是[object HTMLImageElement]
jQuery中this
与$(this)
的区别
$("#textbox").hover(
function() {
this.title = "Test";
},
fucntion() {
this.title = "OK”;
}
);
这里的this
其实是一个Html 元素(textbox),textbox有text属性,所以这样写是完全没有什么问题的。
但是如果将this换成$(this)
就不是那回事了,Error–报了。this
与$(this)
的区别在此。
//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里面的$(this)和this的区别的更多相关文章
- jquery html属性和text属性的区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery中的bind() live() delegate()之间区别分析
jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...
- 深入理解jQuery中live与bind方法的区别
本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 ...
- 转载jquery $(document).ready() 与window.onload的区别
jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...
- 深刻了解jQuery对象和普通DOM对象的区别
深刻了解jQuery对象和普通DOM对象的区别.互相转化见Q1 Q1,js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样 ...
- jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别
大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件.虽然$(document).ready 事件在大多数情况下都OK,但是它的解析顺序是在文档准备 ...
- jQuery中attr和prop方法的区别说明
jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check node=123 id=ck & ...
- jQuery过滤选择器:first和:first-child的区别,CSS伪类:first-child
最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...
- jQuery停止动画finish和stop函数区别
stop()函数直接停止动画,finish()也会停止动画同时所有排队的动画的CSS属性跳转到他们的最终值. 示例代码: <html> <head> <meta char ...
- jquery遍历之children()与find()的区别
hildren(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选. .find(selector)方法是返回匹配元 ...
随机推荐
- 详解Kalman Filter
中心思想 现有: 已知上一刻状态,预测下一刻状态的方法,能得到一个"预测值".(当然这个估计值是有误差的) 某种测量方法,可以测量出系统状态的"测量值".(当然 ...
- <学习opencv>绘画和注释
/*=========================================================================*/ // 绘画 和 注释 /*========= ...
- 解决Web开发HTML页面中footer保持在页面底部问题
如图所示如何实现footer在内容不足或者浏览器窗口变大变小的时候一直保持在底部呢?请看如下两种解决方案. 第一种方案: footer高度固定+绝对定位 (兼容性比较好完美兼容IE8+)思路:foot ...
- Java得到当前时间并格式化输出
代码: SimpleDateFormat sdf = new SimpleDateFormat();// 格式化时间 sdf.applyPattern("yyyy-MM-dd HH:mm:s ...
- linux脚本重启java服务
!/bin/bashpid=$(ps -ef | grep zwdatatransfer-1.0.0.jar | grep -v 'grep' | awk '{print $2}')kill -9 $ ...
- 【PowerShell】格式化输出字符串
1 '{0:d4}' -f 10 2 '数字的补零';{} 3 '{0:f4}' -f 10 4 '保留小数位数';{} 5 '{0:p2}' -f 0.4567 6 '转换为百分比';{} 7 '{ ...
- Go语言系列之函数
函数是组织好的.可重复使用的.用于执行指定任务的代码块.本文介绍了Go语言中函数的相关内容. 函数 Go语言中支持函数.匿名函数和闭包,并且函数在Go语言中属于"一等公民". 函数 ...
- Kube-OVN 1.2.0发布,携手社区成员打造高性能容器网络
Kube-OVN 1.2.0 新版本如期而至,支持 Vlan 和 OVS-DPDK 两种类型的高性能网络接口.本次发布得益于社区的壮大,感谢Intel爱尔兰开发团队与锐捷网络开发团队持续积极参与Kub ...
- UVA 156 Ananagrams (STL multimap & set)
原题链接: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=98&p ...
- gopher协议在SSRF漏洞中的作用
1.什么是gopher协议?2.如何使用gopher协议反弹shell?3.在SSRF中如何使用gopher协议反弹shell? 一.什么是gopher协议?定义:Gopher是Internet上一个 ...