【jQuery 源码解析(二十三) DOM操作模块 替换元素 详解】的更多相关文章

jQuery 源码解析(二十三) DOM操作模块 替换元素 详解

本节说一下DOM操作模块里的替换元素模块,该模块可将当前匹配的元素替换指定的DOM元素,有两个方法,如下: replaceWith(value)     ;使用提供的新内容来替换匹配元素集合中的每个元素.value是新内容,可以是html字符串.DOM元素.jQuery对象或返回新内容的函数. replaceAll(value)        ;使用匹配元素集合中的元素替换目标元素.内部执行.replaceWith(value)方法,只是语法顺序上不同.类似于append()和appendTo(…

jQuery 源码分析(二十一) DOM操作模块 删除元素 详解

本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: empty()                                   ;移除匹配元素的所有子元素.        ;先移除所有后代元素关联的数据和事件,以避免内存泄漏.然后移除子元素. remove(selector,keepData)    ;从匹配元素中移除selector元素.  …

jQuery 源码分析(二十) DOM操作模块 插入元素 详解

jQuery的DOM操作模块封装了DOM模型的insertBefore().appendChild().removeChild().cloneNode().replaceChild()等原生方法.分为5个子模块来实现:插入元素.删除元素.复制元素.替换元素和包裹元素,本节讲解第一个子模块:插入元素 插入元素模块可用于新增DOM节点,修改文本节点等,API如下: append(content)      ;在被选元素子节点的末尾插入指定内容,内部调用appendChild(elem)方法    ;…

jQuery 源码解析(二十七) 样式操作模块 坐标详解

样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下坐标这一块. 对于坐标来说,jQuery提供了一个offset方法用于获取第一个匹配元素的坐标或者设置所有匹配元素的坐标,还有offsetParent获取最近的定位祖先元素,position用于获取获取第一个匹配元素相对于最近定位祖先元素的坐标,如下: offset(options)              ;返回匹配元素集合中的一个元素的文档坐标,或者设置每个元素的文档坐标,;不能带单位,默认是px,有两种使用方法: offse…

jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解

本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html)               ;在每个匹配元素的外层添加一层DOM元素                                ;该方法会遍历匹配元素集合,在每个元素上调用.wrapAll()方法        ;不同于wrapAll()的是该方法会在每个匹配元素外面都套一层html元素. wrapAll(html)            ;会将html转化为一个DO…

jQuery 源码解析(二十二) DOM操作模块 复制元素 详解

本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, dataAndEvents, deepDataAndEvents)    ;jQuery底层方法,返回DOM引用    ;elem是要复制的DOM元素,dataAndEvents和deepDataAndEvents分别表示是否复制克隆元素的数据和事件 和 是否复制深度复制数据和事件 $.fn.clo…

jQuery 源码解析二：jQuery.fn.extend=jQuery.extend 方法探究

终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 jQuery 源码整体大致架构,主要分为以下几个点:   A 通过自执行函数,在内部将 jQuery (jQuery 为一个函数,同时,在 JS 中,函数也为对象)以 window.jQuery=window.$ 引入,供用户直接便可使用 $.jQuery 调用.       B 以 C#.Jav…

jQuery 源码解析(二十五) DOM操作模块 html和text方法的区别

html和text都可以获取和修改DOM节点里的内容,方法如下: html(value)     ;获取匹配元素集合中的一个元素的innerHTML内容,或者设置每个元素的innerHTML内容,                ;value可选,可以是html代码或返回html代码的函数,如果没有参数则获取匹配元素集合中第一个元素的innerHTML内容 text(text)         ;获取匹配元素集合中所有元素合并后的文本内容,或者设置每个元素的文本内容,封装了createTextNo…

jQuery 源码解析(二十六) 样式操作模块 样式详解

样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下样式相关,样式操作通过jQuery实例的css方法来实现,该方法有很多的执行方法,如下: css(obj)            ;参数1是一个对象时,表示一次性设置多个css样式 css(name,func)       ;参数2是函数时,设置的是函数返回值 css(name,'')            ;参数2是空字符串时,表示删除该样式(删除style属性上的) css(name)              ;如果忽略第二个…

jQuery 源码解析(二十九) 样式操作模块 尺寸详解

样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度.高度,而且可以很方便的区分padding.border. margin等,主要有六个API,如下: heihgt(size).width(size)   ;获取第一个匹配元素的高度.宽度,或者通过调用.css(name,value)方法来设置高度.宽度. size可以是字符串或者数值 innerHeight().innerWidth() ;获…

jQuery 源码解析(二十八) 样式操作模块 scrollLeft和scrollTop详解

scrollLeft和scrollTop用于获取/设置滚动条的,如下: scrollLeft(val) ;读取或设置整个页面的水平滚动条距离 scrollTop(val) ;读取或设置整个页面的垂直滚动条距离 如果没有传入val值则获取滚动条距离,如果有设置val则标识设置滚动条距离,还是举个栗子,以scrollTop为例,如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu…

jQuery 源码分析(十九) DOM遍历模块详解

jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装和扩展,用于在DOM树中遍历父元素.子元素和兄弟元素. 可以通过jQuery的实例来访问,方法如下: parent()             ;获取匹配元素的父元素 parents(selector)         ;获取匹配元素的所有祖先元素                        ;s…

jQuery 源码分析(十五) 数据操作模块 val详解

jQuery的属性操作模块总共有4个部分,本篇说一下最后一个部分:val值的操作,也是属性操作里最简单的吧,只有一个API,如下: val(vlaue)        ;获取匹配元素集合中第一个元素的当前值,或者设置匹配元素集合中每个元素的值,有三种用法: val()        ;没有参数,获取第一个匹配元素的当前值 val(value)      ;为每个匹配元素设置value值        ;如果为null则表示设置值为空 val(func)       ;设置每个匹配元素为函数fun…

jQuery 源码分析(十四) 数据操作模块 类样式操作 详解

jQuery的属性操作模块总共有4个部分,本篇说一下第3个部分:类样式操作部分,用于修改DOM元素的class特性的,对于类样式操作来说,jQuery并没有定义静态方法,而只定义了实例方法,如下: addClass(value) ;为匹配元素集合中的每个元素添加一个或多个类样式,通过修改DOM属性className来修改类样式,value可以是个以空格分隔的类样式或者一个函数(返回一个或多个以空格分隔的类样式) hasClass(selector)   ;检测匹配元素中的任意元素是否含有指定的类…

Vue.js 源码分析(二十八) 高级应用 transition组件 详解

transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: name         用于自动生成CSS过渡类名        例如:name:'fade'将自动拓展为.fade-enter,.fade-enter-active等    appear      是否在初始渲染时使用过渡         默认为false    css            是否…

Vue.js 源码分析(二十六) 高级应用 作用域插槽 详解

普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单元格数据的显示格式,我们可以通过作用域插槽自定义数据的显示格式,对于二次开发来说具有很强的扩展性. 作用域插槽使用<template>来定义模板,可以带两个参数,分别是: slot-scope    ;模板里的变量,旧版使用scope属性 slot              ;该作用域插槽的nam…

Vue.js 源码分析(二十四) 高级应用 自定义指令详解

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上时,该元素在初次渲染.插入到父节点.更新.解绑时可以执行一些特定的操作(钩子函数() 自定义指令有两种注册方式,一种是全局注册,使用Vue.directive(指令名,配置参数)注册,注册之后所有的Vue实例都可以使用,另一种是局部注册,在创建Vue实例时通过directives属性创建局部指令,局…

Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解

对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-group组件的props是没有mode属性的,另外多了以下两个props    tag                  标签名    moveClass      新增/移除元素时的过渡    ;如果未指定则默认会拼凑出name+"-move"这个格式的,一般很少用到,比较复杂的动画可以该…

jquery源码解析：代码结构分析

本系列是针对jquery2.0.3版本进行的讲解.此版本不支持IE8及以下版本. (function(){ (21, 94)     定义了一些变量和函数,   jQuery = function(){}; (96,283)   给jQuery对象添加一些属性和方法(实例方法,通过$("div")这类的jQuery实例对象来调用) (285,347)   extend : jQuery的继承方法 (349,817)   jQuery.extend():扩展一些工具方法(静态方法,直接通…

Mybatis源码解析(二) —— 加载 Configuration

Mybatis源码解析(二) -- 加载 Configuration    正如上文所看到的 Configuration 对象保存了所有Mybatis的配置信息,也就是说mybatis-config.xml 以及 mapper.xml 中的所有信息 都可以在 Configuration 对象中获取到.所以一般情况下,Configuration 对象只会存在一个.通过上篇文章我们知道了mybatis-config.xml 和 mapper.xml 分别是通过 XMLConfigBuilder 和…

RxJava2源码解析(二)

title: RxJava2源码解析(二) categories: 源码解析 tags: 源码解析 rxJava2 前言 本篇主要解析RxJava的线程切换的原理实现 subscribeOn 首先, 我们先看下subscribeOn()方法, 老样子, 先上Demo Observable<Integer> observable = Observable .create(new ObservableOnSubscribe<Integer>() { @Override public v…

JQuery源码解析（一）

写在前面:本<JQuery源码解析>系列是基于一些前辈们的文章进行进一步的分析.细化.修改而写出来的,在这边感谢那些慷慨提供科普文档的技术大拿们. 要查阅JQ的源文件请下载开发版的JQ.js文档,下载地址:http://jquery.com/download/ 注意选择其中的development版本进行下载,如下图所示 开发版本的JQ.js属于非压缩的源文件,方便我们阅读和分析其代码. 下载完用Dreamweaver或其它代码编辑器打开查阅即可.我们今后分析的代码也是基于1.11.0版本的J…

Sentinel源码解析二（Slot总览）

写在前面 本文继续来分析Sentinel的源码,上篇文章对Sentinel的调用过程做了深入分析,主要涉及到了两个概念:插槽链和Node节点.那么接下来我们就根据插槽链的调用关系来依次分析每个插槽(slot)的源码. 默认插槽链的调用顺序,以及每种类型Node节点的关系都在上面文章开头分析过 Sentinel源码解析一 NodeSelectorSlot /** * 相同的资源但是Context不同,分别新建 DefaultNode,并以ContextName为key */ private vol…

JS DOM对象控制HTML元素详解

JS DOM对象控制HTML元素详解 方法: getElementsByName()  获取name getElementsByTagName()  获取元素 getAttribute()  获取元素属性 setAttribute()  设置元素属性 childNodes()  访问子节点 parentNode()  访问父节点 createElement()  创建元素节点 createTextNode()  创建文本节点 insertBefore()  插入节点 removeChild()…

jquery 源码解析

静态与实力方法共享设计 遍历方法 $(".a").each() //作为实例方法存在 $.each() //作为静态方法存在 Jquery源码 jQuery.prototype = { each:function(callback,args){ return jQuery.each(this,callback,args); } } 实例方法取与静态方法,换句话来说静态与实例方法共享设计,静态方法挂在jquery构造器上面 方法链式调用的实现 $("li").eq(0…

jQuery源码解析资源便签

最近开始解读jQuery源码,下面的链接都是搜过来的,当然妙味课堂 有相关的一系列视频,长达100多期,就像一只蜗牛慢慢爬, 至少品读三个框架,以后可以打打怪,自己造造轮子. 完全理解jQuery源代码,在前端行业算什么水平 jQuery source viewer jQuery 2.0.3 源码分析系列 jQuery 2.0.3 源码分析Sizzle引擎 jQuery 的原型关系图 妙味课堂:一起学习jQuery源码[逐行分析jQuery源码的奥秘] 浅谈 jQuery 事件源码定位问题 慕课…

jquery源码解析：jQuery数据缓存机制详解1

jQuery中有三种添加数据的方法,$().attr(),$().prop(),$().data().但是前面两种是用来在元素上添加属性值的,只适合少量的数据,比如:title,class,name等.对于json这种数据量大的,就适合用data方法来添加,而data方法就是jQuery缓存机制最重要的方法. jQuery中为什么要用缓存机制系统呢?因为DOM元素与js对象之间互相引用,在大部分浏览器下会引起内存泄漏.为了解决这个问题,jQuery就写了一个缓存机制系统.举个例子: var di…

jquery源码分析(二)——架构设计

要学习一个库首先的理清它整体架构: 1.jQuery源码大致架构如下:(基于 jQuery 1.11 版本,共计8829行源码)(21,94)                定义了一些变量和函数jQuery=function(){}(96,280)        给jQuery添加一些方法和属性,jQuery.fn=jQuery.prototype(285,347)        extend:        jQuery的一些继承方法        更容易进行后续的扩展           …

jQuery 源码解析一：jQuery 类库整体架构设计解析

如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.getElementsByName...官方提供超长方法 api . jQuery 整体源码,本人也还在阅读中,暂时记录一下.(为什么要看源码,原因很简单---- 一 好好了解一下 jQuery 原理  二 为了装逼显摆).   一  使用 jQuery 时候,首先需引入 jQuery 文件,而之后,大家…

车大棒浅谈jQuery源码（二）

前言 本来只是一个自己学习jQuery笔记的简单分享,没想到获得这么多人赏识.我自己也是傻呵呵的一脸迷茫,感觉到受宠若惊. 不过还是有人向批判我的文章说,这是基本知识点,完全跟jQuery源码沾不上边.说jQuery博大精深,还要我静下心来研究, 别净整些没用的.弄的我一脸懵逼,WTF?我从头到尾都没有说我讲的多高端,我连标题都写的"浅谈".就完全不能让我等菜鸟慢慢先从的简单的入手吗? 但是有位名为"萌新"三好童鞋,就做的非常好."啪"!,反手就…