jquery this和$(this)疑问

chan10 2010-10-13 12:15:39

没找到jQuery专区，放在这边吧。

问下jQuery中，this和$(this)的用法。
看了下资料，this是DOM对象，$(this)是被包装成的jQuery对象。
this只能用DOM的Javascript固有的方法，$(this)只能用jQuery的对象。
（这点不知道是不是正确的？？？）
看了jquery.js脚本，发现有很多的this和$(this)的用法。
自己也写了个，有些不明白的地方。
代码如下：



<html>

	<head>

	  <style>

	  	.ss {

	  		color: #000000;

	  		font-size: 14px;

	  		background-color: #f3f3f3;

	  	}

	  </style>

		<script type="text/javascript" src="../jquery.js"></script>

		<script>

			$.fn.extend({

				objOver:function() {

					this.hover(function() { //XXX

						$(this).addClass("ss");		//YYY

					}, function() {

						$(this).removeClass("ss");		

					});

				}

			});

		</script>		

	</head>

	

	<body>

		<p>

			<input type="text" value = "text1" id="test1">

			<input type="button" value="Click2" id="test2">

		</p>

	</body>

</html>



<script>

	$("#test1").objOver();

</script>

上述代码中，this.hover(function() 。。。
1.这个this是$("#test1")这个jQuery对象还是一个DOM对象？
2.如果是DOM对象的话，怎么可以用hover方法？
3.如果是jQuery对象的话，【$(this).addClass("ss");】
这个地方的，this应该和【this.hover(function()】
这个地方的this是同一个对象啊，为什么这个地方必须加$()进行包装呢？
4.【XXX】处，用this和$(this)好像都没问题，为什么?

...全文

1575 32 打赏收藏转发到动态举报

写回复

用AI写文章

32 条回复

切换为时间正序

请发表友善的回复…

发表回复

danielgwan 2012-10-03

打赏
举报

感谢,正好在研究这个问题

k_kid9157 2012-03-02

打赏
举报

学习感谢LZ不停的提问和crazywa耐心的解答

昵称不好起 2011-12-16

打赏
举报

令人纠结的问题，不对令人蛋疼的问题，我也碰到了

haolemei 2011-08-12

打赏
举报

看的不是很明白。。。。

macdonald25 2010-10-16

打赏
举报

mark!每天回帖即可获得10分可用分！

yousite1 2010-10-16

打赏
举报

学习了！

君黑鲩 2010-10-16

打赏
举报

[Quote=引用 24 楼 junheihuan 的回复:]
this是调用该function的对象。
[/Quote]

君黑鲩 2010-10-16

打赏
举报

this是调用该function的对象。

chan10 2010-10-14

打赏
举报

21L的模拟思路蛮好的。
我理解下。
jQuery刚接触，正好碰到这个问题，我就想了下。
毕竟，网上查到的好多都是一笔带过。
谢了。

chl19871024 2010-10-14

打赏
举报

别纠结于 this $(this)

Crazywa 2010-10-14

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
//jQ代码
(function(){
var jQuery = function(s){
return new jQuery.fn.init(s);
}
jQuery.fn = {
init:function(s){
//这里是jq的实际查询方法，不作模拟。
this[0] = s;
},
version:'为了证明我是jQ',
click:function(f){
f.call(this[0]);
return this;
},
extend:function(o){
//这里是简单的模拟的jq的extend方法，当然jq里面的extend要复杂些
for(a in o){
this[a] = o[a];
}
}
}
jQuery.fn.init.prototype = jQuery.fn;
window.$ = jQuery;
})()
//jQ的插件实现机制
$.fn.extend({
hover:function(){
alert('我是hover方法，可以弹出来version:' + this.version);//这里的this是jQ对象，所有有version属性
}
});
//jQ应用
$('这里是选择器').click(function(){
alert('我是click方法。这个时候的this是:' + this);
alert('我是click方法，我没有version属性' + this.version);//这里的this是传进来的字符串，所以不存在version属性，就是undefined
}).hover();

</script>
</head>

<body>
</body>
</html>

Crazywa 2010-10-14

打赏
举报

还在坚持。。
好吧，我简单的模拟下jq的extend方法吧。
如果你真的想搞明白为什么，你需要看
1.Javascript函数劫持，即 .call .apply的应用
2.jQ源码分析
多了我也没法再说了，我不可能在csdn上把整个JQ为你分析了。
下面的例子但愿能帮到你把



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script>

//jQ代码

(function(){

		var jQuery = function(s){

			return new jQuery.fn.init(s);

		}

		jQuery.fn = {

			init:function(s){

				//这里是jq的实际查询方法，不作模拟。

				this[0] = s;

			},

			version:'为了证明我是jQ',

			click:function(f){

				f.call(this[0]);

				return this;

			},

			extend:function(o){

				//这里是简单的模拟的jq的extend方法，当然jq里面的extend要复杂些

				for(a in o){

					this[a] = o[a];

				}

			}

		}

		jQuery.fn.init.prototype = jQuery.fn;

		window.$ = jQuery;

})()

//jQ的插件实现机制

$.fn.extend({

	hover:function(){

		alert('我是hover方法，可以弹出来version:' + this.version);//这里的this是jQ对象，所有有version属性

	}

});

//jQ应用

$('这里是选择器').click(function(){

	alert('我是click方法。这个时候的this是:' +  this);

	alert('我是click方法，我没有version属性' + this.version);//这里的this是传进来的字符串，所以不存在version属性，就是undefined

}).hover();



</script>

</head>



<body>

</body>

</html>

chan10 2010-10-14

打赏
举报

日，红色的效果没显示出来。(:>

chan10 2010-10-14

打赏
举报



<script>

            $.fn.extend({

                objOver:function() {

                    this.hover(function() { //XXX

                        $(this).addClass("ss");        //YYY

                    }, function() {

                        $(this).removeClass("ss");        

                    });

                }

            });

        </script>

从对象的作用域来看，没搞懂【XXX】和【YYY】处的两个this，
为什么不是同一个对象?

chan10 2010-10-13

打赏
举报



$.fn.extend({

                objOver:function() {

                    this.hover(function() { //XXX

                        $(this).addClass("ss");        //YYY

                    }, function() {

                        $(this).removeClass("ss");        

                    });

                }

            });

那上述代码中，【XXX】处的this是jQ对象，
【YYY】处的this，为什么还必须要用$()进行包装呢？
两个this不是同一个对象吗？

Crazywa 2010-10-13

打赏
举报

嗯。
凑字凑字凑字凑字凑字

chan10 2010-10-13

打赏
举报

[Quote=引用 7 楼 crazywa 的回复:]
这里你用的是
extend方法
这个方法会将里面的参数就是你{}里面这些方法、属性都拷贝到jQ对象上。
也就是说，这个时候你的this实际上就是jQ对象了。
如果你用
$('div').each(function(){
this.click(function(){
alert('')
})
})
这个时候this就指向的是单个的div，而不是jQ对象了。
你这只……
[/Quote]
一、
这里的【this.click(function(){...】,
这个this指的是DOM对象，而不是jQ对象？

而



$.fn.extend({

                objOver:function() {

                    this.hover(function() { //XXX

                        $(this).addClass("ss");        //YYY

                    }, function() {

                        $(this).removeClass("ss");        

                    });

                }

            });

这里【this.hover(function() {...】
这个this是jQ对象？

是这么理解吗？

Crazywa 2010-10-13

打赏
举报

这里你用的是
extend方法
这个方法会将里面的参数就是你{}里面这些方法、属性都拷贝到jQ对象上。
也就是说，这个时候你的this实际上就是jQ对象了。
如果你用
$('div').each(function(){
this.click(function(){
alert('')
})
})
这个时候this就指向的是单个的div，而不是jQ对象了。
你这只是恰巧this指向了jQ对象，你就觉得两个通用了。

chan10 2010-10-13

打赏
举报

[Quote=引用 5 楼 crazywa 的回复:]
this是javascript里面原有的this。
$(this)则是返回的jQ对象，jQ对象本身以数组的形式存储着dom对象，如果$()传进去的参数是object就会直接被push到jQ对象里。如果传进去的是字符串，就会用jQ的选择器选择出符合条件的dom对象，然后存到jQ对象里。
[/Quote]
说的我也了解部分，但是能不能针对提出的几个问题点，回答下呢？

Crazywa 2010-10-13