模拟jquery链式访问

最新推荐文章于 2025-09-11 14:33:48 发布

weixin_34216196

最新推荐文章于 2025-09-11 14:33:48 发布

阅读量90

点赞数

文章标签： javascript ViewUI

本文介绍了一个简单的链式访问实现，支持CSS样式修改与获取、元素显示与隐藏等功能。通过自定义JavaScript库模拟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>