【学习笔记】jQuery库扩展
来源:互联网 发布:黑白棋估值函数优化 编辑:程序博客网 时间:2024/06/08 10:13
jQuery库中有可以进行实力扩展也可以进行对象属性的扩展,所以在对jQuery进行扩展时,要注意是扩展类的属性还是实例的属性。(下面的jQuery均可以利用$进行替代)
在进行扩展前先介绍下jQuery中对对象进行扩展的方法jQuery.extend,
jQuery.extend([deep], target, object1, [objectN])
(1)当其中只有一个参数时表示的是对jQuery类的扩展,即在类上添加行的属性和方法
$.extend({ test:function(){alert('test函数')}})//可以通过$.test的方式进行调用
(2)当其中的参数包含多个对象时,表示的是将多个对象进行合并到第一个对象中,同时返回第一个对象(修改后)。如果想要返回的一个新的对象而不影响参数,则设置第一个参数为{},jQuery.extend({},obj1,obj2….)
var Css1={size: "10px",style: "oblique"}var Css2={size: "12px",style: "oblique",weight: "bolder"} jQuery.extend(Css1,Css2) //Css1 = {size: "12px",style: "oblique",weight: "bolder"}
(3)上面的方法是属于浅拷贝,既不会对对象中的成员对象进行扩展拷贝,如果对象属性中有引用类型的数据,则会导致直接以引用进行赋值,则可能导致对象间的香相互影响,如果想要实现深拷贝,则可以设置第一个参数为true进行
先看浅拷贝
jQuery.extend( { name: “John”, location: { city: “Boston” } }, { last: “Resig”, location: { state: “MA” } } ); //结果:{ name: “John”, last: “Resig”, location: { state: “MA” } }
深拷贝
jQuery.extend( true, { name: “John”, location: { city: “Boston” } }, { last: “Resig”, location: { state: “MA” } } ); //结果:{ name: “John”, last: “Resig”, location: { city: “Boston”, state: “MA” } }
jQuery.fn.extend只能对实例进行扩展而不能对普通的对象实现上面的功能。
一、给jQuery添加类方法(均要通过类名进行调用)
(1)直接在类名上添加
jQuery.add = function (a,b){ return a + b;}
(2)利用$.extend方式进行扩展(即给extend传递一个对象参数即是对jQuery的扩展)
jQuery.extend({ add:function (a,b) { return a+b; }, sub:function (a,b) { return a-b; }})
(3)利用命名空间
jQuery.plugins = { function add(a,b){ return a + b }, function sub(a,b) { return a-b; }}//利用jQuery.plugins.add的方式进行调用
二、实例属性进行扩展(其实是利用了原型继承,利用实例进行调用)
(1)直接对原型链进行扩展
jQuery.fn.add = function (a,b) { return a+b;}//调用方式 $("a").add(1,2)
(2)利用jquery.fn.extend
jQuery.fn.extend({ add:function (a,b) { return a+b; }, sub:function (a,b) { return a-b; }})
上面的参数可以通过$.extend的方式进行扩展而不用写死
jQuery.fn.attr =function (options) { var default = {a:1,b:2}; opt = $.extend({},options,default); /*在做一些逻辑操作*/}
jQuery本身就是利用闭包的方式在window对象上进行扩展添加一个全局的对象,对jQuery进行扩展时可以考虑想同类似的方式。
同时通常对实例方法进行扩展的时候都会利用闭包的形式进行扩展,防止变量之间的相互污染
(function ($) { var default = {}, $.fn.ownFun = function (options) { /*参数处理*/ options = $.extend({},options,default); /*逻辑处理*/ }})(jQuery)
- 【学习笔记】jQuery库扩展
- 学习笔记-jQuery扩展示例
- jQuery源码学习笔记:扩展工具函数
- [笔记]扩展jQuery
- jQuery Mobile学习笔记(十)——扩展框架
- jQuery Mobile学习笔记(十)——扩展框架
- Jquery 扩展学习
- [笔记]扩展jQuery之示例
- 学习笔记----扩展欧几里德
- Java程序员的JavaScript学习笔记(10—— jQuery-在“类”层面扩展)
- Java程序员的JavaScript学习笔记(11——jQuery-在“对象”层面扩展)
- Java程序员的JavaScript学习笔记(12——jQuery-扩展选择器)
- Java程序员的JavaScript学习笔记(14——扩展jQuery UI)
- 使用jquery.qrcode.js扩展配置笔记
- 【学习笔记】JQuery学习笔记
- jQuery 学习笔记 + jQuery-UI 学习笔记
- 扩展方法学习笔记[原]
- 扩展GCD算法学习笔记
- Crawler4j快速入门实例
- 浅谈python中的字符编码与转码
- Spring如何加载XSD文件(org.xml.sax.SAXParseException: Failed to read schema document错误的解决方法)
- 极差归一化
- FFMpeg 源码分析 (3)avformat_open_input()
- 【学习笔记】jQuery库扩展
- UISegementControl切换简单应用
- json转list(谷歌的Gson.jar:)
- 对抗神经网络之对抗卷积神经网络[2]
- 设计模式之--单例模式
- C++自定义命名空间编写
- java框架Spring学习--Spring开发流程
- redis三种客户端:自带客户端、图形界面客户端、Java客户端
- Apache的性能解读