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

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

举个正确的Demo实例:

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

以上的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');
}
);

使用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;}
});

使用方法如下:$.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"} }

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

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

JavaScript中this和$(this)之间的区别以及extend的使用的更多相关文章

  1. JavaScript中object和Object有什么区别

    JavaScript中object和Object有什么区别,为什么用typeof检测对象,返回object,而用instanceof 必须要接Object呢 ————————————————————— ...

  2. JavaScript中const、var和let区别浅析

    在JavaScript中有三种声明变量的方式:var.let.const.下文给大家介绍js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始 ...

  3. JavaScript中值类型和引用类型的区别

    JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和布尔值.此外,JavaScript中还有两个特殊的原始值:null和undefined,它们既不是数字也不 ...

  4. JavaScript中=、==、===以及!=、!==的区别与联系

    JavaScript中=.==.===以及!=.!==的区别与联系   在JavaScript中,“=”代表赋值操作:“==”先转换类型再比较,“===”先判断类型,如果不是同一类型直接为false. ...

  5. [转] C#中out和ref之间的区别

    gskcc 的原文地址 C#中out和ref之间的区别 首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个 ...

  6. javaScript中的querySelector()与querySelectorAll()的区别

    之前,在JavaScript获取文档元素一文中,我曾介绍了获取文档元素的几种方法,最后一种方法是通过选择器获取文档元素.它的核心思想便是利用querySelector()或querySelectorA ...

  7. 深入理解Javascript中构造函数和原型对象的区别

    在 Javascript中prototype属性的详解 这篇文章中,详细介绍了构造函数的缺点以及原型(prototype),原型链(prototype chain),构造函数(constructor) ...

  8. 关于javascript中apply()和call()方法的区别

    如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语 ...

  9. iOS 中 #import同@class之间的区别

    很多刚开始学习iOS开发的同学可能在看别人的代码的时候会发现有部分#import操作写在m文件中,而h文件仅仅使用@class进行声明,不禁纳闷起来,为什么不直接把#import放到h文件中呢? 这是 ...

随机推荐

  1. background-clip 制作文字火焰效果

    1.Background-clip的语法 background-clip: border-box || padding-box || context-box || no-clip || text 2. ...

  2. 【前端】String.prototype.match() 用法详解

    var str="1 plus 2 equal 3" // 正则表达式 console.log(str.match(/\d+/g)); // ["1", &qu ...

  3. Chrome浏览器快捷键大全(新加了其他一些浏览器的独有)

    官方快捷键文档: https://support.google.com/chrome/answer/157179?hl=zh-Hans&ref_topic=14676   浏览器标签页和窗口快 ...

  4. Sqrt(x) - LintCode

    examination questions Implement int sqrt(int x). Compute and return the square root of x. Example sq ...

  5. MSDN for VS2012 的安装

    在VS2012中,由于MSDN默认不内置,VS2008 以上的就没有独立的 MSDN 了 ,而是被 Microsoft Help Viewer 取代了. 该组件包含在 VS2012 的 ISO 安装镜 ...

  6. Trick

    1. var b = a.slice(beginIndex,endIndex); [].slice.call( [] ) Array.prototype.slice.call([]) will cop ...

  7. hdu2296Ring(ac自动机+dp)

    链接 dp[i][j]表示长度为i在节点J的时候的权值最大值,根据trie树转移一下就行,需要每次都取最小的,所以需要另开一数组保存字典序最小的状态. #include <iostream> ...

  8. 关于Dagger 2 的使用方式

    什么是Dagger2 Dagger是为Android和Java平台提供的一个完全静态的,在编译时进行依赖注入的框架,原来是由Square公司维护,现在由Google维护. 我们知道Dagger是一个依 ...

  9. laravel 加中间件的方法 防止直接打开后台

    路由 routes.php Route::group(['middleware' => ['web','admin.login.login']], function () { //后台首页路由 ...

  10. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...