模拟jQuery实现获取元素和修改css样式

jQuery

jQuery是一个JavaScript的函数库，可以简便的去操作dom元素以及提供了很多的插件。
今天简单的模拟一下jQuery的底层，去操作dom元素，以及修改css样式。
首先我们使用一个立即执行函数封装它，封闭它的作用域。
在使用jQuery时我们直接使用$符号就可以使用它，是因为将jQuery挂载到了全局对象window上，所以可以直接使用。
然后我们在jQuery的原型链上创建一个构造函数。在并返回这个构造函数的实例对象
（这个函数仅仅对class，id有效,请自行补充）

<div class="demo">1</div>
    <div class="demo" id="demo">2</div>
    <div class="demo">3</div>
    <script>
        (function () {
            function jQuery(selector) {
                // 返回 init构造出来的实例
                return new jQuery.prototype.init(selector);
            };
            jQuery.prototype.init = function (selector) {
                // 创建一个变量获取noedList
                var dom = null;
                // 给返回的对象添加一个length属性，变成一个类数组对象
                this.length = 0;
                // 对传进来的参数进行分解
                if (selector.indexOf(".") != -1) {
                    // 判断传进来的参数是否为class
                    dom = document.getElementsByClassName(selector.slice(1));
                } else if (selector.indexOf("#") != -1) {
                    // 判断传进来的参数是否为id
                    dom = document.getElementById(selector.slice(1));
                } else {
                    // 格式不对返回一个空对象
                    return {};
                }
                // 将nodeList保存的数据传给this指向的空对象
                if (dom.length == undefined) {
                    // 如果是通过id获取的，那他不是一个伪数组，所以没有length属性
                    // 将dom赋给this的第0项，长度自增
                    this[0] = dom;
                    this.length++;
                } else {
                    // 将nodeList里的每一项遍历给this指向的空对象
                    for (var i = 0; i < dom.length; i++) {
                        this[i] = dom[i];
                        this.length++;
                    }
                }
            }
            // 将jQuery挂载到window上
            window.$ = window.jQuery = jQuery;
        })();
    </script>

然后我们试一试可不可以获取到元素样式

  console.log($(".demo"))//写在立即执行函数后面

可以看到我们成功获取了dom元素

修改css样式

jQuery里在获取到了元素后想修改css样式。直接$(".demo").css(‘属性名’,‘属性值’)；即可修改css样式。
那么我们想实现这种功能怎么做呢？
首先 css()是直接打点调用的，因为返回的是init的实例对象，所以init要继承jQuery的原型，那么直接最简单的继承，原型=原型

// 让init的原型指向jQuery的原型
jQuery.prototype.init.prototype = jQuery.prototype;

接下来我们分析一下css函数的参数，如果只修改一个样式的话，那么填两个参数，（“属性值”，“属性名”），如果你要修改多个样式，那么只传一个值就可以，一个对象{“属性值1”：“属性名1”，“属性值2”，“属性名3”}。

   jQuery.prototype.css = function (key, value) {
                // 拆解字符串并将第二单词首字母大写
                function keyNew(str) {
                    // 当属性名有横杠时
                    if (str.indexOf("-") != -1) {
                        var arr = str.split("-");
                        var a = arr[0];
                        var b = "";
                        for (var i = 0; i < arr[1].length; i++) {
                            if (i == 0) {
                                // 第一个字母大写
                                b += arr[1][i].toLocaleUpperCase();
                            } else {
                                b += arr[1][i];
                            }

                        }
                        return `${a}${b}`;
                    }
                    // 没有横杠就不进行字符串拆解
                    return str;
                }
                // 当传进来的参数key不是一个对象，给元素添加css样式
                if (typeof key != 'object') {
                    var newKey = keyNew(key);
                    if (this.length > 1) {
                        // 如果this有多个值，那给每个元素都添加样式
                        for (var i = 0; i < this.length; i++) {
                            this[i].style[newKey] = value;
                        }
                    } else {
                        this[0].style[newKey] = value;
                    }
                } else {
                    //如果第一个值是一个对象，遍历这个对象，并将属性名传进函数进行拆解
                    for (var item in key) {
                        var objKey = keyNew(item);
                        if (this.length > 1) {
                            for (var i = 0; i < this.length; i++) {
                                this[i].style[objKey] = key[item];
                            }
                        } else {
                            this[0].style[objKey] = key[item];
                        }
                    }
                }
            }

css（）里的属性名和js里不一样，如果是背景颜色这种样式，是用横杠连接，第二个单词首字母未大写的属性名。
所以就对传进的值进行拆解（如果你就想直接传第二个单词首字母的样式，当我没说）；
然后我们试试css函数有没有效

 $("#demo").css({
            'background-color': 'blue',
            'color': 'red',
            'font-size': '54px',
            'width':"200px",
            'height':"200px"
        });

可以看到样式添加成功了；

（如果这篇文章有什么问题请及时联系我！）