`
villins
  • 浏览: 23486 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

认识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,继续那小插件去鸟。
      我是菜鸟,请拍砖。
分享到:
评论

相关推荐

    HTML5使用jquery.fn.gantt.js生成甘特图.rar

    带动态提示的HTML5甘特图,HTML5使用jquery.fn.gantt.js生成甘特图,测试请在服务器环境下,请不要双击HTML打开,或者直接用火狐打开,这样看不到效果,本甘特图带有鼠标悬停提示效果。

    jQuery.extend和jQuery.fn.extend的区别

    NULL 博文链接:https://bijian1013.iteye.com/blog/2255035

    开发工具 jquery.dataTables.min

    开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....

    jquery.json-2.3.min.js和jquery.json-2.3.js

    jquery.json-2.3.min.js和jquery.json-2.3.js jQuery为开发插件提拱了两个方法,分别是:jQuery.extend(object); 为扩展jQuery类本身 jQuery.fn.extend(object);给jQuery对象添加方法。

    jquery.gantt,js甘特图

    JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。它既可以图形化行程安排,也可以展示数据分布。使用方法:http://blog.csdn.net/kangrydotnet/article/details/42265539

    jquery图片播放器 - jquery.fn.imgplayer-1.2

    &lt;script type="text/javascript" src="jquery.fn.imgplayer.min.js"&gt; 4. 绑定播放函数(参数说明详见上述) var player = $("#imgContainer").playImgs({ imgCSS : {'width' : '800px', 'height' : '600px'}, ...

    浅谈jquery.fn.extend与jquery.extend区别

    jquery.fn.extend(object);给jQuery对象添加方法。 $.extend({  add:function(a,b){return a+b;} }); //$.add(3,4); //return 7 jQuery添加一个为 add的“静态方法”,之后便可以在引入 jQuery 的地方,使用这...

    jquery.zTree.js.rar

    jquery-1.4.4.min.js jquery.ztree.exhide.min.js jquery.ztree.exedit.min.js jquery.ztree.excheck.min.js jquery.ztree.core.min.js jquery.ztree.all.min.js jquery-1.4.4.js jquery.ztree.exhide.js jquery....

    jQuery学习笔记之jQuery.fn.init()的参数分析

    主要介绍了jQuery.fn.init()的参数分析,需要的朋友可以参考下

    jquery.hash.min.js 和 jquery.ba-hashchange.min.js

    单页后退前进刷新 jquery.hash.min.js 和 jquery.ba-hashchange.min.js

    jquery.validate 版本大全

    jquery.validate.1.9.0.min.js jquery.validate.1.12.0.min.js jquery.validate.1.13.1.min.js jquery.validate.1.16.0.min.js jquery.validate.1.14.0.min.js jquery.validate.1.15.1.min.js jquery.validate....

    jquery.treegrid.min.js

    jquery.treegrid.min.js jquery.treegrid.min.jsjquery.treegrid.min.jsjquery.treegrid.min.js

    jquery.cookie.js,jquery.min.js

    jquery.cookie.js,jquery-1.11.0.min.js,respond.min.js, bootstrap.min.js,html5shiv.js

    jquery.slimscroll.min.js

    jquery.slimscroll.min.js下载 jquery.slimscroll.min.js下载

    jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析

    主要介绍了jQuery.extend 与 jQuery.fn.extend的用法及区别,结合实例形式分析了jQuery.extend与jQuery.fn.extend的功能、使用方法及区别,需要的朋友可以参考下

    jquery.弹出框jquery.弹出框

    jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框...

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    jQuery.fn和jQuery.prototype区别介绍

    jQuery.fn和jQuery.prototype想必大家对它并不陌生吧,那么你们知道它们之间的区别吗?在本文有个不错的示例大家可以参考下

    jquery.kxbdmarquee插件

    无缝滚动插件jquery.kxbdmarquee.以及所依赖的jQuery。

    jquery.media.js.zip

    jquery.media.js

Global site tag (gtag.js) - Google Analytics