您现在的位置是:首页 > 正文

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

2024-04-01 02:10:45阅读 5

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"
        });

在这里插入图片描述
可以看到样式添加成功了;

(如果这篇文章有什么问题请及时联系我!)

网站文章

  • 模板目录

    3. 专题和知识点详细内容 下面用表格的形式列出了竞赛中用到的算法知识点,约300个。 本文作者估计,铜牌和银牌需要约200个知识点,其他的是金牌。 **注:**表格中的“典型题”,不一定是模板题,只作为进一步了解的参考。 3.1. 数学Mathematics 3.1.1数论Number Theory 知识点 英文 典型题 说明 GCD、LCM 1 素数判断...

    2024-04-01 02:10:37
  • openresty 重定向

    openresty 重定向

    2024-04-01 02:10:28
  • Docker Desktop配置国内镜像仓库解决docker pull速度慢问题

    Docker Desktop配置国内镜像仓库解决docker pull速度慢问题

    添加国内镜像仓库解决docker pull速度慢问题

    2024-04-01 02:09:45
  • python游戏脚本实例-Python使用pygame模块编写俄罗斯方块游戏的代码实例

    python游戏脚本实例-Python使用pygame模块编写俄罗斯方块游戏的代码实例

    文章先介绍了关于俄罗斯方块游戏的几个术语。边框――由10*20个空格组成,方块就落在这里面。盒子――组成方块的其中小方块,是组成方块的基本单元。方块――从边框顶掉下的东西,游戏者可以翻转和改变位置。每...

    2024-04-01 02:09:37
  • 【知识总结】 关于Webpack Loader知多少

    【知识总结】 关于Webpack Loader知多少

    loader是什么? loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效模块。以供应用程序使用,以及被添加到依赖图中。loader 本质上是导出为函数的 JavaScrip...

    2024-04-01 02:08:59
  • c++11之weak_ptr 使用介绍

    c++11之weak_ptr 使用介绍

    介绍 weak_ptr是弱智能指针对象,它不控制所指向对象生存期的智能指针,它指向由一个shared_ptr管理的智能指针。将一个weak_ptr绑定到一个shared_ptr对象,不会改变shared_ptr的引用计数。一旦最后一个所指向对象的shared_ptr被销毁,所指向的对象就会被释放,即使此时有weak_ptr指向该对象,所指向的对象依然被释放。 代码验证如下: //defa...

    2024-04-01 02:08:53
  • 统一cas认证java_新版统一身份认证(CAS)

    申请需要提供以下信息,内容说明应用名称:格式为单位全称加应用,中间使用英文-连接,比如(学生处-离校系统),单位不需要再加厦门大学字样回调地址:格式为类似http://EXAMPLE.xmu.edu....

    2024-04-01 02:08:46
  • Mybatis设计分析一

    Mybatis设计分析一

    前面文章主要针对mybatis的进阶的使用有了个大的了解,包括缓存自定义 以及开启二级缓存机制,以及如何达到多数据源,按照我之前的写法通过路由 去解决 不同的数据源的问题,当然可以,有些时候其实也不用...

    2024-04-01 02:08:39
  • 两万常用汉字的拼音+首字母缩写+unicode编码对照表

    最近做项目遇到一项需求,为了隐藏汉字,对医院名称使用首字母代替,对医生名称用拼音代替。查阅了众多资料,比较分散,也不规范,做一个统一,问题包括以下几方面:1. 读出汉字的拼音首字母可通过Excel 公式实现;2. 读出汉字的拼音实现方法,基本需要借助编程,但是目前网上流传最广的版本是比较老旧的版本,不仅编码覆盖不全,而且有错误的mapping。3. 得到2万个常用的汉字并不容易,最...

    2024-04-01 02:07:59
  • Java参数传递

    要点 读完所有的评论以后,问题终于明白了,至少在一个主要问题上产生了混淆。某些评论认为我的节选是错的,因为对象是按引用传递的。 对象确实是按引用传递的;节选与这没有冲突。节选中说所有 参数都是按值 -- 另一个参数 -- 传递的。下面的说法是正确的:在 Java 应用程序中永远不会传递对象,而只传递对象引用。因此是按引用传递对象。但重要的是要区分参数是如何传递的,这才是该节选的意图。Java 应用

    2024-04-01 02:07:52