本次博客记录一个简单的"jQuey"的实现方式,来加深对jQuery的理解:
代码:
<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> .red{ color:red; } </style> <body> <div>你好</div> <div>你好</div> </body> <script type="text/javascript"> window.jQuey = function (selectorOrNode){ var nodes = {} // 判断用户传进来的是个字符串还是一个节点 if (typeof selectorOrNode === 'string'){ var temp = document.querySelectorAll(selectorOrNode) for (var i=0; i < temp.length; i++){ nodes[i] = temp[i] } nodes.length = temp.length }else if(selectorOrNode instanceof Node){ nodes = { 0:selectorOrNode, length:1 } } // 添加单个属性 nodes.addClass = function(newClass){ for (var i=0; i<nodes.length; i++){ nodes[i].classList.add(newClass) } } // 设置文本 nodes.setText = function(text){ for (var i=0; i<nodes.length; i++){ nodes[i].textContent = text } } return nodes } window.$ = jQuey var $div = $('div') $div.addClass('red') $div.setText("hi") </script> </html>
实现步骤:
1.首先我们创建一个函数并给了window.jQuey,这样我们就可以直接使用jQuery.call来直接调用函数了。
2. 创建了一个空对象 nodes;
3.判断传入实参的类型,如果是一个字符串,就通过选择器来获取节点们,通过for循环,来构造我们想要的nodes,并指定length,如果是一个节点,我们就直接将这个节点放到第0个位置,并指定length为1;
4.这里我们实现了两个方法, 添加单个属性的addClass和设置节点内文本的setText,将这两个函数作为值给了nodes的两个键addClass和setText,然后返回对象;
5.为了更像jQuery,我们将jQuery给了window.$,这样我们就可以直接使用$('div')获取我们所定义的jQuery对象和使用对象的方法。
效果图: