5)成熟--选择器
jquery返回的是一个类数组对象,也就是说有数组的长度和下标,但是没有数组的方法.
<div>11</div> <div>22</div> <div>33</div> <div>44</div> <div>55</div> <script type="text/javascript"> var $ = jquery = function(selector,context){ return new jquery.fn.init(selector,context); } jquery.fn = jquery.protopyte = { //扩展原型对象 init : function(selector,context){ selector = selector || document; //如果第一个参数有值,则selector为参数值,否则为这个页面的document对象 context = context || document; if(selector.nodeType){ //nodeType属性表示节点类型,如果是string类型的,则是undefined,其他比较重要的值为元素element为1,文档document为9等 this[0] = selector; //如果没传参数,则selector为document对象,selector.nodeType为9 this.length = 1; this.context = selector; return this; } if(typeof(selector) === "string"){ //如果传入的值是string类型的 var e = context.getElementsByTagName(selector); //获取传入值的所有节点 for(var i = 0;i< e.length;i++){ this[i]=e[i]; } this.length = e.length; this.context = context; return this; }else{ this.length = 0; this.context = context; return this; } }, length : "100", jquery : "1.9.0", size : function(){ return this.length; } } jquery.fn.init.prototype = jquery.fn; alert($("div").size()); //打印出来是5 </script>
上述代码基本有了框架中$("div")语法的功能,他可以选择指定范围的div元素,并且调用size()方法返回长度.
6)延伸--迭代器
jquery提供了一个each工具函数用来迭代,下面用html()方法来模拟迭代:
<div></div> <div></div> <div></div> <div></div> <div></div> <script type="text/javascript"> var $ = jquery = function(selector,context){ return new jquery.fn.init(selector,context); } jquery.fn = jquery.protopyte = { //扩展原型对象 init : function(selector,context){ selector = selector || document; //如果第一个参数有值,则selector为参数值,否则为这个页面的document对象 context = context || document; if(selector.nodeType){ //nodeType属性表示节点类型,如果是string类型的,则是undefined,其他比较重要的值为元素element为1,文档document为9等 this[0] = selector; //如果没传参数,则selector为document对象,selector.nodeType为9 this.length = 1; this.context = selector; return this; } if(typeof(selector) === "string"){ //如果传入的值是string类型的 var e = context.getElementsByTagName(selector); //获取传入值的所有节点 for(var i = 0;i< e.length;i++){ this[i]=e[i]; } this.length = e.length; this.context = context; return this; }else{ this.length = 0; this.context = context; return this; } }, length : "100", jquery : "1.9.0", size : function(){ return this.length; }, html : function(val){ jquery.each(this,function(val){ this.innerHTML = val; },val); } } jquery.fn.init.prototype = jquery.fn; jquery.each = function(object,callback,args){ for(var i=0;i<object.length;i++){ callback.call(object[i],args); } return object; } $("div").html("test"); //每个div展示test </script>
7延伸--功能扩展
jquery框架用extend()函数来快速扩展jquery的功能,这样做的好处是不会破坏jquery框架,方便管理,如果不需要某个插件,直接删除就可以了,而不必侵入jquery框架里面去筛选删除.
<body> <div></div> <script type="text/javascript"> var $ = jquery = function(selector,context){ return new jquery.fn.init(selector,context); } jquery.fn = jquery.protopyte = { //扩展原型对象 init : function(selector,context){ selector = selector || document; context = context || document; if(selector.nodeType){ this[0] = selector; this.length = 1; this.context = selector; return this; } if(typeof(selector) == "string"){ var e = context.getElementsByTagName(selector); for(var i = 0;i< e.length;i++){ this[i]=e[i]; } this.length = e.length; this.context = context; return this; }else{ this.length = 0; this.context = context; return this; } }, length : "3", jquery : "1.9.0", size : function(){ return this.length; } } jquery.fn.init.prototype = jquery.fn; jquery.extend = jquery.fn.extend = function(obj){ for(var prop in obj){ this[prop] = obj[prop]; } return this; } jquery.fn.extend({ test : function(){ alert("这是测试方法"); } }) $("div").test(); </script> </body>
当然jquery的extend方法要复杂很多,不仅能扩展,还能实现对象合并等方法.
8延续--参数处理
jquery在extend()里处理参数,里面定义了一个options,有初始值,如果外界传过来的值在里面有定义,就覆盖,否则就多加一个参数.
9涅槃--名字空间
jquery用闭包的方式来避免名称和其他框架冲突,也防止了其他框架调用jquery方法,具体做法是:
(function(){
})()
因为$并不是jquery的专利,其他框架也会用到这个变量,所以jquery用noConflict(jquery1.9.0里的方法,其他版本可能是noConfilit())方法来避免:
noConflict: function( deep ) { if ( window.$ === jQuery ) { window.$ = _$; } if ( deep && window.jQuery === jQuery ) { window.jQuery = _jQuery; } return jQuery; }
使用的时候要写成例如jQuery("div").test()