JavaScript中this和$(this)之间的区别以及extend的使用

最新推荐文章于 2023-06-26 10:43:42 发布

weixin_34168700

最新推荐文章于 2023-06-26 10:43:42 发布

阅读量155

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chengbing2011/p/4098337.html

本文详细解释了jQuery中this和$(this)之间的关键区别，通过实例演示了两者在操作DOM元素时的不同应用，并介绍了jQuery的命名空间$.fn、jQuery的扩展方法以及如何利用jQuery.fn.extend()和jQuery.extend()进行对象扩展。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery中this和$(this)之间的区别：

this返回的是当前对象的html对象，而$(this)返回的是当前对象的jQuery对象

举个正确的Demo实例：

$("#textbox").hover(
    function() {
        this.title = "Test";
    },         
    fucntion() {             
        this.title = "OK”;         
    }   
 );

View Code

以上的this为html元素即元素textbox，该元素有title属性，因此以上的程序没有错误。如果将以上的程序中this替换成$(this)时，该程序就会报错，因为$(this)返回的是一个jQuery对象，而jQuery对象是没有title这些属性的，而$(this)中有方法可以对html元素中title属性进行设置和修改。代码如下：

 $("#textbox").hover(
         function() {
            $(this).attr('title', 'Test');
         },         
        fucntion() {             
            $(this).attr('title', 'OK');         
        }   
 );

View Code

使用jQuery的好处是它包裝了各种浏览器版本对DOM对象的操作，因此统一使用$(this)而不再用this应该是比较不错的选择。

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。如扩展$.fn.test(),即$.fn.test()是对jquery扩展了一个test方法,那么后面你的每一个jquery实例都可以引用这个方法了。

jQuery为开发插件提拱了两个方法，分别是：jQuery.extend(object)：为扩展jQuery类本身.为类添加新的方法和jQuery.fn.extend(object)：给jQuery对象添加方法。

也就是说jQuery.extend(object)相当于扩展静态的方法，而jQuery.fn.extend(object)相当于扩展非静态的成员方法。

jQuery.extend(object)Demo实例代码如下：

$.extend({ 
　　add:function(a,b){returna+b;} 
});

View Code

使用方法如下：$.add(3,4); //return 7

jQuery.extend()方法也可以用作合并对象，在合并对象时，第一个参数代表是否需要深合并。使用的原型为：jQuery.extend(bool,destObj,sourceObj)

jQuery.extend(bool,destObj,sourceObj1,sourceObj2,...)Demo实例代码如下：

var destObj={ 
    name: "destname", 
    location: {
        city: "destcicty",
        county:"destcountry"
    } 
};

var sourceObj={ 
    name: "sourcename1", 
    location: {
        city: "soucecity1",
        county:"sourcecountry1"
    } 
};

var sourceObj2={ 
    name: "sourcename2", 
    location: {
        city: "soucecity2",
        county:"sourcecountry2"
    } 
};

var result=$.extend(true,destObj,sourceObj1,sourceObj2);        //result=var sourceObj={ name: "sourcename2", location: {city: "soucecity2",county:"sourcecountry2"} }

View Code

jQuery.fn.extend(object)是对jQuery.prototype进得扩展，jQuery类的实例可以使用这个“成员函数”。 Demo实例代码如下：

$.fn.extend({ 
    alertWhileClick: function(){ 
        $(this).click(function(){ 
            alert($(this).val()); 
        }); 
    } 
});

View Code

转载于:https://www.cnblogs.com/chengbing2011/p/4098337.html