手寫jQuery原始碼 - tw511教學網

// 避免變數的全域性汙染
(function(){
	/* jQuery 建構函式 */
	function jQuery(selector){
		return new jQuery.fn.init(selector);
		// 返回 init 建構函式創造的範例
	}
	// 原型起個別名
	jQuery.fn = jQuery.prototype;
	
	/* init 初始化方法 */
	jQuery.fn.init = function(selector){
		if(typeof selector == 'object'){  
			this[0] = selector;
			this.length = 1; 
			// 如果傳入的是物件,就把物件當this裡面的元素
		}else if(typeof selector == 'function'){ //當selector是函數時候 執行ready方法
			jQuery.fn.ready(selector);
			
		}else{
			var elems = document.querySelectorAll(selector);
			// 選擇到所有的元素
			for(var i=0;i<elems.length;i++){
				this[i] = elems[i];
			}
			//  變數把選擇到的物件掛載到範例上
			
			this.length = elems.length;
			// 設定長度
			return this; //返回 init創造的範例
		}
	}
	
	
	/* dom操作方法 */
	/* each 遍歷方法:變數this指向回撥函數fn */
	jQuery.fn.each = function(fn){
		for(var i=0;i<this.length;i++){
			fn(this[i]);
		}
		return this;
	}
	/* on方法 繫結事件 */
	jQuery.fn.on=function(type,fn){
		this.each(function(elem){
			elem.addEventListener(type,fn);
		})
		return this;
	}
	/* toggleClass方法 */
	jQuery.fn.toggleClass=function(name){
		this.each(function(elem){
			elem.classList.toggle(name)
		})
		return this;
	}
	jQuery.fn.toggle=function(name){
		this.each(function(elem){
			var display = document.defaultView.getComputedStyle(elem,null).display;
			//            檔案.預設檢視。獲取電腦計算的樣式（元素，null）
			// 獲取瀏覽器計算過後元素的css屬性
			if(display!='none'){ //如果得到display值不是none
				elem.oldview = display; //用oldview 屬性記錄下
				elem.style.display = 'none'; //隱藏
				
			}else{
				elem.style.display = elem.oldview||'block';
				// 否則 顯示
			}
		})
		return this;
	}
	
	/* 實現ready方法 */
	jQuery.fn.ready = function(callback){
		if(jQuery.isReady){
			callback();
		}else{
			 setTimeout(()=>{
				 jQuery.fn.ready(callback);
			 },10)
		}
		// 如果jquery 準備好了執行 callback
	}
	document.addEventListener("DOMContentLoaded",e=>jQuery.isReady=true);
	// 檔案載入完畢設定jQuery的isReady為true
	
	
	jQuery.fn.init.prototype = jQuery.prototype;
	// 重新指向prototype；（為了讓範例擁有jQuery prototype上面的公用方法）
	// 全域性掛載
	window.$ = window.jQuery = jQuery;
	
})()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery</title>
		<script src="js/jquery-5.0.js"></script>
		<style>
			.active{color:red;}
		</style>
	</head>
	<body>
		<button>切換</button>
		<h1> 我愛<span>我的</span>祖國</h1>
		<p>我喜歡jquery</p>
		<p>我愛vue</p>
		<script>
			// console.log($);
			// console.log(jQuery);
			//  $("p").on("click",function(){
			// 	  $(this).toggleClass("active");
			//  })
			 
			//  $("button").on("click",function(){
			// 	 $("span").toggle();
			//  })
			$(function(){
				// alert("檔案載入完畢")
				console.log("檔案載入完畢")
			})
			 
		</script>
	</body>
</html>