$.extend() 和 $.fn.extend() 使用
来源:互联网 发布:日本刘姓 知乎 编辑:程序博客网 时间:2024/05/22 01:28
jQuery为插件的开发提供了两个方法,一个是$.extend(),另一个是$.fn.extend(),$.fn.extend() = $.prototype.extend(),即是在原型链中添加对象方法,当定义一个对象的时候,该对象一生成就具有$.fn.extend()中声明的方法,可以直接调用。
如果将jq源码解压缩格式化之后,就会看到$.fn实际定义的时候与$.prototype相等,我这是3.2.1版本的源码:
其实在源码最后又可以看到如下:
定义了全局的window.jQuery = window.$ = jQuery,故而就可以发现,在我们自己写的脚本中使用的例如获取元素的$('#tid') 以及 jQuery('#tid') ,都是这里定义的window.jQuery 和 window.$ ,而连等号最右侧的jQuery,其实只是源码中声明的对象:
可以看到,这里定义了插件版本号version,以及var jQuery = function(){......}的初始化,等等。然后通过jQuery.extend 以及 jQuery.fn.extend() 不停地给插件封装方法。
jQ源码结构如下:所有方法都在红框圈出的function中,因此我们通过jQuery.fn.extend新增的方法也要写在其中
下面我们就来试着使用$.extend自己封装一些方法并调用,在源码加入如下封装的方法:
注意:浏览器可能会报错 unexpected end of input ,这是检测到代码不规范,将注释部分去掉即可
//$.extend()添加类方法,实际就是jq的静态方法(可将此段以及下段代码放入源码中测试) jQuery.extend({ addNum:function(a,b){ return a+b; }, age:120 //然而这样做并没有意义 }); //$.fn.extend() jQuery.fn.extend({ //在prototype原型链为对象添加方法 consoleWhileClick:function(){ jQuery(this).click(function(){ console.log('click one button'); }); }, //在prototype原型链为对象添加属性 age:110 });
然后在我们自己的脚本中调用:
<script> $(document).ready(function(){ var num = $.addNum(3,4); console.log("num = "+num); //7 console.log($.age); //120 $('#but').consoleWhileClick(); //点击 #but 按钮的时候打印 click one button console.log($('#but').age); //110 console.log($('body').age); //110 console.log($('div').age); //110 });</script>
更多内容查看:点击打开链接
阅读全文
2 0
- $.extend() 和 $.fn.extend() 使用
- $.fn.extend()和$.extend()
- $.fn.extend(); 和 $.extend();
- $.extend和$.fn.extend
- $.fn.extend()和$.extend()
- $.extend()和$.fn.extend()
- jQuery的$.fn.extend和$.extend使用
- $.extend和$.fn.extend 区别
- $.extend()和$.fn.extend()详解
- $.extend()和$.fn.extend()区别
- jQuery.fn.extend ($.fn.extend)的使用
- jquery的$.extend()、$.fn和$.fn.extend()
- jquery的$.extend()、$.fn和$.fn.extend()
- jquery.fn.extend与jquery.extend的区别和使用
- uery.fn.extend与jquery.extend的区别和使用
- jquery.extend 与 jquery.fn.extend的区别和使用
- jquery中extend和fn.extend的使用
- jquery.fn.extend与jquery.extend的区别和使用
- PHP使用clone关键字复制对象
- phalcon学习笔记--------依赖注入,容器IoC的理解
- java.lang.UnsatisfiedLinkError: Couldn't load xxx from loader dalvik.system.PathClassLoader的解决方法
- Ubuntu16.04中MySQL安装配置
- 1078 最小生成树
- $.extend() 和 $.fn.extend() 使用
- Selenium2+python自动化44-元素定位参数化(find_element)
- 数据库创建外键的两种方式
- VGScene 4.05 破解过程
- redisz 做消息传递
- ARM7 的启动
- Windows 配置Apache虚拟机
- vc++ TCP/IP网络编程中recv的含义
- C# 网络编程(一)