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文件中呢? 这是 ...
随机推荐
- 升级PHP
wget http://down.wdlinux.cn/in/php_up53.shsh php_up53.sh
- Android项目开发遇到的问题(64K的错误)的解决之路,从入坑到出坑
自己一个android项目,一直以来进展还算顺利,没有遇到什么严重性的问题,今天准备给同事手机上安装一下玩玩,谁知丢人丢大,无法build apk!报错!my god,我开发没问题啊,我手机连上usb ...
- Oracle Form Data Entry Sample
I shared a data entry example form here in this post for Oracle Forms beginner developers, so that t ...
- Hosts文件的使用
hosts文件是什么?在哪里?hosts文件:系统文件,可以记事本打开并编辑.一般用于域名到ip地址的解析.当用户在浏览器中输入网络的域名时,系统首先会自动从hosts文件中找到对应的ip地址,一旦找 ...
- MySQL 5.6 双机热备
目录: 1.说明 2.数据手工同步 3.修改主数据库配置文件 4.修改从数据库配置文件 5.主数据库添加备份用户 6.从数据库设置为Slave 7.验证 1.说明 1)数据库版本要高于5.1 2) ...
- python: 模块发布
一.准备发布 1.为模块文件创建一个文件夹,并将模块文件复制到这个文件中(一般,文件夹的名字和模块的名字一样) 2.在文件夹中创建一个名为『setup.py』的文件,内容如下: #encoding:u ...
- js之oop <三>属性标签
读取属性标签 获取对象属性标签,用 Object.getOwnPropertyDescriptor方法.getOwnPropertyDescriptor(); 参数:属性所在对象(object),属性 ...
- linux共享库
linux共享库 linux中共享库一般以.so.x.y.z 命名,其中x,y,z分别为主版本号.次版本号.发布版本号.同一个库,主版本号不同则相互不兼容:主版本相同,次版本号高的库比次版本号低的库有 ...
- Centos6下rpm安装MySQL5.6
Centos6在rpm安装 rpm -ivh http://dev.mysql.com/get/mysql-community-release-el6-5.noarch.rpm yum install ...
- 前端AJAX传递数组给Springmvc接收处理
前端传递数组后端(Spring)来接收并处理: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...