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

35K*14 薪，入職了！這公司只要不裁員，我能一直呆下去！

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以太網驅動總結