Jquery中的this与$(this)

news/2024/7/10 23:24:04 标签: jquery, html, object, function, 文档, 编程
htmledit_views">
序言:在使用html" title=jquery>jquery操作js时,经常整不明白this与$(this)。抽空仔细测试了一把,记录下来以供在忘记的时候拉出来参考参考!

$(this)生成的是什么

$()生成的是什么呢?实际上$()=html" title=jquery>jquery(),那么也就是说返回的是一个html" title=jquery>jquery的对象。

题外话:通常我们为了简便直接使用$(),实际上,该函数省略了一个参数context,即$(selector)=$(selector,document).如果指定context,可以指定context为一个dom元素集或者html" title=jquery>jquery对象。

那么依照,$()返回的是html" title=jquery>jquery对象这一结论,我们可以得出$(this)得到的是一个html" title=jquery>jquery对象.我们可以使用万能的alert()方法打印出一个对象:
alert($('#btn'));显示的结果:
test 该图红色框勾选出来的是一个object,不用考虑,该object自然是html" title=jquery>jquery的对象咯。也即是说我们用通过$('#btn')来调用html" title=jquery>jquery的方法和属性等。

 

this代表什么?

this,编程的人都知道this表示上下文所处的这个对象,这个自然是不错的,可是这个对象到底是个什么对象呢?加入js里面也有getType的话返回的值会是什么呢?其实js里面不需要使用getType,因为我们有万能的alert.请看看下面的代码:

$('#btn').bind("click",function(){

alert(this);
alert($(this));

});

根据我们的经验(因为$()生成的是html" title=jquery>jquery的对象嘛),this自然是一个html" title=jquery>jquery的对象咯。可是我们看看返回的结果:
test1返回的是什么?【object HTMLInputElement】——伟大的html对象,嘿嘿。所以我们通常在直接使用this.val()或者直接通过this来调用html" title=jquery>jquery所特有的方法或属性的时候会报错误: mistake  为什么呢?明知故问!html对象当然“不包含属性或方法”了。那么为什么在一个html" title=jquery>jquery对象的上下文中调用this返回的是一个html对象而不是html" title=jquery>jquery对象 呢?翻遍html" title=jquery>jquery的api文档,貌似html" title=jquery>jquery中并未对this这一关键字进行过特殊“处理”,也就是说这里this是js中的,而不是html" title=jquery>jquery重新定义了的。so...当然这仅仅是我自己的想法,如果有对此更了解的朋友可以留言更正。而我们再看一下以上代码中alert($(this));的返回,自然是html" title=jquery>jquery的对象了,在此调用html" title=jquery>jquery特有的方法和属性,完全没有问题。
结论:
this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性,方法
$(this),代表的上下文对象是一个html" title=jquery>jquery的上下文对象,可以调用html" title=jquery>jquery的方法和属性值。

http://www.niftyadmin.cn/n/1732354.html

相关文章

深入理解JS的对象

现在做项目基本是套用框架,不论是网上的前端还是后端框架,也会寻找一些封装好的插件拿来即用,但还是希望拿来时最好自己过后再回过头了解里面的原理,学习里面优秀的东西,不论代码封装性,还是小到命名。 好吧…

setInterval与clearInterval详解

计时计数器经常会用到的两个函数。 首先注意&#xff1a;setInterval与clearInterval都是直属于window对象的。 时间间隔可以通过setInterval命令来创建并用clearInterval命令来终止。 setInterval所用的参数有两种格式&#xff1a; 代码一&#xff1a; <div id"oD…

jquery中each函数的详细用法

each()函数是基本上所有的框架都提供了的一个工具类函数&#xff0c;通过它&#xff0c;你可以遍历对象、数组的属性值并进行处理。jQuery和jQuery对象都实 现了该方法&#xff0c;对于jQuery对象&#xff0c;只是把each方法简单的进行了委托&#xff1a;把jQuery对象作为第一个…

记住 ,!important与#62;

margin-top:0px!important;>margin-top:0px!important;margin-top:16px; 现在IE6和IE7以及FF对盒模型解释大致是一致的&#xff0c;都是盒实际宽度盒内容宽度内补丁值边框宽度。主要差异还是在一些细节上。比如IE6.0的margin双倍问题&#xff0c;这样的话在写CSS或搭建XHTML…

像高手一样编写属于自己的jQuery插件

在编写本文中的插件时&#xff0c;我发现插件的创建过程以及用来创建它的框架非常简单明了。困难的地方在于想一些其他人还没有做过的事情&#xff0c;并编写一些能真正完成某些操作的 JavaScript 代码。由于插件结构简单明了&#xff0c;对于新手它简单易学&#xff0c;对于高…

CSS的position:fixed的使用

接触CSS已有相当长一段时间&#xff0c;我们竟然没有留意position:fixed的用法。 我们都知道CSS中定位属性position的值&#xff0c;除了默认的值外&#xff0c;还有absolute,relative和fixed。我平时比较常用absolute和relative&#xff0c;而position:fixed却没多关注。或许是…

关于jquery ajax加载数据的问题

今天在改博客几个样式的时候&#xff0c;以为很自然的加上js就可以实现了&#xff0c;没想到那个是ajax加载的数据&#xff0c;而非页面首次加载的&#xff0c;比如下面的 “提交评论” 按钮&#xff0c;右侧的 搜索按钮 等。我很自然的写了 文本$("#btn_comment_submit&q…

让IE6也支持position:fixed

众所周知IE6不支持position:fixed&#xff0c;这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天遇到了这个问题。当时就简单的无视了IE6&#xff0c;但是对于大项目或商业网站&#xff0c;如果有用到这个属性的时候&#xff0c;是不可能直接无视的。 如何让p…