jquery this和$(this)疑问

最新推荐文章于 2024-07-01 19:52:07 发布

hanhan9

最新推荐文章于 2024-07-01 19:52:07 发布

阅读量73

点赞数

分类专栏： jquery

jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

问下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)好像都没问题，为什么?

this是javascript里面原有的this。
$(this)则是返回的jQ对象，jQ对象本身以数组的形式存储着dom对象，如果$()传进去的参数是object就会直接被push到jQ对象里。如果传进去的是字符串，就会用jQ的选择器选择出符合条件的dom对象，然后存到jQ对象里。

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

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

一、
这里的【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对象

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

因为你调用的是.hover方法。
.hover()里面的this已经不是指向jQ了。

.each()
.click()
.hover()
等等等等jQ方法this都是指向所操作的dom对象的。
除了你揪出来的那个 extend是个例外。。。

$.fn.extend实际上起的作用是将函数绑定到对象上执行，
如：

普通的绑定方法：

 
        function  
        demo(a){alert(a);}  
       
        var  
        obj={};  
       
        demo.call(obj);  
       
        obj.demo( 
        "a" 
        ); 
        //alert(a)

Jquery方法：

 
        function  
        demo(a) {  
       
        alert(a);  
       
        }  
       
        $.fn.extend({  
       
        obj:demo 
        //为所有的Jquery对象绑定这个函数  
       
        });

回到上面的例子：

 
        $.fn.extend({  
       
        objOver: 
        function 
        () { 
        //为所有的Jquery对象绑定这个函数  
       
        //这里可以用this其实还是Jquery对象，因为这是Jquery对象上的函数，所以  
       
        //既可以用this又可以用$(this)  
       
        this 
        .hover( 
        function 
        () { 
        //XXX  
       
        $( 
        this 
        ).addClass( 
        "ss" 
        );         
        //YYY 为对象绑定mousein函数,这里使用$(this)是因为addClass是Jquery  //的方法，不是dom自带的方法  
       
        },  
        function 
        () {  
       
        $( 
        this 
        ).removeClass( 
        "ss" 
        );    
        //为对象绑定mouseout函数  
       
        });  
       
        }  
       
        });

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

[/code]

hanhan9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery this和$(this)疑问

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

扫一扫

专栏目录