现在的位置: 网页制作教程网站制作经验 >正文
jquery相关教程

jquery中$(this)和this各是什么意思?

发表于2014/6/10 网站制作经验 0条评论 ⁄ 热度 4,716℃

在使用jQuery的时候,经常会遇到$(this)和this的写法,那么jquery中$(this)和this各是什么意思?他们之间的区别是什么?现在我们就分步解析。

jquery中$(this)的this是什么意思?

如果你学过面向对象语言的话,例如JAVA,你应该明白这个this在JAVA里的意思,简单的说,谁在调用它,它就代表文谁。

那么,用到这个jquery里,也算是蛮简单的.举两个例子,一个是单个对象,一个是li元素集合。

例1:单个对象

$("#btnConfirm").click(function(){
alert($(this).val());     
//this代表的其实就是这个ID为btnConfirm的按钮,因为你现在点击的是ID为btnConfirm的按钮,那么this就是它
});

例2:li元素集合

$("ul li").each(function(){
     alert(  $(this).text()); 
//这里的this代表的是迭代的每个li元素,因为每次迭代,得到的都是一个<li>元素,那么这个时候this 就代表着这个当前的<li>元素
     })

高级解析:jquery中$(this)和this各是什么意思?区别是什么?

经常整不明白this与$(this)的童鞋继续往下看。

$(this)生成的是什么?

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

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

那么依照,$()返回的是jquery对象这一结论,我们可以得出$(this)得到的是一个jquery对象.我们可以使用万能的alert()方法打印出一个对象: alert($('#btn'));显示的结果:

jquery对象显示结果

该图红色框勾选出来的是一个object,不用考虑,该object自然是jquery的对象咯。也即是说我们用通过$('#btn')来调用jquery的方法和属性等。

this代表什么?

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

$('#btn').bind("click",function(){ 
   alert(this); 
   alert($(this)); 
}); 

根据我们的经验(因为$()生成的是jquery的对象嘛),this自然是一个jquery的对象咯。可是我们看看返回的结果:

jquery返回结果对象不支持此属性或方法

返回结果配图

返回的是什么?【object HTMLInputElement】——伟大的html对象。所以我们通常在直接使用this.val()或者直接通过this来调用jquery所特有的方法或属性的时候会报错误:为什么呢?html对象当然"不包含属性或方法"了。我们再看一下以上代码中alert($(this));的返回,自然是jquery的对象了,在此调用jquery特有的方法和属性,完全没有问题。

现在我们再用一个实例讲解jQuery中this与$(this)的区别。

我们先看下面两端代码

代码一:

 $("img").each(function(i){
    this.src="img/slide-"+i+".jpg";
  });

代码二:

$("div").each(function(){
  this.toggleClass("box");
  });

我们会发现直接通过this来调用jquery所特有的方法或属性的时候会报错误:对象不支持此属性或方法。代码一运行正常,代码二运行报错。

于是用下面直接返回this和$(this)的方式测试了一下。

<script   type="text/javascript">
  $("#btn").bind("click",function(){
  alert(this);
  alert($(this));
  });
  </script>

返回结果:

alert(this)返回结果alert($(this))返回结果

可见,this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性,方法。$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值。

由此可见,上面代码一.src本身就是html对象,所以可以写成this.src,代码二.toggleClass是jQuery对象,所以写成this.toggleClass肯定会报错了,$(this).toggleClass才是正确的写法。

结论:

this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性,方法。

$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值。

jquery扩展阅读

由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。

如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。

对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个<div>元素的内容。有如下两种方法:

$("div").eq(2).html();              //调用jquery对象的方法
$("div").get(2).innerHTML;       //调用dom的方法属性

对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。

包括两种形式:

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f']}) 
//为索引分别为0,1,2的p元素分别设定不同的字体颜色。
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]}) 
//实现表格的隔行换色效果
$("p").click(function(){.html())}) 
//为每个p元素增加了click事件,单击某个p元素则弹出其内容
  • 暂无评论