在使用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'));显示的结果:
该图红色框勾选出来的是一个object,不用考虑,该object自然是jquery的对象咯。也即是说我们用通过$('#btn')来调用jquery的方法和属性等。
this代表什么?
this,编程的人都知道this表示上下文所处的这个对象,这个自然是不错的,可是这个对象到底是个什么对象呢?加入js里面也有getType的话返回的值会是什么呢?其实js里面不需要使用getType,因为我们有万能的alert.请看看下面的代码:
$('#btn').bind("click",function(){ alert(this); alert($(this)); });
根据我们的经验(因为$()生成的是jquery的对象嘛),this自然是一个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>
返回结果:
可见,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元素则弹出其内容