Jquery揭秘系列:实现$.fn.extend 和$.extend函数
2014-01-02 08:40
603 查看
前面我们扩展了bind方法和ready函数,这次我要讲一下$.fn.extend 和$.extend函数。
其他的不多说,直接切入主题吧!
先来看看这两个函数的区别:
$.fn.extend是为查询的节点对象扩展方法,是基于$的原型扩展的方法
$.extend是扩展常规方法,是$的静态方法。
我们之前写的代码看一下:
View Code
使用方法其实就是
$.fn.extend(
{
method:function(){
}
})
$.extend(
{
method:function(){
}
})
代码和Jquery源码不一样,我这是为了简化写的方法,大家主要是要琢磨里面的思想。
其他的不多说,直接切入主题吧!
先来看看这两个函数的区别:
$.fn.extend是为查询的节点对象扩展方法,是基于$的原型扩展的方法
$.extend是扩展常规方法,是$的静态方法。
我们之前写的代码看一下:
(function (win) { var _$ = function (selector, context) { return new _$.prototype.Init(selector, context); } _$.prototype = { Init: function (selector, context) { }, each: function (callback) { } } _$.prototype.Init.prototype = _$.prototype; _$.fn = _$.prototype; var isObj = function (o) { return Object.prototype.toString.call(o) === "[object Object]"; } _$.fn.extend = function (obj) { if (isObj(obj)) { for (var i in obj) { this[i] = obj[i]; } } } _$.extend = function (obj) { if (isObj(obj)) { for (var i in obj) { this[i] = obj[i]; } } } window.$ = window.JQuery = _$; })(window);
View Code
使用方法其实就是
$.fn.extend(
{
method:function(){
}
})
$.extend(
{
method:function(){
}
})
代码和Jquery源码不一样,我这是为了简化写的方法,大家主要是要琢磨里面的思想。
相关文章推荐
- 4.1.3: jQuery事件之合成事件
- 4.1.2: jQuery事件之事件绑定
- 4.1.1: jQuery事件之加载DOM
- 3.2.12: jQuery的DOM操作之CSS-DOM操作
- 3.2.11: jQuery的DOM操作之遍历节点
- 3.2.10: jQuery的DOM操作之设置和获取HTML、文本和值
- 3.2.9: jQuery的DOM操作之样式操作
- 3.2.8: jQuery的DOM操作之属性操作
- 3.2.7: jQuery的DOM操作之包裹节点
- 3.2.6: jQuery的DOM操作之替换节点
- 3.2.5: jQuery的DOM操作之复制节点
- 3.2.4: jQuery的DOM操作之删除节点
- 3.2.3: jQuery的DOM操作之插入节点
- 3.2.2: jQuery的DOM操作之创建节点
- 3.2.1: jQuery的DOM操作之查找节点
- Create a Flipping Awesome 3D Gallery with jQuery Flipping Gallery
- js/jQuery简单实现选项卡功能
- 快速解决jQuery与其他库冲突的方法介绍
- 使用简洁的jQuery方法实现隔行换色功能
- 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)