jQuery原理第五天

addClass

<!--
 * @Author: 码小余
 * @Date: 2020-06-27 08:23:36
 * @LastEditTime: 2020-06-27 08:26:43
 * @FilePath: \代码\jQuery原理\20-jQuery属性操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>20-jQuery属性操作相关方法</title>
    <!--<script src="../jQuery原理/js/jquery-1.12.4.js"></script>-->
    <script src="js/njQuery-1.3.0.js"></script>
    <script>
      $(function () {
        /*
            6.addClass(): 给元素添加一个或多个指定的类
        */

        // 传递参数, 如果元素中没有指定类就添加, 有就不添加
        // 会返回this方便链式编程
        // console.log($("div").addClass("abc"));
        console.log($("div").addClass("abc def"));

        // 没有传递参数,不做任何操作,返回this
        // console.log($("div").addClass());

        // "aabb" + " " + "abc" = "aabb abc"
      });
    </script>
  </head>
  <body>
    <div class="aabb abc"></div>
    <div class="aabb"></div>
  </body>
</html>

addClass实现原理

addClass: function (name) {
    if (arguments.length === 0) return this;
    // 1. 对传入的类名进行切割
    var names = name.split(" ");
    // 2. 遍历取出所有的元素
    this.each(function (key, ele) {
        // 3. 遍历数组取出每一个类名
        $.each(names, function (k, value) {
            // 4. 判断指定元素中是否包含指定的类名
            if (!$(ele).hasClass(value)) {
                ele.className = ele.className + " " + value;
            }
        });
    });
    return this;
},

removeClass

<!--
 * @Author: 码小余
 * @Date: 2020-06-27 08:40:59
 * @LastEditTime: 2020-06-27 08:43:50
 * @FilePath: \代码\jQuery原理\21-jQuery属性操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>21-jQuery属性操作相关方法</title>
    <!--<script src="../jQuery原理/js/jquery-1.12.4.js"></script>-->
    <script src="js/njQuery-1.3.0.js"></script>
    <script>
      $(function () {
        /*
                7.removeClass(): 删除元素中一个或多个指定的类
            */
        // 传递参数, 如果元素中有指定类就删除
        // 会返回this方便链式编程
        // console.log($("div").removeClass("aabb"));
        // console.log($("div").removeClass("aabb abc"));
        // 没有传递参数, 删除所有类
        console.log($("div").removeClass());
      });
    </script>
  </head>
  <body>
    <div class="aabb abc"></div>
    <div class="abc"></div>
  </body>
</html>

removeClass实现原理

removeClass: function (name) {
    if (arguments.length === 0) {
        this.each(function (key, ele) {
            ele.className = "";
        });
    } else {
        // 1.对传入的类名进行切割
        var names = name.split(" ");
        // 2.遍历取出所有的元素
        this.each(function (key, ele) {
            // 3.遍历数组取出每一个类名
            $.each(names, function (k, value) {
                // 4.判断指定元素中是否包含指定的类名
                if ($(ele).hasClass(value)) {
                    ele.className = (" " + ele.className + " ").replace(
                        " " + value + " ",
                        ""
                    );
                    // 去除两端空格
                    ele.className = njQuery.trim(ele.className);
                }
            });
        });
    }
    return this;
},

toggleClass

<!--
 * @Author: 码小余
 * @Date: 2020-06-27 08:51:39
 * @LastEditTime: 2020-06-27 08:52:22
 * @FilePath: \代码\jQuery原理\22-jQuery属性操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>22-jQuery属性操作相关方法</title>
    <!--<script src="../jQuery原理/js/jquery-1.12.4.js"></script>-->
    <script src="js/njQuery-1.3.0.js"></script>
    <script>
      $(function () {
        /*
                8.toggleClass(): 没有则添加,有则删除
            */

        // 传递参数, 如果元素中没有指定类就添加, 有就不添加
        // 会返回this方便链式编程
        console.log($("div").toggleClass("abc"));
        // console.log($("div").toggleClass("aabb abc"));

        // 没有传递参数, 删除所有类
        // console.log($("div").toggleClass());
      });
    </script>
  </head>
  <body>
    <div class="aabb abc"></div>
    <div class="aabb abc"></div>
  </body>
</html>

toggleClass实现原理

toggleClass: function (name) {
    if (arguments.length === 0) {
        this.removeClass();
    } else {
        // 1.对传入的类名进行切割
        var names = name.split(" ");
        // 2.遍历取出所有的元素
        this.each(function (key, ele) {
            // 3.遍历数组取出每一个类名
            $.each(names, function (k, value) {
                // 4.判断指定元素中是否包含指定的类名
                if ($(ele).hasClass(value)) {
                    // 删除
                    $(ele).removeClass(value);
                } else {
                    // 添加
                    $(ele).addClass(value);
                }
            });
        });
    }
    return this;
},

on

<!--
 * @Author: 码小余
 * @Date: 2020-06-28 07:25:19
 * @LastEditTime: 2020-06-28 07:51:46
 * @FilePath: \代码\jQuery原理\24-jQuery事件操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>24-jQuery事件操作相关方法</title>
    <script src="js/njQuery-1.4.0.js"></script>
    <script>
      $(function () {
        /*
            1.on(type, callback): 注册事件
            2.off(type, callback): 移出事件
        */
        /*
            1.注册多个相同类型事件, 后注册的不会覆盖先注册的
            2.注册多个不同类型事件, 后注册的不会覆盖先注册的
        */
        var btn = document.querySelector("button");
        function addEvent(dom, name, callBack) {
          if (!dom.eventsCache) {
            dom.eventsCache = {};
          }
          if (!dom.eventsCache[name]) {
            dom.eventsCache[name] = [];
            dom.eventsCache[name].push(callBack);
            if (dom.addEventListener) {
              dom.addEventListener(name, function () {
                for (var i = 0; i < dom.eventsCache[name].length; i++) {
                  dom.eventsCache[name][i]();
                }
              });
            } else {
              dom.attachEvent("on" + name, function () {
                for (var i = 0; i < dom.eventsCache[name].length; i++) {
                  dom.eventsCache[name][i]();
                }
              });
            }
          } else {
            dom.eventsCache[name].push(callBack);
          }
        }
        function test1() {
          alert("click1");
        }
        function test2() {
          alert("click2");
        }
        function test3() {
          alert("mouseenter");
        }
        function test4() {
          alert("mouseleave");
        }
        // btn.eventsCache = [test1, test2];
        addEvent(btn, "click", test1);
        addEvent(btn, "click", test2);
        addEvent(btn, "mouseenter", test3);
        addEvent(btn, "mouseleave", test4);
      });
    </script>
  </head>
  <body>
    <button>我是按钮1</button>
    <button>我是按钮2</button>
  </body>
</html>

on的实现原理

on: function (name, callBack) {
    // 1. 遍历取出所有元素
    this.each(function (key, ele) {
        // 2. 判断当前元素是否有保存所有事件的对象
        if (!ele.eventsCache) {
            ele.eventsCache = {};
        }
        // 3.判断对象中有没有对应类型的数组
        if (!ele.eventsCache[name]) {
            ele.eventsCache[name] = [];
            // 4.将回调函数添加到数据中
            ele.eventsCache[name].push(callBack);
            // 5.添加对应类型的事件
            njQuery.addEvent(ele, name, function () {
                njQuery.each(ele.eventsCache[name], function (k, method) {
                    method.call(ele);
                });
            });
        } else {
            // 6.将回调函数添加到数据中
            ele.eventsCache[name].push(callBack);
        }
    });
    return this;
},

off

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>26-jQuery事件操作相关方法</title>
    <!--<script src="../jQuery原理/js/jquery-1.12.4.js"></script>-->
    <script src="js/njQuery-1.4.0.js"></script>
    <script>
        $(function () {
            /*
                1.on(type, callback): 注册事件
                2.off(type, callback): 移出事件
            */
            function test1() {
                alert("hello click1");
            }
            function test2() {
                alert("hello click2");
            }
            function test3() {
                alert("hello mouseenter");
            }
            $("button").on("click", test1);
            $("button").on("click", test2);
            $("button").on("mouseenter", test3);

            /*
            btn.eventsCache = {
                click: [test1, test2],
                mouseenter: [test3]
            }
            */
            // 1.不传参, 会移除所有事件
            // $("button").off();
            // 2.传递一个参数, 会移除对应类型所有事件
            // $("button").off("click");
            // 3.传递两个参数, 会移除对应类型对应事件
            $("button").off("click", test1);
        });
    </script>
</head>
<body>
<button>我是按钮1</button>
<button>我是按钮2</button>
</body>
</html>

off的实现原理

off: function (name, callBack) {
    // 1. 判断是否没有传入参数
    if (arguments.length === 0) {
        this.each(function (key, ele) {
            ele.eventsCache = {};
        });
    }
    // 2. 判断是否传入一个参数
    else if (arguments.length === 1) {
        this.each(function (key, ele) {
            ele.eventsCache[name] = [];
        });
    }
    // 3. 判断是否传入两个参数
    else if (arguments.length === 2) {
        this.each(function (key, ele) {
            njQuery.each(ele.eventsCache[name], function (index, method) {
                if (method === callBack) {
                    ele.eventsCache[name].splice(index, 1);
                }
            });
        });
    }
    return this;
},

clone

<!--
 * @Author: 码小余
 * @Date: 2020-06-28 09:24:30
 * @LastEditTime: 2020-06-28 09:41:19
 * @FilePath: \代码\jQuery原理\27-jQueryDOM操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>27-jQueryDOM操作相关方法</title>

    <script src="js/njQuery-1.4.0.js"></script>
    <script>
      $(function () {
        /*
            1.clone: 复制一个元素
        */
        $("button")
          .eq(0)
          .on("click", function () {
            // 1. 浅复制一个元素
            var $li = $("li").clone(false);
            console.log($li);
            // 2. 将复制的元素添加到ul中
            $("ul").append($li);
          });

        $("button")
          .eq(1)
          .on("click", function () {
            // 1. 深复制一个元素
            var $li = $("li").clone(true);
            // 2. 将复制的元素添加到ul中
            $("ul").append($li);
          });

        /*
            li.eventsCache = {
                click: [];
            };
            */
        $("li").on("click", function () {
          alert($(this).html());
        });

        var li = document.querySelector("li");
        li.onclick = function (ev) {
          alert(123);
        };
        var temp = JSON.parse(JSON.stringify(li));
        var ul = document.querySelector("ul");
        ul.appendChild(temp);
      });
    </script>
  </head>
  <body>
    <button>浅复制节点</button>
    <button>深复制节点</button>
    <ul>
      <li>我是第1个li</li>
      <li>我是第2个li</li>
    </ul>
  </body>
</html>

clone的实现原理

clone: function (deep) {
    var res = [];
    // 判断是否是深复制
    if (deep) {
        // 深复制
        this.each(function (key, ele) {
            var temp = ele.cloneNode(true);
            // 遍历元素中的eventsCache对象
            njQuery.each(ele.eventsCache, function (name, array) {
                // 遍历事件对应的数组
                njQuery.each(array, function (index, method) {
                    // 给复制的元素添加事件
                    $(temp).on(name, method);
                });
            });
            res.push(temp);
        });
        return $(res);
    } else {
        // 浅复制
        this.each(function (key, ele) {
            var temp = ele.cloneNode(true);
            res.push(temp);
        });
        return $(res);
    }
},

jQuery原理第五天

addClass

removeClass

toggleClass

on

off

clone

使用c#强大的表达式树实现对象的深克隆之解决循环引用的问题

GPT-4o 引领人机交互新风向，向量数据库赛道沸腾了

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU启动那些事（12.A）- uSDHC eMMC启动时间(RT1170)

企业大模型如何成为自己数据的“百科全书”？

本地SSL证书过期输入命令在IIS自动生成

基于Ubuntu-22.04安装K8s-v1.28.2实验（二）使用kube-vip实现集群VIP访问

.NET周刊【5月第2期 2024-05-12】

Nodejs 內置模塊的基本使用

Nodejs 英雄管理系統

Nodejs Set和Map的使用

jQuery原理第五天

Nodejs 瞭解web服務器

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結