首页 > Web开发 > 详细

模拟jquery链式访问

时间:2017-01-23 21:16:36      阅读:252      评论:0      收藏:0      [点我收藏+]

 一直写代码写代码,博客都快荒废了,眼看一月要过完,不能不留下点记忆,嘿嘿,刚研究了下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链式访问

原文:http://www.cnblogs.com/yesyes/p/6344892.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!