jQuery工作原理解析以及源代码示例(转)
jQuery的开篇声明里有一段非常重要的话:jQuery是为了改变javascript的编码方式而设计的.
从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库.
jQuery改变javascript编码方式!
那么它是如何实现它的声明的呢?这里,用以下的一段简短的使用流程:
1)查找(创建)jQuery对象:$(”selector”);
2)调用jQuery对象的方法完成我们需要完成的工作:$(”selector”).doOurWork();
ok,jQuery就是以这种可以说是最简单的编码逻辑来改变javascript编码方式的.这两个步骤是jQuery的编码逻辑核心!
要实现这种简洁编码方式,创建jQuery对象这一环节至关重要.因此,jQuery的dom元素查找能力相当强悍.此外,jQuery对象的方法肯定是有限的,有限的方法满足不了日益增长各有所需的要求,所以,必须提供jQuery对象方法的扩展能力.
强悍的dom元素查找能力,以及随心所欲的方法扩展,这两点正是jQuery的核心所在!
来一个简单的示例,来说明jQuery是如何工作的:
< !DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml” ><head> <title>无标题页</title></head><body id=”bd”><a href=”http://www.baidu.com”>baidu</a></body></html><script type=”text/javascript” src=”../Script/jquery.js”></script><script type=”text/javascript” >$(function(){ $(“a“).click(function(e){//1)查找$(”a”);2)jQuery对象事件click;3)jQuery对象方法hide $(this).hide(“slow“); return false; });});</script>
$(document).ready( function() { $(’#drag1′).Draggable({ handle: “ax“, //属性设置 onStart: function(el,x,y){ //事件监听器设置 } }); });
jQuery.fn.check = function() { return this.each(function() { this.checked = true; });};
jQuery.prototype.check = function() { return this.each(function() { this.checked = true; });};
< !DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head> <title>Untitled Page</title></head><body><div id=”d”>divvv</div><div id=”fsd”>fdsf</div></body></html><script type=”text/javascript”>//实现自己的MyQuery框架var MyQuery = function(selector){ if ( window == this ) return new MyQuery(selector); //这里只实现dom类型的简单查找,嘿嘿 var doms = document.getElementsByTagName(selector); var arr = []; for(var i=0; i<doms .length; i++){ arr.push(doms.item(i)); } return this.setArray(arr);}MyQuery.prototype.setArray = function( arr ) { this.length = 0; [].push.apply( this, arr ); return this;}MyQuery.fn = MyQuery.prototype;var $ = MyQuery;//插件扩展1)eachMyQuery.fn.each = function(method){ for(var i=0,l=this.length; i<l; i++){ method.call(this[i],i); }}//插件扩展2)showMyQuery.fn.show = function(){ this.each(function(i){ alert(i+“:“+this.id+“:“+this.innerHTML); });}//debugger$(“div“).show();</script></doms></script>