手写jQuery

最新推荐文章于 2022-11-23 22:54:00 发布

zhangxiaobai___

最新推荐文章于 2022-11-23 22:54:00 发布

阅读量132

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/zhangxiaobai___/article/details/128004748

版权

jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程。jQuery对象就是指 jQuery函数构造出来的对象。

本文介绍一个简单的手写jQuery:

jQuery('#xxx') //返回值并不是元素而是一个api对象;

jQuery太长改写成$，window.$=window.jQuery=jQuery //这句话调用以后用$就相当于jQuery 在最底部写在这句话。

(function(){
	//匿名函数自执行
	//jQ的构造函数
	function jQuery(selector){
		//返回new 一个初始化函数
		return new jQuery.fn.init(selector);
	}
	//定义jQuery构造函数的显示原型
	jQuery.fn=jQuery.prototype={
		constructor:jQuery,
		jquery:"9.0.0",
		length:0,
		get(index){
			return this[index];
		},
		click(callback){
			//单击让this每个元素执行callback回调函数
			for(var i=0;i<this.length;i++){
				this[i].addEventListener("click",callback);
			}
		},
		toggle(){
			//遍历每个元素如果display不是none就隐藏,否则就显示
			for(var i=0;i<this.length;i++){
				if(this[i].style.display!="none"){
					this[i].style.display="none";
				}else{
					this[i].style.display="block";
				}
			}
		}
	}
	var isReady=false;//当前dom是否加载完毕
	var readyList=[];//等待要被执行的函数礼包
	//监听domcontentloade事件
	document.addEventListener("DOMContentLoaded",function(){
		//文档加载完毕,改变isReady
		isReady=true;
		//遍历readyList里面的函数并执行
		readyList.forEach(item=>item());
		//做完清空
		readyList=[];
	})
	jQuery.fn.init=function(selector){
		//如果传递的是一个函数
		if(typeof selector==="function"){
			//如果jQuery已经准备完毕
			if(isReady){
				selector();
			}else{
				//把它加入的readyList列表中
				readyList.push(selector);
			}
		}else{
			//获取到选择列表
			var list=document.querySelectorAll(selector);
			//当前对象的长度
			this.length=list.length;
			for(var i=0;i<list.length;i++){
				//遍历列表对this赋值
				this[i]=list[i];
			}
		}
	}
	//让new init产生对象拥有jQuery显示原型上的所有方法
	jQuery.fn.init.prototype=jQuery.fn;
	//全局对jQuery与$可以访问
	window.$=window.jQuery=jQuery;
})()

前端代码调用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/jquery-9.0.0.js"></script>
		<script>
			$(function(){
				alert("jq已经加载完毕")
			})
			$(function(){
				alert("jq已经加载完毕2")
			})
		</script>
	</head>
	<body>
		<h1>jQuery还是大哥吗？</h1>
		<p>是的</p>
		<h1>市场占用96.8%</h1>
		<button>切换</button>
	</body>
	<script>
		//给button注册一个点击事件
		$("button").click(function(){
			//让h1切换显示与隐藏
			$("h1").toggle();
		})
		$(function(){
			alert("jq已经加载完毕3")
		})
	</script>
</html>