现在都用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的完全一样。
今天就先分享到这