资讯专栏INFORMATION COLUMN

当我调用了$().append()后,jQuery内部发生了什么?

skinner / 921人阅读

摘要:它的作用是是用来处理等操作方法的参数的,统一将其处理为类型节点,并交由函数处理,即上图的。作用将返回的插入到的内部末尾。方法创建了一虚拟的节点对象,节点对象包含所有属性和方法。

前言:这篇我们着讲

1、有这样一个页面:


  

  

注意:不要 append(test1),规范写法是 append(test1)

2、像之前的文章一样,我们自定义 append() 方法

  let ajQuery={}
  jQuery.each({
      //例:"

Test

" //源码6011行-6019行 // 在被选元素的结尾插入指定内容 /*append的内部的原理,就是通过创建一个文档碎片,把新增的节点放到文档碎片中,通过文档碎片克隆到到页面上去,目的是效率更高*/ append: function(nodelist, arguments) { //node是由domManip处理得到的文档碎片documentFragment,里面包含要插入的DOM节点 let callbackOne=function( node ) { console.log(node,"node149") //this指的就是$("xxx") //1:元素节点,11:DocumentFragment,9:document if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) { //table插入tr的额外判断 //target默认情况是selector,即document.querySelectorAll(".inner") let target = manipulationTarget( this, node ) console.log(target,node.childNodes,"node147") //append的本质即使用原生appendChild方法在被选元素内部的结尾插入指定内容 target.appendChild( node ); } } console.log(nodelist,arguments,"this120") return domManip( nodelist, arguments, callbackOne ); }, }, function(key, value) { ajQuery[key] = function(nodelist, arguments) { console.log(nodelist,"nodelist128") return value(nodelist, arguments); } } )

3、可以看到,append() 内部调用了 domManip 的方法,接下来重点介绍下该方法

(1)什么是 domManip ?

domManip() 是 jQuery DOM 的核心函数。dom 即 Dom 元素,Manip 是Manipulate 的缩写,连在一起就是 Dom 操作的意思。

(2)它的作用是?

domManip() 是用来处理 $().append(xxx)$().after(xxx) 等操作 DOM 方法的参数的,统一将其处理为 DOM 类型节点,并交由 callback 函数处理,即上图的 callbackOne

注意: 本文暂不考虑参数包含

14、本篇文章的所有代码

github:

https://github.com/AttackXiao...

代码:




  
  jQuery的遍历结构设计之节点操作




  

  

(完)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103075.html

相关文章

  • jQuery源码解析系列一目录

    摘要:起初选择先看源码而不是的原因也简单作为每个前端会用的第一个框架,虽然过时,但却又如此普及,所以想看看它是咋设计的。 showImg(https://segmentfault.com/img/remote/1460000019663680); 起初选择先看jQuery源码而不是react的原因也简单:jQuery作为每个前端会用的第一个框架,虽然过时,但却又如此普及,所以想看看它是咋设计...

    KunMinX 评论0 收藏0
  • 第十五章:指针类型

    摘要:指针类型的零值指针类型的零值指针类型的零值都是,也就是说,一个没有存储地址的指针等于解除引用解除引用一个指针变量持有另一个变量的地址。本篇翻译自《Practical Go Lessons》 Chapter 15: Pointer type1 你将在本章将学到什么?什么是指针?什么时指针类型?如何去创建并使用一个指针类型的变量。指正类型变量的零值是什么?什么是解除引用?slices, maps...

    不知名网友 评论0 收藏0
  • angularjs特效之分散的字符串--解析compile link $compile $inter

    摘要:效果预览来自的效果预览引用了,已被墙,请谨慎预览转载声明这篇文章其实源自的博客。主要内容整个效果都建立在的里面。为了弥补这个缺陷,我决定改成在函数中对进行操作。重点来了,是和初始位置的相对位置。就是元素的初始值。 效果预览 来自codepen的效果预览:(引用了angularjs,已被墙,请谨慎预览)http://codepen.io/flybywind/pen/aNjxJa 转载声明...

    SHERlocked93 评论0 收藏0
  • angularjs特效之分散的字符串--解析compile link $compile $inter

    摘要:效果预览来自的效果预览引用了,已被墙,请谨慎预览转载声明这篇文章其实源自的博客。主要内容整个效果都建立在的里面。为了弥补这个缺陷,我决定改成在函数中对进行操作。重点来了,是和初始位置的相对位置。就是元素的初始值。 效果预览 来自codepen的效果预览:(引用了angularjs,已被墙,请谨慎预览)http://codepen.io/flybywind/pen/aNjxJa 转载声明...

    explorer_ddf 评论0 收藏0

发表评论

0条评论

skinner

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<