jQuery原理第四天

insertAfter

實現insertAfter需要用到原生JavaScript的nextSibling屬性

元素.insertAfter.指定元素 ==>將元素添加到指定元素外部的後面

insertAfter實現原理

insertAfter: function (sele) {
    // 1.統一的將傳入的數據轉換爲jQuery對象
    var $target = $(sele);
    var $this = this;
    var res = [];
    // 2.遍歷取出所有指定的元素
    $.each($target, function (key, value) {
        var parent = value.parentNode;
        var nextNode = $.get_nextsibling(value);
        // 2.遍歷取出所有的元素
        $this.each(function (k, v) {
            // 3.判斷當前是否是第0個指定的元素
            if (key === 0) {
                // 直接添加
                parent.insertBefore(v, nextNode);
                res.push(v);
            } else {
                // 先拷貝再添加
                var temp = v.cloneNode(true);
                parent.insertBefore(temp, nextNode);
                res.push(temp);
            }
        });
    });
    // 3.返回所有添加的元素
    return $(res);
},

replaceAll

function replaceAll(source, target) {
    // 1.將元素插入到指定元素的前面
    $(source).insertBefore(target);
    // 2.將指定元素刪除
    $(target).remove();
}
var p = document.querySelector("p");
var li = document.querySelector("li");
// replaceAll(p, li);

replaceAll實現原理

replaceAll: function (sele) {
    // 1.統一的將傳入的數據轉換爲jQuery對象
    var $target = $(sele);
    var $this = this;
    var res = [];
    // 2.遍歷取出所有指定的元素
    $.each($target, function (key, value) {
        var parent = value.parentNode;
        var nextNode = $.get_nextsibling(value);
        // 2.遍歷取出所有的元素
        $this.each(function (k, v) {
            // 3.判斷當前是否是第0個指定的元素
            if (key === 0) {
                // 1.將元素插入到指定元素的前面
                $(v).insertBefore(value);
                // 2.將指定元素刪除
                $(value).remove();
                res.push(v);
            } else {
                // 先拷貝再添加
                var temp = v.cloneNode(true);
                // 1.將元素插入到指定元素的前面
                $(temp).insertBefore(value);
                // 2.將指定元素刪除
                $(value).remove();
                res.push(temp);
            }
        });
    });
    // 3.返回所有添加的元素
    return $(res);
},

attr

<!--
 * @Author: 碼小余
 * @Date: 2020-06-26 10:55:03
 * @LastEditTime: 2020-06-26 10:58:53
 * @FilePath: \代碼\jQuery原理\15-jQuery屬性操作相關方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>15-jQuery屬性操作相關方法</title>
    <script src="js/njQuery-1.3.0.js"></script>
    <script>
      $(function () {
        /*
            1.attr(): 設置或者獲取元素的屬性節點值
        */
        // 傳遞一個參數, 返回第一個元素屬性節點的值
        // console.log($("span").attr("class"));
        // 傳遞兩個參數, 代表設置所有元素屬性節點的值
        // 並且返回值就是方法調用者
        // console.log($("span").attr("class", "abc"));
        // 傳遞一個對象, 代表批量設置所有元素屬性節點的值
        $("span").attr({
          class: "123",
          name: "888",
        });
      });
    </script>
  </head>
  <body>
    <span class="span1" name="it666"></span>
    <span class="span2" name="lnj"></span>
  </body>
</html>

attr實現原理

attr: function (attr, value) {
    // 1. 判斷是否是字符串
    if (njQuery.isString(attr)) {
        // 判斷是一個字符串還是兩個字符串
        if (arguments.length === 1) {
            return this[0].getAttribute(attr);
        } else {
            this.each(function (key, ele) {
                ele.setAttribute(attr, value);
            });
        }
    }
    // 2. 判斷是否是對象
    else if (njQuery.isObject(attr)) {
        var $this = this;
        // 遍歷取出所有屬性節點的名稱和對應的值
        $.each(attr, function (key, value) {
            // 遍歷取出所有的元素
            $this.each(function (k, ele) {
                ele.setAttribute(key, value);
            });
        });
    }
    return this;
},

prop

<!--
 * @Author: 碼小余
 * @Date: 2020-06-26 11:05:25
 * @LastEditTime: 2020-06-26 12:32:24
 * @FilePath: \代碼\jQuery原理\16-jQuery吧屬性操作相關方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>16-jQuery屬性操作相關方法</title>
    <!--<script src="js/jquery-1.12.4.js"></script>-->
    <script src="js/njQuery-1.3.0.js"></script>
    <script>
      $(function () {
        /*
            2.prop(): 設置或者獲取元素的屬性值
        */

        // 傳遞兩個參數, 代表設置所有元素屬性節點的值
        // 並且返回值就是方法調用者
        console.log($("span").prop("abc", "lnj"));

        // 傳遞一個參數, 返回第一個元素屬性節點的值
        console.log($("span").prop("abc"));

        // 傳遞一個對象, 代表批量設置所有元素屬性節點的值
        $("span").prop({
          aaa: "111",
          bbb: "222",
        });
      });
    </script>
  </head>
  <body>
    <span class="span1" name="it666"></span>
    <span class="span2" name="lnj"></span>
  </body>
</html>

prop實現原理

prop: function (attr, value) {
    // 1. 判斷是否是字符串
    if (njQuery.isString(attr)) {
        // 判斷是一個字符串還是兩個字符串
        if (arguments.length === 1) {
            return this[0][attr];
        } else {
            this.each(function (key, ele) {
                ele[attr] = value;
            });
        }
    }
    // 2. 判斷是否是對象
    else if (njQuery.isObject(attr)) {
        var $this = this;
        // 遍歷取出所有屬性節點的名稱和對應的值
        $.each(attr, function (key, value) {
            // 遍歷取出所有的元素
            $this.each(function (k, ele) {
                ele[key] = value;
            });
        });
    }
    return this;
},

css

<!--
 * @Author: 碼小余
 * @Date: 2020-06-26 11:22:58
 * @LastEditTime: 2020-06-26 11:23:55
 * @FilePath: \代碼\jQuery原理\17-jQuery屬性操作相關方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>17-jQuery屬性操作相關方法</title>
    <!--<script src="../jQuery原理/js/jquery-1.12.4.js"></script>-->
    <script src="js/njQuery-1.3.0.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 100px;
        height: 100px;
        background: red;
        margin-bottom: 10px;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background: blue;
        margin-bottom: 10px;
      }
    </style>
    <script>
      $(function () {
        /*
                3.css(): 設置獲取樣式
            */
        // 傳遞一個參數, 返回第一個元素指定的樣式
        // console.log($("div").css("height"));
        // 傳遞兩個參數, 代表設置所有元素樣式
        // 並且返回值就是方法調用者
        // console.log($("div").css("height", "50px"));
        // 傳遞一個對象, 代表批量設置所有元素樣式
        $("div").css({
          height: "50px",
          backgroundColor: "pink",
        });
        // 獲取樣式
        // var div = document.querySelector("div");
        // console.log(window.getComputedStyle(div)["height"]);
        // console.log(div.currentStyle["height"]);
        // 設置樣式
        // div.style["height"] = "200px";
      });
    </script>
  </head>
  <body>
    <div class="box1">div1</div>
    <div class="box2">div2</div>
  </body>
</html>

css實現原理

css: function (attr, value) {
    // 1. 判斷是否是字符串
    if (njQuery.isString(attr)) {
        // 判斷是一個字符串還是兩個字符串
        if (arguments.length === 1) {
            return njQuery.getStyle(this[0], attr);
        } else {
            this.each(function (key, ele) {
                ele.style[attr] = value;
            });
        }
    }
    // 2. 判斷是否是對象
    else if (njQuery.isObject(attr)) {
        var $this = this;
        // 遍歷取出所有屬性節點的名稱和對應的值
        $.each(attr, function (key, value) {
            // 遍歷取出所有的元素
            $this.each(function (k, ele) {
                ele.style[key] = value;
            });
        });
    }
    return this;
},

val

<!--
 * @Author: 碼小余
 * @Date: 2020-06-26 11:36:18
 * @LastEditTime: 2020-06-26 11:36:19
 * @FilePath: \代碼\jQuery原理\18-jQuery 屬性操作相關方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>18-jQuery屬性操作相關方法</title>
    <!--<script src="../jQuery原理/js/jquery-1.12.4.js"></script>-->
    <script src="js/njQuery-1.3.0.js"></script>
    <script>
      $(function () {
        /*
             4.val(): 獲取設置value的值
         */
        // 不傳遞參數, 返回第一個元素指定的樣式
        // console.log($('input').val());

        // 傳遞兩個參數, 代表設置所有元素樣式
        // 並且返回值就是方法調用者
        console.log($("input").val("新設置的"));

        /*
            var input = document.querySelector("input");
            // input.setAttribute("value", "123456");
            var btn = document.querySelector("button");
            btn.onclick = function (ev) {
                // console.log(input.getAttribute("value"));
                // console.log($('input').val());
                console.log(input.value);
            }
            */
      });
    </script>
  </head>
  <body>
    <button>獲取</button>
    <input type="text" value="默認值1" />
    <input type="text" value="默認值2" />
  </body>
</html>

val實現原理

val: function (content) {
    if (arguments.length === 0) {
        return this[0].value;
    } else {
        this.each(function (key, ele) {
            ele.value = content;
        });
        return this;
    }
},

hasClass

<!--
 * @Author: 碼小余
 * @Date: 2020-06-26 12:06:00
 * @LastEditTime: 2020-06-26 12:08:32
 * @FilePath: \代碼\jQuery原理\19-jQuery屬性操作相關方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>19-jQuery屬性操作相關方法</title>
    <!--<script src="../jQuery原理/js/jquery-1.12.4.js"></script>-->
    <script src="js/njQuery-1.3.0.js"></script>
    <script>
      $(function () {
        /*
            5.hasClass(): 判斷元素中是否包含指定類
         */
        // 傳遞參數, 只要調用者其中一個包含指定類就返回true,否則返回false
        // console.log($("div").hasClass("cc"));
        // console.log($("div").hasClass("abc"));
        // console.log($("div").hasClass("bb"));
        // 沒有傳遞參數, 返回false
        console.log($("div").hasClass());
        /*
            var div = document.querySelector("div");
            // console.log(div.getAttribute("class"));
            // console.log(div.className);
            // 1.獲取元素中class保存的值
            var className = " "+div.className+" ";
            // 2.通過indexOf判斷是否包含指定的字符串
            // console.log(className.indexOf("abc") != -1);
            // console.log(className.indexOf("bb"));
            // console.log(className.indexOf(" "+"bb"+" "));
            console.log(className.indexOf(" "+"dd"+" "));
            */
      });
    </script>
  </head>
  <body>
    <div class="aabb cc dd"></div>
    <div class="aabb bb"></div>
  </body>
</html>

hasClass實現原理

hasClass: function (name) {
    var flag = false;
    if (arguments.length === 0) {
        return flag;
    } else {
        this.each(function (key, ele) {
            // 1.獲取元素中class保存的值
            var className = " " + ele.className + " ";
            // 2.給指定字符串的前後也加上空格
            name = " " + name + " ";
            // 3.通過indexOf判斷是否包含指定的字符串
            if (className.indexOf(name) != -1) {
                flag = true;
                return false;
            }
        });
        return flag;
    }
},

jQuery原理第四天

insertAfter

replaceAll

attr

css

val

hasClass

如何基於surging跨網關跨語言進行緩存降級

2024合集

程序員天天 CURD，怎麼才能成長，職業發展的思考(2)

移位操作搞定兩數之商

教你用Perl實現Smgp協議

如何通過前端表格控件在10分鐘內完成一張分組報表？

win11關閉自動檢測病毒刪文件

通用代碼生成器簡介

lightdb 單機模式下數據庫平移

千兆寬帶實際網速能到達多少？

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