自定义jQuery库精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/Yesterdayw/article/details/106790142

<body>
		<div>1</div>
		<div>2</div>
	</body>
	<script type="text/javascript">
	//定义一个自调函数
		(function(global){
			//global保留了window对象的引用
			//1.定义 jquery()方法,返回元素
			function jquery(selectors){
				//方法一：
			var elements=document.querySelectorAll(selectors);
     		return elements;

			}
			
			//设置一个处理css样式的函数
			//方法一：将css函数写入到elements对象的原型中
//			HTMLCollection.prototype.css=function(){}
//			此方法可以实现效果，但改变了对象的原型，一般不可取

			window.$=window.jquery=jquery;//给window对象添加属性$和jquery,并设置值为jquery
		})(window)
		
		$('div').css('color','red');
		
	</script>

改进后

<body>
		<div>1</div>
		<div>2</div>
	</body>
	<script type="text/javascript">
	//定义一个自调函数
		(function(global){
			//global保留了window对象的引用
			//1.定义 jquery()方法,返回元素
			function jquery(selectors){
				//方法二：
				return new fn(selectors);
			}
			//改进二：将dom元素放到fn函数中
			function fn(selectors){
				//jquery内部封装了一个Sizzle引擎来获取DOM元素
				var elements=document.querySelectorAll(selectors);
				this.elements=elements;//当函数以new关键字调用时，this指向该构造函数的实例
			}
			//将css写到fn函数的原型中：
			fn.prototype.css=function(name,value){
				
				for(var i=0;i<this.elements.length;i++){
					this.elements[i].style[name]=value;
				}	
			}
			window.$=window.jquery=jquery;//给window对象添加属性$和jquery,并设置值为jquery
		})(window)
		
		$('div').css('color','red');
		
	</script>

下一页继续改进

Js库的封装