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

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

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

一元流量参数为null_了解JavaScript中null和undefined之间的差异和相似之处
干货技术→JavaScript 乍一看,null和undefined看起来可能相同,但它们远非如此.本文将探讨JavaScript中null和undefined之间的差异和相似之处. 如果你对编程感兴 ...
Jquery中.val()与.value之间的区别
三年多没敲过代码了,今年打算捡起来,是需要多么大的勇气.但是为了实现自我价值,履行自我的承诺,这就是责任.没有什么难不难,晚不晚之说,是我经常对别人说的那样,再晚不过心晚,,一切努力了,实现了每一天的 ...
java引用类型和值类型_[Java教程]JavaScript中值类型和引用类型的区别
[Java教程]JavaScript中值类型和引用类型的区别 0 2017-02-24 00:00:35 JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和 ...
python __import__和import区别_Python中import 与__import__() 之间的区别比较
本篇文章给大家带来的内容是关于Python中import 与__import__() 之间的区别比较,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 首先来说一下两者的区别: impo ...
sql server序列_SQL Server中身份和序列之间的区别
sql server序列 In SQL Server, both the SEQUENCE object and IDENTITY property are used to generate a se ...
Oracle中用户和架构之间的区别？
本文翻译自:Difference between a user and a schema in Oracle? Oracle中的用户和架构有什么区别? #1楼参考:https://stackoom. ...
C＃中Int64和UInt64之间的区别
Int64:此 Struct用于表示64位带符号整数.所述的Int64 可以两种类型的值,包括所述范围之间的负的和正的存储-9,223,372,036,854,775,808至9,223,372,03 ...
-ms-flexbox_Flexbox中width和flex-basis之间的区别
-ms-flexbox by Kyle Gallagher 凯尔·加拉格尔(Kyle Gallagher) Flexbox中width和flex-basis之间的区别 (The difference ...
c# int uint32_C＃中Int32和UInt32之间的区别
c# int uint32 C#Int32和C#UInt32 (C# Int32 and C# UInt32) In C#, Int32 known as a signed integer of 4 ...
如何快速找出找出两个数组中的_找出JavaScript中两个数组之间的差异
LeetCode今天面临的挑战是在数组中查找所有消失的数字. 蛮力我们的输入包括一个缺少数字的实际数组.我们想将该数组与相同长度的数组进行比较,其中没有遗漏的数字.所以如果给定的话[4,3,2,7, ...

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

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

最新文章

热门文章