模拟jquery链式访问
生活随笔
收集整理的這篇文章主要介紹了
模拟jquery链式访问
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?一直寫代碼寫代碼，博客都快荒廢了，眼看一月要過完，不能不留下點記憶，嘿嘿，剛研究了下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>?
總結
以上是生活随笔為你收集整理的模拟jquery链式访问的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LOLs11卡尔玛辅助出装 扇子妈天赋
- 下一篇： X210串口配置与stdio移植