jQuery DOM操作

empty/remove

<!--
 * @Author: 碼小余
 * @Date: 2020-06-24 16:07:12
 * @LastEditTime: 2020-06-24 17:06:02
 * @FilePath: \代碼\jQuery原理\07-jQueryDOM操作相關方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>07-jQueryDOM操作相關方法</title>
    <script src="js/njQuery-1.2.0.js"></script>
    <script>
      $(function () {
        /*
            DOM 操作:
             1、empty ==> 清空指定元素中的所有內容
             2、remove ==> 刪除所有的元素或指定元素
            */
        var btn = document.getElementsByTagName("button")[0];
        btn.addEventListener("click", function () {
          //   $("div").empty();
          //   console.log($("div").empty());

          //   $("div").remove();
          // console.log($("div").remove());
          $("div").remove(".box");
        });
      });
    </script>
  </head>
  <body>
    <button>調用remove</button>
    <div>
      我是div
      <p>我是段落</p>
    </div>
    <div class="box">
      我是div
      <p>我是段落</p>
    </div>
    <p class="box"></p>
  </body>
</html>

empty/remove 實現原理

empty: function () {
    // 1. 遍歷指定的元素
    this.each(function (key, value) {
        value.innerHTML = "";
    });
    // 方便鏈式編程
    return this;
},
remove: function (sele) {
    if (arguments.length === 0) {
        // 1.遍歷指定的元素
        this.each(function (key, value) {
            // 根據遍歷到的元素找到對應的父元素
            var parent = value.parentNode;
            // 通過父元素刪除指定的元素
            parent.removeChild(value);
        });
    } else {
        var $this = this;
        // 1. 根據傳入的選擇器找到對應的元素
        $(sele).each(function (key, value) {
            // 2. 遍歷找到的元素，獲取對應的類型
            var type = value.tagName;
            // 3.遍歷指定的元素
            $this.each(function (key, value) {
                // 4. 獲取指定元素的類型
                var t = value.tagName;
                // 5. 判斷找到的元素的類型和指定元素的類型是否相等
                if (t === type) {
                    // 根據遍歷到的元素找到對應的父元素
                    var parent = value.parentNode;
                    // 通過父元素刪除指定的元素
                    parent.removeChild(value);
                }
            });
        });
    }
    return this;
},

html/text

<!--
 * @Author: 碼小余
 * @Date: 2020-06-24 17:14:52
 * @LastEditTime: 2020-06-24 17:29:31
 * @FilePath: \代碼\jQuery原理\08-jQueryDOM操作相關方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>08-jQueryDOM操作相關方法</title>
    <script src="js/njQuery-1.2.0.js"></script>
    <script>
      $(function () {
        /*
        DOM 操作:
        3、html ==> 設置所有元素的內容，獲取第一個元素的內容
        4、text ==> 設置所有元素的文本內容，獲取所有元素的文本內容
        */
        var btn = document.getElementsByTagName("button")[0];
        btn.addEventListener("click", function () {
          var $div = $("div");
          //   console.log($div.html());
          //   $div.html("123");
          //   $div.html("<div><span>我是span</span></div>");
          //   console.log($div.text());
          //   $div.text("123");
          $div.text("<div><span>我是span</span></div>");
        });
      });
    </script>
  </head>
  <body>
    <button>調用text</button>
    <div>
      我是div1
      <p>我是段落1</p>
    </div>
    <div class="box">
      我是div2
      <p>我是段落2</p>
    </div>
  </body>
</html>

html/text實現原理

html: function (content) {
    if (arguments.length === 0) {
        return this[0];
    } else {
        this.each(function (key, value) {
            value.innerHTML = content;
        });
    }
},
text: function (content) {
    if (arguments.length === 0) {
        var res = "";
        this.each(function (key, value) {
            res += value.innerText;
        });
        return res;
    } else {
        this.each(function (key, value) {
            value.innerText = content;
        });
    }
},

appendTo

<!--
 * @Author: 碼小余
 * @Date: 2020-06-24 17:52:32
 * @LastEditTime: 2020-06-25 09:03:56
 * @FilePath: \代碼\jQuery原理\09-jQueryDOM操作相關方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/njQuery-1.2.0.js"></script>
    <script>
      $(function () {
        /*
             DOM 操作:
             5、元素.appendTo.指定元素 ==> 將元素添加到指定元素內部的最後
             */
        var btn = document.getElementsByTagName("button")[0];
        btn.onclick = function () {
          /*
        特點:
        1.如果指定元素有多個,會將元素拷貝多份添加到指定元素中
        2.給appendTo方法傳遞字符串, 會根據字符串找到所有對應元素後再添加
        3.給appendTo方法傳遞jQuery對象,會將元素添加到jQuery對象保存的所有指定元素中
        4.給appendTo方法傳遞DOM元素, 會將元素添加到所有指定DOM元素中
        */
          // 接收一個字符串 $(".item"); ==> jQuery
          // $("p").appendTo(".item");
          // 接收一個jQuery對象  $($("div")); ==> jQuery
          // $("p").appendTo($("div"));
          // 接收一個DOM元素 $(divs);  ==> jQuery
          // var divs = document.querySelectorAll("div");
          // $("p").appendTo(divs);
          console.log($("p").appendTo(".item"));
        };
      });
    </script>
  </head>
  <body>
    <button>調用appendTo</button>
    <p>我是段落</p>
    <p>我是段落</p>
    <div class="item">
      <li>1我是第1個li</li>
      <li>1我是第2個li</li>
      <li>1我是第3個li</li>
    </div>
    <div class="item">
      <li>1我是第1個li</li>
      <li>1我是第2個li</li>
      <li>1我是第3個li</li>
    </div>
  </body>
</html>

appendTo實現原理

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

prependTo

<!--
 * @Author: 碼小余
 * @Date: 2020-06-25 09:11:01
 * @LastEditTime: 2020-06-25 09:23:03
 * @FilePath: \代碼\jQuery原理\10-jQueryDOM操作相關方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>10-jQueryDOM操作相關方法</title>
    <script src="js/njQuery-1.2.0.js"></script>
    <script>
      $(function () {
        /*
        DOM 操作:
        7、元素.prependTo.指定元素 ==> 將元素添加到指定元素內部的最前面
        */
        var btn = document.getElementsByTagName("button")[0];
        btn.onclick = function () {
          // 接收一個字符串 $(".item"); ==> jQuery
          //   $("p").prependTo(".item");

          // 接收一個jQuery對象  $($("div")); ==> jQuery
          // $("p").prependTo($("div"));

          // 接收一個DOM元素 $(divs);  ==> jQuery
          // var divs = document.querySelectorAll("div");
          // $("p").prependTo(divs);

          console.log($("p").prependTo(".item"));
        };
        // function prependTo(source, target) {
        //   /*
        // 調用者.insertBefore(插入的元素, 參考的元素);
        // insertBefore方法, 調用者是誰就會將元素插入到誰裏面
        // */
        //   target.insertBefore(source, target.firstChild);
        // }
        // var p = document.querySelector("p");
        // var div = document.querySelector("div");
        // prependTo(p, div);
      });
    </script>
  </head>
  <body>
    <button>調用prependTo</button>
    <p>我是段落</p>
    <p>我是段落</p>
    <div class="item">
      <li>1我是第1個li</li>
      <li>1我是第2個li</li>
      <li>1我是第3個li</li>
    </div>
    <div class="item">
      <li>1我是第1個li</li>
      <li>1我是第2個li</li>
      <li>1我是第3個li</li>
    </div>
  </body>
</html>

prependTo實現原理

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

append

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-jQueryDOM操作相關方法</title>
    <!--<script src="js/jquery-1.12.4.js"></script>-->
    <script src="js/njQuery-1.2.0.js"></script>
    <script>
        $(function () {
            /*
             DOM 操作:
             6、指定元素.append.元素 ==> 將元素添加到指定元素內部的最後
             */
            var btn = document.getElementsByTagName("button")[0];
            btn.onclick = function () {
                // 接收一個字符串
                // $("p").appendTo(".item");
                $(".item").append("p");
                // $(".item").append("<span>我是span</span>");
                // console.log($(".item").append("p"));

                // 接收一個jQuery對象  $($("div")); ==> jQuery
                // $("div").append($("p"));

                // 接收一個DOM元素 $(divs);  ==> jQuery
                // var divs = document.querySelectorAll("div");
                // var ps = document.querySelectorAll("p");
                // $(divs).append(ps);
            }
        });
    </script>
</head>
<body>
<button>調用append</button>
<p>我是段落</p>
<p>我是段落</p>
<div class="item">
    <li>1我是第1個li</li>
    <li>1我是第2個li</li>
    <li>1我是第3個li</li>
</div>
<div class="item">
    <li>1我是第1個li</li>
    <li>1我是第2個li</li>
    <li>1我是第3個li</li>
</div>
</body>
</html>

append實現原理

appped: function (sele) {
    // 判斷傳入的參數是否是字符串
    if (njQuery.isString(sele)) {
        this[0].innerHTML += sele;
    } else {
        $(sele).appendTo(this);
    }
    return this;
},

prepend

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-jQueryDOM操作相關方法</title>
    <!--<script src="js/jquery-1.12.4.js"></script>-->
    <script src="js/njQuery-1.2.0.js"></script>
    <script>
        $(function () {
            /*
             DOM 操作:
             8、指定元素.prepend.元素 ==> 將元素添加到指定元素內部的最前面
             */
            var btn = document.getElementsByTagName("button")[0];
            btn.onclick = function () {
                // 接收一個字符串
                // $("p").prependTo(".item");
                // $(".item").prepend("p");
                // $(".item").prepend("<span>我是span</span>");
                console.log($(".item").prepend("p"));

                // 接收一個jQuery對象  $($("div")); ==> jQuery
                // $("div").prepend($("p"));

                // 接收一個DOM元素 $(divs);  ==> jQuery
                // var divs = document.querySelectorAll("div");
                // var ps = document.querySelectorAll("p");
                // $(divs).prepend(ps);
            }
        });
    </script>
</head>
<body>
<button>調用prepend</button>
<p>我是段落</p>
<div class="item">
    <li>1我是第1個li</li>
    <li>1我是第2個li</li>
    <li>1我是第3個li</li>
</div>
</body>
</html>

prepend實現原理

prepend: function (sele) {
    // 判斷傳入的參數是否是字符串
    if (njQuery.isString(sele)) {
        this[0].innerHTML = sele + this[0].innerHTML;
    } else {
        $(sele).prependTo(this);
    }
    return this;
},

insertBefore

<!--
 * @Author: 碼小余
 * @Date: 2020-06-25 10:15:53
 * @LastEditTime: 2020-06-25 10:16:13
 * @FilePath: \代碼\jQuery原理\13-jQueryDOM操作相關方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>13-jQueryDOM操作相關方法</title>
    <!--<script src="js/jquery-1.12.4.js"></script>-->
    <script src="js/njQuery-1.2.0.js"></script>
    <script>
      $(function () {
        /*
             DOM 操作:
             元素.insertBefore.指定元素  ==>將元素添加到指定元素外部的前面
             */
        var btn = document.getElementsByTagName("button")[0];
        btn.onclick = function () {
          // 接收一個字符串 $(".item"); ==> jQuery
          // $("p").prependTo(".item");
          $("p").insertBefore(".item");

          // 接收一個jQuery對象  $($("div")); ==> jQuery
          // $("p").insertBefore($("div"));

          // 接收一個DOM元素 $(divs);  ==> jQuery
          // var divs = document.querySelectorAll("div");
          // $("p").insertBefore(divs);

          console.log($("p").insertBefore(".item"));
        };
        function insertBefore(source, target) {
          /*
                調用者.insertBefore(插入的元素, 參考的元素);
                insertBefore方法, 調用者是誰就會將元素插入到誰裏面
                */
          // 1.拿到指定元素的父元素
          var parent = target.parentNode;
          // 2.利用指定元素的父元素來調用insertBefore方法
          parent.insertBefore(source, target);
        }
        var p = document.querySelector("p");
        var div = document.querySelector("div");
        // insertBefore(p, div);
      });
    </script>
  </head>
  <body>
    <button>調用insertBefore</button>
    <div class="item">
      <p>我是段落</p>
      <li>1我是第1個li</li>
      <li>1我是第2個li</li>
      <li>1我是第3個li</li>
    </div>
  </body>
</html>

insertBefore實現原理

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

jQuery原理第三天

jQuery DOM操作

empty/remove

html/text

appendTo

prependTo

append

prepend

insertBefore

如何基於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以太網驅動總結