JavaScript中this和$(this)之间的区别以及extend的使用
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的使用的更多相关文章
- JavaScript中object和Object有什么区别
JavaScript中object和Object有什么区别,为什么用typeof检测对象,返回object,而用instanceof 必须要接Object呢 ————————————————————— ...
- JavaScript中const、var和let区别浅析
在JavaScript中有三种声明变量的方式:var.let.const.下文给大家介绍js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始 ...
- JavaScript中值类型和引用类型的区别
JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和布尔值.此外,JavaScript中还有两个特殊的原始值:null和undefined,它们既不是数字也不 ...
- JavaScript中=、==、===以及!=、!==的区别与联系
JavaScript中=.==.===以及!=.!==的区别与联系 在JavaScript中,“=”代表赋值操作:“==”先转换类型再比较,“===”先判断类型,如果不是同一类型直接为false. ...
- [转] C#中out和ref之间的区别
gskcc 的原文地址 C#中out和ref之间的区别 首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个 ...
- javaScript中的querySelector()与querySelectorAll()的区别
之前,在JavaScript获取文档元素一文中,我曾介绍了获取文档元素的几种方法,最后一种方法是通过选择器获取文档元素.它的核心思想便是利用querySelector()或querySelectorA ...
- 深入理解Javascript中构造函数和原型对象的区别
在 Javascript中prototype属性的详解 这篇文章中,详细介绍了构造函数的缺点以及原型(prototype),原型链(prototype chain),构造函数(constructor) ...
- 关于javascript中apply()和call()方法的区别
如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语 ...
- iOS 中 #import同@class之间的区别
很多刚开始学习iOS开发的同学可能在看别人的代码的时候会发现有部分#import操作写在m文件中,而h文件仅仅使用@class进行声明,不禁纳闷起来,为什么不直接把#import放到h文件中呢? 这是 ...
随机推荐
- background-clip 制作文字火焰效果
1.Background-clip的语法 background-clip: border-box || padding-box || context-box || no-clip || text 2. ...
- 【前端】String.prototype.match() 用法详解
var str="1 plus 2 equal 3" // 正则表达式 console.log(str.match(/\d+/g)); // ["1", &qu ...
- Chrome浏览器快捷键大全(新加了其他一些浏览器的独有)
官方快捷键文档: https://support.google.com/chrome/answer/157179?hl=zh-Hans&ref_topic=14676 浏览器标签页和窗口快 ...
- Sqrt(x) - LintCode
examination questions Implement int sqrt(int x). Compute and return the square root of x. Example sq ...
- MSDN for VS2012 的安装
在VS2012中,由于MSDN默认不内置,VS2008 以上的就没有独立的 MSDN 了 ,而是被 Microsoft Help Viewer 取代了. 该组件包含在 VS2012 的 ISO 安装镜 ...
- Trick
1. var b = a.slice(beginIndex,endIndex); [].slice.call( [] ) Array.prototype.slice.call([]) will cop ...
- hdu2296Ring(ac自动机+dp)
链接 dp[i][j]表示长度为i在节点J的时候的权值最大值,根据trie树转移一下就行,需要每次都取最小的,所以需要另开一数组保存字典序最小的状态. #include <iostream> ...
- 关于Dagger 2 的使用方式
什么是Dagger2 Dagger是为Android和Java平台提供的一个完全静态的,在编译时进行依赖注入的框架,原来是由Square公司维护,现在由Google维护. 我们知道Dagger是一个依 ...
- laravel 加中间件的方法 防止直接打开后台
路由 routes.php Route::group(['middleware' => ['web','admin.login.login']], function () { //后台首页路由 ...
- 深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...