全面认识jQuery.fn,菜鸟总结
今天想做树形导航栏,查找了资料,找到了一个框架,比较小所以研究其中的代码,发现第一句话就把我难住了,主角是——jQuery.fn。
在此,再次停住,只好继续找资料,现在整理下自己所理解到的知识。
一,jQuery.fn是什么
答:从jqurey源代码,如下小段:
- jQuery.fn = jQuery.prototype = {
- constructor: jQuery,
- init: function( selector, context, rootjQuery ) {
- ............
- }
- }
可以看出,jQuery.fn == jQuery.prototype, 即jQuery.fn是 jQuery.prototype别称。
在这里我们停一下,说说让我还一直头疼的prototype属性或对象,怎么说呢,prototype属性或对象就相当于一个指针,指向某个object,这个object就可以称为子类对象的原型,那么我们可以间接地访问指向object的属性跟方法,也就差不多当前对象继承的指向的某个object。这里有个问题,就是如果指向的某个object有属性跟当前对象的属性相同的话怎么办,很简单,一句话——就近原则,从当前对象找,找到返回,没有去prototype指向的object里面找,没有在去prototype指向的object的prototype指向的object找,一层一层地找下去,知道找到为此。例子如下
- <script type="text/javascript">
- var animal = function(){
- this.name= "dfsdfsdf";
- this.sex= 'male';
- };
- var a = new animal();
- alert(a.name);
- var cat = function(){
- this.play = function (){
- alert('cat play')
- };
- };
- cat.prototype = new animal();
- cat = new cat();
- alert(cat.name);
- cat.name = "ddd";
- alert(cat.name);
- </script>
头疼到此,接回,继续jQuery.fn
从上面里面也可以看出prototype就相当于给某个类添加属性或者方法,那么,这样的话,我们就可以逆推一下下, jQuery.prototype——》jQuery.fn就是给jQuery类添加新的属性或者方法,来,我们来看下,材料如下:
- //给jQuery打洞,新添的方法
- $.fn.extend({
- sayHello: function(){
- $(this).click(function(){
- alert("hello jquery!");
- });
- }
- });
- //html代码
- <input type="button" value="sayHello" id="sayHello"/>
- //使用我们给jQuery新添的方法
- $(function(){
- $('#sayHello').sayHello();//这个我们可以弹出hello jquery!
- });
到此,可以认识Query.fn了
接下来,脑补一下,类似的知识jQuery.extend(object);这个方法
不错,它扩展的方法就是米饭,可以直接用,是jQuery类的静态方法。
- $.extend({
- add: function(a,b){
- return a + b ;
- }
- });
- alert($.add(3,4));//piapia出来个7
意想得到吧,OK,到此over,继续那小插件去鸟。
我是菜鸟,请拍砖。
全面认识jQuery.fn,菜鸟总结的更多相关文章
- jQuery源码-dom操作之jQuery.fn.html
写在前面 前面陆陆续续写了jQuery源码的一些分析,尽可能地想要cover里面的源码细节,结果导致进度有些缓慢.jQuery的源码本来就比较晦涩,里面还有很多为了解决兼容问题很引入的神代码,如果不g ...
- jquery.fn.extend与jquery.extend--(初体验二)
1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jquery.fn.extend(object);给jQuery对象添加方法. $.extend({ a ...
- jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
- 记jQuery.fn.show的一次踩坑和问题排查
最近很少已经很少用jQuery,因为主攻移动端,常用Zepto,其实很多细节和jQuery并不一样.最近又无意中接触到了PC的需求和IE6, 使用了jQuery,刚好踩坑了,特意记录一下. 本文内容如 ...
- jQuery.extend和jQuery.fn.extend的区别【转】
解释的很有意思,清晰明了又有趣,转来分享下,哈哈哈 jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来.很多地方说的也不详细.这里详细说说之间的区别 ...
- ES6的Iterator,jquery Fn
ES6的Iterator对象详解 Iterator实现原理 创建一个指针对象,指向当前数据结构的起始位置.也就是说,遍历器对象本质上,就是一个指针对象. 第一次调用指针对象的next方法,可以将指针指 ...
- jQuery原生框架中的jQuery.fn.extend和jQuery.extend
extend 方法在 jQuery 中是一个很重要的方法,jQuey 内部用它来扩展静态方法或实例方法,而且我们开发 jQuery 插件开发的时候也会用到它.但是在内部,是存在 jQuery.fn.e ...
- jQuery.fn.extend() 与 jQuery.extend()
jQuery.fn如何扩展. jQuery插件 $.fn(object)与$.extend(object) jQuery提供了两个方法帮助开发插件 $.extend(object);扩展jQuery类 ...
- jQuery.fn.extend(object) object中this的指向
看到下面的代码后,一下子懵逼了.这个this指向哪儿去了. jQuery.fn.extend({ check: function() { return this.each(function() { t ...
随机推荐
- 腾讯内部举报信曝光: HR内斗混乱 玩弄求职者
来自:http://www.guigu.org/news/guigushijie/2013102140759.html 腾讯CEO马化腾正在内部大搞思想整风运动,此时,猎云网独家获得数封来自腾讯内部的 ...
- SORT UNIQUE|AGGREGATE|GROUP BY|ORDER BY|JOIN
相信做oracle开发和管理的朋友对sort肯定不会陌生,大家通常都遇到这样那样的排序性能问题,所以我写这一系列关于sort的文章告诉大家在oracle里面sort是怎么一回事以及如果调整sort获得 ...
- BITED-Windows8应用开发学习札记之四:如何在Win8 应用中实现语义缩放
语意缩放的意义在于:创新的语意缩放外观,让你的应用随时展现信息可视化的力量.如图表般的Tile,随着数据的不同而变化,让你的页面更富节奏.而所谓的语意缩放就是通过上下文的跳转,帮助我们实现一种更快更便 ...
- debian7下部署nginx服务器
笔者是在vmware中的Debian7下部署nginx服务器,采用离线部署方式.过程如下: 1.准备好需要的离线安装包 nginx-1.6.2.tar.gz,pcre-8.34.tar.gz,open ...
- Weibo Crawler in Action
1.要写一个微博爬虫,得分开几个模块来做: (1)模拟登录 (2)模拟浏览 (3)针对短时间内大量访问而引起怀疑的禁止登陆解决方案 (4)其他 (1)模拟登陆模块 前提:要模拟登录,得首先知道在登录微 ...
- 好用的shell命令行: fish的配置
fish的可视化配置命令: $ fish_config 其配置文件夹为 ~/.config/fish. 1.要设置环境变量,在配置文件夹里新建 config.fish 文件,它会作为fish 启动时的 ...
- jquery对象和js对象,以及它们的互相转换
jq对象无法使用DOM对象的方法,互相都不能用 ***jq对象转换成DOM对象的2中方法 1.$('div')[0下标]:jq对象是类似数组对象有长度,所以可以通过下标查找到它的DOM对象 2.$(' ...
- c++一些问题总结
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
- Android SDK无法更新解决方法
我这里主要说的是mac下如何设置Android SDK更新,windows下类似 首先说明为什么要这么麻烦,没办法身处在大天朝中,伟大的防火墙,苦逼的程序猿想要查点资料都是非常难的.不废话了,下面进入 ...
- HDU 1564 Play a game (找规律博弈)
Play a game Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...