造轮子之jQuery原理，30行代码实现jQuery

最新推荐文章于 2024-08-25 09:57:22 发布

sdxjwkq01

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量221

点赞数 1

文章标签： jquery javascript 前端 vue vue.js

本文链接：https://blog.csdn.net/sdxjwkq01/article/details/126390552

版权

现在都用vue，之前写过一篇仿vue2的文章造轮子之Vue实现原理，几十行代码实现Vue，几乎没人用jQuery了，不过有些需要动态修改dom的应用，用jQuery还是灵活一些，尤其是自己想写个小项目，jQuery太大了，有些功能自己用不到，所以今天趁闲暇时间写了个仿的jQuery，没心思看jQuery源码，所以只是功能上的模仿，没用jquery那种对象的写法（return this实现链式操作），直接用递归实现的链式操作，不多说，下面还是先上代码。

function $(ele){
			let nodes={

			};
			if(typeof ele=="string"){
				let tmp=document.querySelectorAll(ele);
				for(let i=0;i<tmp.length;i++){
					nodes[i]=tmp[i];
				}
				nodes.length=tmp.length;
			}else if(ele instanceof Node){
				nodes={
					0:ele,
					length:1
				}
			}else if(ele instanceof NodeList){
				for(let i=0;i<ele.length;i++){
					nodes[i]=ele[i];
				}
				nodes.length=ele.length;
			}
			nodes.eq=function(num){
				return $(this[num]);
			}
			nodes.find=function(ele){
				return $(this[0].querySelectorAll(ele));
			}
			nodes.text=function(str){
				if(str==undefined){
					return nodes[0].innerText;
				}else{
					return nodes[0].innerText=str;
				}
			}
			return nodes;
		}

目前只实现了eq(),find(),和text()方法，其他方法可以参照这个实现，很简单，下面给个demo测试一下，代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>王某</td><td>26</td>
			</tr>
			<tr>
				<td>刘某</td><td>26</td>
			</tr>
			<tr>
				<td>张某</td><td>26</td>
			</tr>
		</table>
	</body>
	<script language="javascript">
		function $(ele){
			let nodes={

			};
			if(typeof ele=="string"){
				let tmp=document.querySelectorAll(ele);
				for(let i=0;i<tmp.length;i++){
					nodes[i]=tmp[i];
				}
				nodes.length=tmp.length;
			}else if(ele instanceof Node){
				nodes={
					0:ele,
					length:1
				}
			}else if(ele instanceof NodeList){
				for(let i=0;i<ele.length;i++){
					nodes[i]=ele[i];
				}
				nodes.length=ele.length;
			}
			nodes.eq=function(num){
				return $(this[num]);
			}
			nodes.find=function(ele){
				return $(this[0].querySelectorAll(ele));
			}
			nodes.text=function(str){
				if(str==undefined){
					return nodes[0].innerText;
				}else{
					return nodes[0].innerText=str;
				}
			}
			return nodes;
		}





		let tr=$("tr");
			for(var i=0;i<tr.length;i++){
				console.log(tr.eq(i).find("td").eq(0).text());
			}
	</script>
</html>

tr=$("tr");

tr.eq(i).find("td").eq(0).text()；

执行之后可以看到控制台里已经输出了相应的姓名

可以看到链式操作和jQuery的完全一样。

今天就先分享到这

sdxjwkq01

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
造轮子之jQuery原理，30行代码实现jQuery

几乎没人用jQuery了，不过有些需要动态修改dom的应用，用jQuery还是灵活一些，尤其是自己想写个小项目，jQuery太大了，有些功能自己用不到，所以今天趁闲暇时间写了个仿的jQuery，没心思看jQuery源码，所以只是功能上的模仿，没用jquery那种对象的写法（return this实现链式操作），直接用递归实现的链式操作，不多说，下面还是先上代码。目前只实现了eq(),find(),和text()方法，其他方法可以参照这个实现，很简单，下面给个demo测试一下，代码如下。...
复制链接

扫一扫