JQuery18(JQ原理 DOM元素 appendTo append prepend prependTo InsertBefore Before JReplaceAll）

最近工作比较多 Jq 原理也做到操作DOM阶段 JS还是不熟悉理解的比较多所以才更新出博客

然后自己写了基本这个几个DOM 实现了一个剩下的基本就很快都是一套流程注释和分解都写在代码里

写一篇开始写JQ操作属性的方法实现原理

   appendTo:function(str){//转成成核心对象 不然 还要对各种类型转换var tem =$(str);//谁负责调用 this就是谁 这里是把P加到DIV中 this 是P//$('p').appendTo('div');var $this = this;var array=[];NjQuery.each(tem,function(index,value){//如果 P标签是多个 还需要二层循环$this.each(function(k,v){// 判断是否是第一个DIV元素if(index==0){value.appendChild(v);array.push(v);}else{// 因为P标签只有一个 所以剪切后  第一个DIV就会失去P 被增减到第二个DIV//所以在第二个DIV开始拷贝P标签 增加到DIV中//true 会拷贝标签和所有内容  false 就会拷贝标签var tmp=  v.cloneNode(true);value.appendChild(tmp);array.push(tmp);}  })})//返回对象return  $(array);//  //循环所有的DIV标签//  for (let index = 0; index < tem.length; index++) {//     //如果 P标签是多个 还需要二层循环//         for (let j = 0; j < $this.length; j++) {//         // 判断是否是第一个DIV元素//         if(index==0){//             tem[index].appendChild($this[j]);//         }else//         {//         // 因为P标签只有一个 所以剪切后  第一个DIV就会失去P 被增减到第二个DIV//         //所以在第二个DIV开始拷贝P标签 增加到DIV中//         //true 会拷贝标签和所有内容  false 就会拷贝标签//         var tmp=  $this[j].cloneNode(true);//         tem[index].appendChild(tmp);//         }//     }// }},prependTo:function(str){//转成成核心对象 不然 还要对各种类型转换var tem =$(str);//谁负责调用 this就是谁 这里是把P加到DIV中 this 是P//$('p').appendTo('div');var $this = this;var array=[];NjQuery.each(tem,function(index,value){//如果 P标签是多个 还需要二层循环$this.each(function(k,v){// 判断是否是第一个DIV元素if(index==0){// value.appendChild(v);/*     document.insertBefore(v,document.firstChild) */// 把P放到div下的第一个元素前面value.insertBefore(v,value.firstChild)array.push(v);}else{// 因为P标签只有一个 所以剪切后  第一个DIV就会失去P 被增减到第二个DIV//所以在第二个DIV开始拷贝P标签 增加到DIV中//true 会拷贝标签和所有内容  false 就会拷贝标签var tmp=  v.cloneNode(true);value.insertBefore(tmp,value.firstChild)// value.appendChild(tmp);array.push(tmp);}  })})//返回对象return  $(array);},append:function(str){if(NjQuery.isString(str)){//this 是一个集合 所以要用this [0]// console.log(this);// console.log(this[0]);this.each(function(index,value){value.innerHTML+=str;})}else{// this.appendTo(str);//需要把str转换成对象 才能调用appendTo$(str).appendTo(this);}return this;},prepend:function(str){if(NjQuery.isString(str)){this.each(function(index,value){value.innerHTML =str + value.innerHTML;})//this 是一个集合 所以要用this [0]// console.log(this);// console.log(this[0]);}else{// this.appendTo(str);//需要把str转换成对象 才能调用appendTo$(str).prependTo(this);}return this;},JInsertBefore:function(str){//转成成核心对象 不然 还要对各种类型转换var tem =$(str);//谁负责调用 this就是谁 这里是把P加到DIV中 this 是P//$('p').appendTo('div');var $this = this;var array=[];NjQuery.each(tem,function(index,value){var par = value.parentNode;//如果 P标签是多个 还需要二层循环$this.each(function(k,v){// 判断是否是第一个DIV元素if(index==0){// value.appendChild(v);/*     document.insertBefore(v,document.firstChild) */// 把P放到div下的第一个元素前面par.insertBefore(v,value)array.push(v);}else{// 因为P标签只有一个 所以剪切后  第一个DIV就会失去P 被增减到第二个DIV//所以在第二个DIV开始拷贝P标签 增加到DIV中//true 会拷贝标签和所有内容  false 就会拷贝标签var tmp=  v.cloneNode(true);par.insertBefore(tmp,value)// value.appendChild(tmp);array.push(tmp);}  })})//返回对象return  $(array);},before:function (str){var tem =$(str);// log()var $this=this;if(NjQuery.isString(str)){  //1）把P增加都每一个DIV的前面this.each(function(index,value){// div[0].parentNode.insertBefore(textNode, div[0])var par = value.parentNode; var textNode = document.createTextNode(str)//父节点下的增加textNode节点 在DIV前面par.insertBefore(textNode,value)})}else{$(str).JInsertBefore(this);}return this;},JReplaceAll:function(str){//转成成核心对象 不然 还要对各种类型转换var tem =$(str);if(tem.length==0){return;}//谁负责调用 this就是谁 这里是把P加到DIV中 this 是P//$('p').appendTo('div');var $this = this;var array=[];NjQuery.each(tem,function(index,value){//如果 P标签是多个 还需要二层循环$this.each(function(k,v){// 判断是否是第一个DIV元素if(index==0){$(v).JInsertBefore(value);$(value).remove();array.push(v);}else{// 因为P标签只有一个 所以剪切后  第一个DIV就会失去P 被增减到第二个DIV//所以在第二个DIV开始拷贝P标签 增加到DIV中//true 会拷贝标签和所有内容  false 就会拷贝标签var tmp=  v.cloneNode(true);$(tmp).JInsertBefore(value);$(value).remove();// value.appendChild(tmp);array.push(tmp);}  })})//返回对象return  $(array);},JInsertAfter:function(str){//转换成标签var tmp=$(str);var $this=this;var $array=[];$.each(tmp,function(index,value){var $par = value.parentNode;var $next = value.nextSibling;$this.each(function(i,v){if(index==0){$par.insertBefore(v, $next);$array.push(v);}else{ var tmp=  v.cloneNode(true);$par.insertBefore(tmp, $next);$array.push(tmp);}})})return  $array;// function insertAfter(p,div)// {//     // document.nextSibling//     //DIV循环//        for (let index = 0; index < div.length; index++) {//         var par=  div[index].parentNode;//         var $last= div[index].nextSibling//         for (let i = 0; i < p.length; i++) {//             if(index==0)//              {//                 par.insertBefore(p[i], $last)//             }else//             {//                var tmp=  p[i].cloneNode(true);//                par.insertBefore(tmp, $last)//             }//         }//         // var textNode = document.createTextNode(p)//         //   div[index].parentNode.appendChild(textNode);//         // div[0].parentNode.insertBefore(textNode, div[0])//    }//   }//   var   $P=document.querySelectorAll("P");//   var Div=document.querySelectorAll("div");//   insertAfter( $P,Div)},after:function(str){var $this = this;if(NjQuery.isString(str)){$this.each(function(index,value){var par=  value.parentNode;var $last= value.nextSibling  var textNode = document.createTextNode(str)par.insertBefore(textNode, $last)})}else{$(str).JInsertAfter($this);}//1 首先调用参数位置不同// function after(p,div)// {//     // document.nextSibling//     //DIV循环//        for (let index = 0; index < div.length; index++) {//         var par=  div[index].parentNode;//         var $last= div[index].nextSibling//         // for (let i = 0; i < p.length; i++) {//         //     if(index==0)//         //      {//                var textNode = document.createTextNode(p)//                 par.insertBefore(textNode, $last)//             // }else//             // {//             //    var tmp=  p[i].cloneNode(true);//             //    par.insertBefore(tmp, $last)//             // }//         // }//         // var textNode = document.createTextNode(p)//         //   div[index].parentNode.appendChild(textNode);//         // div[0].parentNode.insertBefore(textNode, div[0])//    }//   }//   var   $P='p';//   var Div=document.querySelectorAll("div");//   after( $P,Div)}

JQuery18(JQ原理 DOM元素 appendTo append prepend prependTo InsertBefore Before JReplaceAll）相关推荐

php中append,插入节点append()、insertAfter()的特殊用法：对原有DOM元素进行移动
插入节点的方法: append()/appendTo().prepend()/prependTo().after()/insertAfter().before/insertBefore() 这些插入节 ...
jq添加或删除html元素,jQuery添加删除DOM元素方法详解
本文实例分析了jQuery添加删除DOM元素的方法.分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM ...
append,appendTo和prepend
1.append(content) 向每个匹配的元素内部追加内容. 1 <div>2 <p name="p1">p1</p>3 </div ...
jQuery的append、appendTo、prepend、prependTo
元素1.append(元素2):把元素2添加到元素1内部最后元素2.appendTo(元素1):把元素2添加到元素1内部最后元素1.prepend(元素2):把元素2添加到元素1内部最前元素2. ...
jq在html中添加dom元素,使用jQuery添加DOM元素的最佳方法
所以我已经看到了三种向页面添加html/DOM元素的方法.我很好奇他们每个人的利弊是什么. 1 - 传统的JavaScript 我相信直接的JS方法是通过构造每个元素,设置属性,然后附加它们.例: v ...
2021-12-23 睡前故事--jQuery-添加元素之append、prepend、after、before的区别
jQuery-添加元素之append.prepend.after.before的区别小萝卜儿灵魂画师
html 广告 ins 原理,如何通过HTML DOM元素显示AdSense广告
我使用下面提到的代码来创建HTML DOM div元素312,并且我想通过调用javascript创建dom元素来在其他页面上显示名为312的div内的adsense广告.它适用于其他广告,但不适用于 ...
jQuery操作DOM元素案例
直接打开注释即可观察效果,都已经测试通过!!! <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
jQuery操作Dom元素、jQuery遍历、JavaScript遍历
目录 jQuery操作Dom元素 jQuery遍历几种方式 JavaScript遍历 jQuery操作Dom元素 jQuery的主要用法为"选择某个dom元素,再对其进行某种操作" ...

JQuery18(JQ原理 DOM元素 appendTo append prepend prependTo InsertBefore Before JReplaceAll）

JQuery18(JQ原理 DOM元素 appendTo append prepend prependTo InsertBefore Before JReplaceAll）相关推荐

最新文章

热门文章