博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript中this和$(this)之间的区别以及extend的使用
阅读量:6420 次
发布时间:2019-06-23

本文共 2104 字,大约阅读时间需要 7 分钟。

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

你可能感兴趣的文章
站长怎样理性选择虚拟主机
查看>>
linux文件系统\环境变量\帮助文件
查看>>
ioS开发知识(二十二)
查看>>
svn 配置
查看>>
安装saltstack遇到缺包问题!自己遇到的错!若有雷同请海涵
查看>>
数学基础知识03——坐标系变换
查看>>
理解 HashMap 加载因子 loadFactor
查看>>
第三周编程总结
查看>>
发布功能完成
查看>>
用js实现返回上一页
查看>>
因数分解
查看>>
数据结构之队列
查看>>
并发编程(二)
查看>>
[html5]localStorage的原理和HTML5本地存储安全性
查看>>
vc 多行文本框CEdit垂直滚动条定位到最底端
查看>>
basic4android 开发 推送功能
查看>>
centos7安装redis
查看>>
EF 约定介绍
查看>>
web 服务发布注意事项
查看>>
http缓存详解
查看>>