一直写代码写代码，博客都快荒废了，眼看一月要过完，不能不留下点记忆，嘿嘿，刚研究了下jquery的链式访问，这么好用的技能我赶紧get了下，研究后略微修改，模拟一个简单的链式访问，下面这段代码支持修改css，获取css属性值，显示和隐藏等小功能，打算抽空把自己的js小框架全改成链式访问。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="wmlink.js"></script> <style type="text/css"> #box { color: red; } </style> </head> <body> <div id="box">模拟链式访问</div> <div class="box">模拟链式访问</div> <div class="box">模拟链式访问</div> <div class="box">模拟链式访问</div> <script type="text/javascript"> (function(win){ var WM = function(selector) { this.element = [];//接收dom元素 return this.all(selector);// 返回id的dom元素 } var $ = function(selector) { return new WM(selector); } WM.prototype = { all:function(selector) { this.element = document.querySelectorAll(selector); return this; }, hide: function(){ for (var i = 0; i < this.element.length; i++) { this.element[i].style.display = 'none'; } return this; }, show: function(){ for (var i = 0; i < this.element.length; i++) { this.element[i].style.display = 'block'; } return this; }, css: function(key, value) { var doms = this.element; // 根据参数个数实现方法重载 if (doms.length) { for (var i = 0; i < doms.length; i++) { if (value) { this.setStyle(doms[i], key, value); } else { return this.getStyle(doms[0], key); } } } else { if (value) { this.setStyle(doms, key, value); } else { return this.getStyle(doms, key); } }; }, getStyle: function(dom, key) { if (dom.currentStyle) { return dom.currentStyle[key]; } else { return window.getComputedStyle(dom, null)[key]; } }, setStyle: function(dom, key, value) { dom.style[key] = value; }, } var demo =$('#box').css('color'); // 通过对象的引用调用 console.log(demo);// 获得属性值 $('.box').css('color','yellow') })(window) </script> </body> </html>