jQuery原理——26——根据dom操作（insertBefore,replaceAll）编写自己的jQuery框架

最新推荐文章于 2021-09-06 11:10:01 发布
最新推荐文章于 2021-09-06 11:10:01 发布
阅读量175 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x1037490413/article/details/103482847
版权

文章目录

HTML测试代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="../jQuery/jquery-3.4.1.min.js"></script> -->
    <script src="../jQuery/sjQuery.js"></script>
    <script>
        $(function () {
            var btn = document.getElementsByTagName('button')[0];
            btn.onclick = function () {
                //insertBefore和prependTo类似，不同的是insertBefore是将元素插入到外部的最前面
                // $("p").insertBefore(".item");
                function insertBefore(source, target) {
                    /*
                    调用者.insertBefore(插入的元素，参考的元素);
                    insertBefore方法，调用者是谁就会将元素插入到谁里面

                    思路，可以找参考元素的父级元素body,这样插入的元素和参考的元素就是同级的了
                    */
                    //1.拿到指定元素的父元素
                    var parent = target.parentNode;
                    //2.利用指定元素的父元素来调用insertBefore方法
                    parent.insertBefore(source, target)

                }
                var p = document.querySelector('p');
                var div = document.querySelector('div');
                // insertBefore(p, div);

                //replace方法
                $("p").replaceAll("li");
        
                //原生js实现方法
                function replaceAll(source, target) {
                    //思路：将p插入到li前面，再将li删除

                //1.将元素插入到指定元素的前面
                $(source).insertBefore(target);
                //2.将指定元素删除
                $(target).remove();
                }
                var p = document.querySelector("p");
                var li = document.querySelector("li");
                // replaceAll(p, li);
            }
        });
    </script>
</head>

<body>
    <button>测试方法</button>
    <div class="item">
        <p>我是段落</p>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
    </div>
    <div class="item">
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
    </div>
</body>

</html>

编写自己的jQuery框架 sjQuery.js 代码389-448行

 (function (window, undefined) {
     var sjQuery = function (selector) {
         return new sjQuery.prototype.init(selector);
     }
     sjQuery.prototype = { //原型
         constructor: sjQuery,
         init: function (selector) {
             //0.去除字符串两边的空格 
             selector = sjQuery.trim(selector);
             //1.传入'' null undefined NaN 0 false,返回空的jQuery对象
             if (!selector) {
                 return this;
             } else if (sjQuery.insFuntion(selector)) {
                 // console.log('是方法');
                 sjQuery.ready(selector); //把传递进来的回调函数传递给ready方法

             }
             //2.字符串
             else if (sjQuery.isString(selector)) {
                 //2.1判断是否是代码片段<a>
                 if (sjQuery.isHTML(selector)) {
                     //console.log('代码片段');
                     //1.根据代码片段创建所有的元素
                     var temp = document.createElement('div');
                     temp.innerHTML = selector;
                     // console.log(temp);
                     //2.将创建好的一级元素添加到jQuery当中
                     //   console.log(temp.children);//children方法
                     //  for (var i = 0; i < temp.children.length; i++) {
                     //      this[i] = temp.children[i];
                     //  }
                     //3.给jQuery对象添加length属性

                     //简化第2,3步
                     [].push.apply(this, temp.children);
                     //4.返回加工好的this(jQuery)
                     //  return this;
                 }
                 //2.2判断是否是选择器
                 else {

                     // 1.根据传入的选择器找到对应的元素
                     var res = document.querySelectorAll(selector);
                     // 2.将找到的元素添加到sjQuery上
                     [].push.apply(this, res);
                     // 3.返回加工上的this
                     //  return this;
                 }


             } //3.数组
             //   else if(typeof selector==='object'&&'length' in selector&&selector!==window){//window也是对象，并且length=0
             /*
           //3.1真数组
           if(({}).toString.apply(selector)==="[object Array]"){
            //   console.log('真数组');
            //真数组转换为伪数组
            [].push.apply(this,selector);
            // return this;
               
           }
           //3.2伪数组
           else{
        //    console.log('伪数组');
        //企业开发中，要将自定义伪数组转换为伪数组，首先将它转换为真数组
        //因为IE8及以下不能直接将自定义的伪数组包装成伪数组返回
        //将自定义的伪数组转换为真数组
        var arr=[].slice.call(selector);
        //将真数组转换为伪数组
        [].push.apply(this,arr);
        return this;
        
           }
           */
             //简化以上代码
             //将自定义的伪数组转换为真数组
             else if (sjQuery.isArray(selector)) {
                 var arr = [].slice.call(selector);
                 //将真数组转换为伪数组
                 [].push.apply(this, arr);
                 //   return this;
             }
             //除上述类型以外
             else {
                 this[0] = selector; //将其保存到jQuery
                 this.length = 1;
                 //  return this;
             }
             return this;
         },
         jQuery: "3.4.1", //模拟版本号
         selector: "", //默认为空
         length: 0,

         //[].push找到数组的push方法
         //冒号前面的push将由sjQuery对象调用

         //相当于[].push.apply(this);，把push内部的this替换成sjQUery对象
         push: [].push,
         sort: [].sort,
         splice: [].splice,
         toArray: function () {
             return [].slice.call(this);
         },
         get: function (num) {
             //没有传递参数
             if (arguments.length === 0) {
                 return this.toArray();
             }
             //传递参数，参数不是负数
             else if (num >= 0) {
                 return this[num];
             }
             //传递负数
             else {
                 return this[this.length + num];
             }
         },
         eq: function (num) {
             // 没有传递参数
             if (arguments.length === 0) {
                 return new sjQuery();
             } else {
                 return sjQuery(this.get(num));
             }
         },
         first: function (num) {
             return this.eq(0);
         },
         last: function (num) {
             return this.eq(-1);
         },
         each: function (fn) {
             return sjQuery.each(this, fn);
         },
         map: function (obj, fn) {

         }

     }
     sjQuery.extend = sjQuery.prototype.extend = function (obj) {
         for (var key in obj) {
             this[key] = obj[key];
         }
     }
     sjQuery.extend({ //key/value
         isString: function (str) {
             return typeof str === "string"
         },
         isHTML: function (str) {
             return str.charAt(0) == "<" && str.charAt(str.length - 1) == ">" && str.length >= 3
         },
         trim: function (str) {
             //如果不是字符串，则不用去除空格
             if (!sjQuery.isString(str)) {
                 return str;
             }
             //判断是否支持trim方法
             if (str.trim) {
                 return str.trim();
             } else {
                 return str.replace(/^\s+|\s+$/g, ''); //用空串代替空格字符串
             }
         },
         isObject: function (sele) {
             return typeof sele === "object"
         },
         isWindow: function (sele) {
             return sele === window;
         },
         isArray: function (sele) {
             if (sjQuery.isObject(sele) &&
                 !sjQuery.isWindow(sele) &&
                 "length" in sele) {
                 return true;
             }
             return false;
         },
         insFuntion: function (sele) {
             return typeof sele === 'function';
         },
         ready: function (fn) { //当传入的是方法函数类型，当判断页面的DOM元素加载完后开始执行代码，比如body里有div，若没有等dom加载完就执行代码，会找不到div
             //判断DOM是否加载完毕
             if (document.readyState == "complete") {
                 fn(); //直接回调
             } else if (document.addEventListener) { //如果浏览器兼容此方法
                 document.addEventListener('DOMContentLoaded', function () {
                     fn();
                 })
             } else {
                 document.attachEvent('onreadystatechange', function () { //attachEvent不兼容火狐谷歌
                     if (document.readyState == "complete") {
                         fn();
                     }
                 })
             }

         },
         each: function (obj, fn) {
             // 1.判断是否是数组
             if (sjQuery.isArray(obj)) {
                 for (var i = 0; i < obj.length; i++) {
                     // var res = fn(i, obj[i]);
                     var res = fn.call(obj[i], i, obj[i]);
                     if (res === true) {
                         continue;
                     } else if (res === false) {
                         break;
                     }
                 }
             }
             // 2.判断是否是对象
             else if (sjQuery.isObject(obj)) {
                 for (var key in obj) {
                     // var res = fn(key, obj[key]);
                     var res = fn.call(obj[key], key, obj[key]);
                     if (res === true) {
                         continue;
                     } else if (res === false) {
                         break;
                     }
                 }
             }
             return obj;
         },
         map: function (obj, fn) {
             var res = [];
             // 1.判断是否是数组
             if (sjQuery.isArray(obj)) {
                 for (var i = 0; i < obj.length; i++) {
                     var temp = fn(obj[i], i);
                     if (temp) {
                         res.push(temp);
                     }
                 }
             }
             // 2.判断是否是对象
             else if (sjQuery.isObject(obj)) {
                 for (var key in obj) {
                     var temp = fn(obj[key], key);
                     if (temp) {
                         res.push(temp);
                     }
                 }
             }
             return res;
         }
     });
     sjQuery.prototype.extend({
         empty: function () {
             //1.遍历所有找到的元素
             this.each(function (key, value) {
                 value.innerHTML = "";
             });
             //2.方便链式编程
             return this;
         },
         remove: function (sele) {
             if (arguments.length == 0) {
                 //1.遍历指定的元素
                 this.each(function (key, value) {
                     //js中，元素不能删除自己，只能通过这个元素找到其父元素，再通过父元素删除它
                     //根据遍历到的元素找到对象的父元素
                     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 (k, v) {
                         //4.获取指定元素的类型
                         var t = v.tagName;
                         //5.判断找到元素的类型和指定元素的类型
                         if (t === type) {
                             //根据遍历到的元素找到对象的父元素
                             var parent = value.parentNode;
                             //通过父元素删除指定的元素
                             parent.removeChild(value);
                         }
                     })
                 })


             }

             return this;
         },
         html: function (content) {
             if (arguments.length === 0) { //没有传参
                 return this[0].innerHTML;
             } 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: function (sele) {
             var $target = $(sele);
             var $this = this; //$("p").appendTo(".item");p是source元素，也就是this，谁调用谁就是this
             var res = [];
             //1.1遍历取出所有指定的元素target
             $.each($target, function (key, value) {

                 //1.11遍历取出所有的元素source
                 $this.each(function (k, v) {
                     //1.2判断当前是否是第0个指定的元素 因为本来放在了第一个div后面的p,在遍历到第二个div时，将第一个div的p放到了第二个div后面，所以需要克隆p
                     if (key === 0) {
                         //直接添加
                         value.appendChild(v);
                         res.push(v);
                     } else {
                         //先拷贝再添加
                         var temp = v.cloneNode(true);
                         value.appendChild(temp);
                         res.push(temp);
                     }
                 })


             });
             //返回所有添加的元素
             return $(res);
         },
         prependTo: function (sele) {
             //统一将传入的数据转换为jQuery对象
             var $target = $(sele);
             var $this = this; //$("p").appendTo(".item");p是source元素，也就是this，谁调用谁就是this
             var res = [];
             //1.1遍历取出所有指定的元素target
             $.each($target, function (key, value) {

                 //1.11遍历取出所有的元素source
                 $this.each(function (k, v) {
                     //1.2判断当前是否是第0个指定的元素 因为本来放在了第一个div后面的p,在遍历到第二个div时，将第一个div的p放到了第二个div后面，所以需要克隆p
                     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);
                     }
                 })


             });
             //返回所有添加的元素
             return $(res);
         },
         append: function (sele) {
             //判断传入的参数是否是字符串
             if (sjQuery.isString(sele)) { //如果是字符串，直接添加
                 this[0].innerHTML += sele; //jQuery对象没有innerHTML,只有原生的DOM元素中才有，要从对象上取出DOM元素，就是this[0]
             } else {
                 $(sele).appendTo(this); //顺序和appendTo相反，其他功能都是一样的
             }
             return this;
         },
         prepend: function (sele) {
             //判断传入的参数是否是字符串
             if (sjQuery.isString(sele)) { //如果是字符串，直接添加
                 this[0].innerHTML = sele + this[0].innerHTML; //jQuery对象没有innerHTML,只有原生的DOM元素中才有，要从对象上取出DOM元素，就是this[0]
             } else {
                 $(sele).prependTo(this); //顺序和appendTo相反，其他功能都是一样的
             }
             return this;
         },
         insertBefore: function (sele) {
             //统一将传入的数据转换为jQuery对象
             var $target = $(sele);
             var $this = this; //$("p").appendTo(".item");p是source元素，也就是this，谁调用谁就是this
             var res = [];
             //1.1遍历取出所有指定的元素target
             $.each($target, function (key, value) {
                 var parent = value.parentNode;
                 //1.11遍历取出所有的元素source
                 $this.each(function (k, v) {
                     //1.2判断当前是否是第0个指定的元素 因为本来放在了第一个div后面的p,在遍历到第二个div时，将第一个div的p放到了第二个div后面，所以需要克隆p
                     if (key === 0) {
                         //直接添加
                         parent.insertBefore(v, value);
                         res.push(v);
                     } else {
                         //先拷贝再添加
                         var temp = v.cloneNode(true);
                         parent.insertBefore(temp, value);
                         res.push(temp);
                     }
                 })


             });
             //返回所有添加的元素
             return $(res);
         },
         replaceAll: function (sele) {
             // 1.统一的将传入的数据转换为jQuery对象
             var $target = $(sele);
             var $this = this;
             var res = [];
             // 2.遍历取出所有指定的元素
             $.each($target, function (key, value) {
                 var parent = value.parentNode;
                 // 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);
         }
     })
     sjQuery.prototype.init.prototype = sjQuery.prototype;
     window.sjQuery = window.$ = sjQuery;
 })(window);
野生小米椒
关注
专栏目录
Web前端开发技术（JQuery+Ajax）——第四章 JQuery操作DOM
m0_62096596的博客
03-21 459
Web前端开发技术（JQuery+Ajax）——第四章 JQuery操作DOM
锋利的jQuery jQuery中的DOM操作
10-29
标题中提到的知识点是关于jQuery中的DOM操作。DOM（文档对象模型）操作是编程语言中处理XML或HTML文档的标准编程接口。而jQuery是一个快速、小巧且功能丰富的JavaScript库，通过简化HTML文档遍历和事件处理以及AJAX...
JS中实现replaceAll的方法(实例代码)
10-26
本文是对JS中实现replaceAll的方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
利用insertBefore方法和appendChild方法实现一个insertAfter函数
cccccl的博客
03-23 2625
我们知道DOM API中有inserBefore和appendChild方法，但是好像并没有insertAfter方法（将一个结点插入另一个节点的后面）。其实也insertAfter也不是很有必要，我们也可以利用inserBefore和appendChild自己写一个insertAfter函数。 一、insertBefore的用法： 该Node.insertBefore()方法在参考节点之前插入一个节点，作为指定父节点的子节点。 let insertedNode = parentNode.insertBef
JavaScript 替换全部 replaceAll 方法
10-16 1211
我们知道javascript里面有个replace 方法，不过该方法只能替换匹配到的第一个，如果字符串里面有多个匹配，那么这个方法是实现不了的，那么我们应该如何来实现一个方法替换所有关联的字符呢，如下：   String.prototype.replaceAll = function (oldStr, newStr) { return this.replace(new RegExp(
js replaceAll
钟离彧
10-10 265
正则方法显然有问题。 这个才对 String.prototype.replaceAll = function(s1,s2){ var str = this; while (str.indexOf(s1) >= 0){ str = str.replace(s1, s2); } return str; }
js replaceAll函数
a1669000102的博客
09-04 3479
js中没有java中的replaceAll()函数,为了达到与java的replaceAll()一样的效果,我们可以用如下代码实现: String.prototype.replaceAll = function(s1,s2) { return this.replace(new RegExp(s1,"gm"),s2); } 调用方式: 如想替换字符串”aa bb cc”中的所有空...
jQuery 中DOM 操作详解
12-09
jQuery的这些DOM操作大大简化了JavaScript的DOM操作，提高了代码的可读性和效率，使得开发者能更专注于业务逻辑而不是底层的DOM操作。通过熟练掌握这些方法，开发者可以高效地创建交互式的Web应用。
jQuery 中的 DOM 操作
11-23
在JavaScript的世界里，jQuery库为DOM操作提供了极大的便利性，使得开发者可以更加高效地操作HTML文档。DOM（Document Object Model）是一种标准化的、与语言无关的接口，用于处理XML或HTML文档，允许程序和脚本动态...
jQuery学习笔记之jQuery的DOM操作
10-28
本知识点主要围绕如何使用jQuery进行DOM操作，包括节点的查找与操作、属性与样式的操作以及内容的操作。 一、节点的操作 节点操作是jQuery DOM操作中最为基础的部分，涉及到查找、创建、追加、删除、复制和替换节点...
js replace replaceAll
chuoqiahao3606的博客
09-11 272
字符串.replace(newRegExp(要查找的字符,'g'),要替换的字符) 转载于:https://my.oschina.net/u/1389061/blog/505080...
js 实现ReplaceAll
Coding13的博客
10-23 6030
原生js中并没有replaceAll方法，只有replace，如果要将字符串替换，一般使用replace，但是replace只会替换找到的第一个原字符。这里结合自己的使用介绍一下JS实现replaceAll。 方法一、正则表达式替换（“-”“+”）//替换所有减号 var str = '2017-10-23'; //g表示执行全局匹配（查找所有匹配而非在找到第一个匹配后停止） var result
JS replaceAll方法
m0_58555378的博客
09-06 787
JS 字符串替换操作有replace() 方法。但是这个方法有些问题，就是只能替换目标字符串中第一个匹配的字符串。 如下例： var str = "wordwordwordword"; var strNew = str.replace("word","Excel"); alert(strNew); 如果要将目标字符串全部替换的话，java里可以用replaceAll，但是JS 没有提供这样的方法。使用正则表达式可以达到replaceAll的效果： str.replace(/word/g,"
js全部替换replaceAll
qq_16884279的博客
08-27 348
sqlText.replace(new RegExp(oldStr, 'g'), newStr); RegExp代表正则表达式 g代表全部替换，默认replace只会替换第一个查找到的字符
js replaceALL方法
波波的专栏
01-19 7559
js本身没有提供该方法，但是用个正则可以做到。下面是将文本域里面的半角双引号全部替换成全角双引号。                                 function replaceAll()            {                var str = document.all(book).value;                var newValu
在js中使用replaceAll 替换字符串
Reiner的专栏
09-17 649
str.replace(eval(正则表达式),要替换的字符串); 这次遇到的问题是 要替换 这样的 [0] 替换成 [1]  等等  结果怎么也无法成功， 最后 改成这样了str.replace(eval(/\[0\]/),'[1]'); 结果还是不行， 最后终于找到问题， 正则表达式转义居然要两个斜杆，于是： str.replace(eval(/\\[0\\]/),'[1
JavaScript中实现replaceAll方法
热门推荐
Asurplus
07-17 21万+
我们在Java中可以使用replaceAll()方法对字符串进行批量替换，但在JS中replaceAll()方法是undefined，JS中只存在replace()方法，因此我们可以自己封装JS中replaceAll()方法供我们便捷使用。 一、使用replace()方法进行替换 定义一个字符串： var str = "hello world"; 使用replace()方法将字符串中的字母...
js replace 和 replaceAll
No8g攻城狮的博客
09-06 487
js中的replace方法和自定义replaceAll方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>String字符串测试</title> </head> <body> ...
JS实现replaceAll方法
Satsuki.Cyan的博客
03-06 1454
用正则的方式去replace // 去掉字符串中的“逗号” var str = "2,333,333,333"; str.replace(new RegExp(/,/g),"")
jQuery 1.9.1 源码解析：DOM 操作与 domManip 函数
文中提到了jQuery的`jQuery.each`循环，这个循环将后五种DOM操作（appendTo、prependTo、insertBefore、insertAfter、replaceAll）映射到它们的基础操作（append、prepend、before、after、replaceWith）。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值