jQuery 源码解析(二十五) DOM操作模块 html和text方法的区别
html和text都可以获取和修改DOM节点里的内容，方法如下:
- html(value) ;获取匹配元素集合中的一个元素的innerHTML内容，或者设置每个元素的innerHTML内容， ;value可选，可以是html代码或返回html代码的函数,如果没有参数则获取匹配元素集合中第一个元素的innerHTML内容
- text(text) ;获取匹配元素集合中所有元素合并后的文本内容，或者设置每个元素的文本内容，封装了createTextNode方法
writer by:大沙漠 QQ:22969969
举个栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div>Hello World!</div>
<button id="b1">按钮1</button>
<button id="b2">按钮2</button>
<script>
$('#b1').click(()=>{
$('div').html('<p>Hello jQuery!</p>') //使用html()设置值
})
$('#b2').click(()=>{
$('div').text('<p>Hello jQuery!</p>') //使用text()设置值
})
</script>
</body>
</html>
渲染如下:
点击按钮1将使用html()设置值，此时渲染如下:
点击按钮2将使用text()设置值，此时渲染如下:
可以看到对于html()来说，就把里面的标签的含义解析出来，而对于text()来说，只是单纯的展示出来，这是因为前者是通过设置innerHTML来实现的，后者是通过createTextNode创建的文本节点来实现的
源码分析
对于html来说，它是通过innerHTML来实现的，实现如下:
jQuery.fn.extend({
html: function( value ) { //获取匹配元素集合中第一个元素的HTML内容，或者设置每个元素的HTML内容。通过读取、设置innerHTML来实现。value可选，可以是html代码或返回html代码的函数。
if ( value === undefined ) { //如果没有传入参数，则读取第一个匹配元素的HTML内容
return this[0] && this[0].nodeType === 1 ? //如果this[0]存在且是一个元素节点
this[0].innerHTML.replace(rinlinejQuery, "") : //读取innerHTML属性
null;
// See if we can take a shortcut and just use innerHTML
} else if ( typeof value === "string" && !rnoInnerhtml.test( value ) && //html是代码代码且不含有script或style标签。
(jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value )) && //浏览器不会忽略前导空白负，或者html代码不以空白符开头。
!wrapMap[ (rtagName.exec( value ) || ["", ""])[1].toLowerCase() ] ) { //html代码中的标签不需要包裹父标签就可以正确的被序列化
value = value.replace(rxhtmlTag, "<$1></$2>"); //修正自闭标签
try {
for ( var i = 0, l = this.length; i < l; i++ ) { //遍历当前匹配元素
// Remove element nodes and prevent memory leaks
if ( this[i].nodeType === 1 ) { //如果该节点是一个元素节点
jQuery.cleanData( this[i].getElementsByTagName("*") ); //先移除所有后代元素关联的数据和事件
this[i].innerHTML = value; //尝试直接设置属性innerHTML插入HTML内容。
}
}
// If using innerHTML throws an exception, use the fallback method
} catch(e) {
this.empty().append( value ); //如果在设置innerHTML时跑出了异常，则先调用empty()移除后代元素关联的数据和事件、移除子元素，然后调用.append()插入新内容。
}
} else if ( jQuery.isFunction( value ) ) { //如果value是函数，则遍历匹配元素集合，在每个元素上执行该函数，并取其返回值作为新html内容，迭代调用.html(vlue)。
this.each(function(i){
var self = jQuery( this );
self.html( value.call(this, i, self.html()) );
});
} else {
this.empty().append( value );
}
return this; //最后返回this,以支持链式操作
},
})
对于text来说，它是通过createTextNode创建的文本节点来实现的，如下:
jQuery.fn.extend({
text: function( text ) { //获取匹配元素集合中所有元素合并后的文本内容，或者设置每个元素的文本内容，设置时是通过createText()方法创建文本节点并append()进去的。
if ( jQuery.isFunction(text) ) { //如果text是函数，则在每个匹配元素上执行该函数，并取其返回值作为新文本内容，迭代调用.text(text)方法。
return this.each(function(i) {
var self = jQuery( this );
self.text( text.call(this, i, self.text()) ); //调用函数时，设置关键字this执行当前元素，传入了两个参数:当前元素在集合中的下标位置、当前元素的旧文本内容。
});
}
if ( typeof text !== "object" && text !== undefined ) { //如果参数text不是对象，也不是undefined,即可能是字符串、数字或布尔值。
return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) ); //先清空内容，然后创建文本节点，并插入每个匹配元素中
}
return jQuery.text( this ); //如果没有传入参数或者参数text不合法(对象)，则调用jQuery.text(elem)获取所有匹配元素合并后的文本内容(sizzle选择器中)。
},
})
比较简单的
jQuery 源码解析(二十五) DOM操作模块 html和text方法的区别的更多相关文章
- jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解
本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html) ;在每个匹配元素的外层添加一层DOM元素 ...
- jQuery 源码解析(二十八) 样式操作模块 scrollLeft和scrollTop详解
scrollLeft和scrollTop用于获取/设置滚动条的,如下: scrollLeft(val) ;读取或设置整个页面的水平滚动条距离 scrollTop(val) ;读取或设置整个页面的垂直滚 ...
- jQuery 源码解析(二十六) 样式操作模块 样式详解
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下样式相关,样式操作通过jQuery实例的css方法来实现,该方法有很多的执行方法,如下: css(obj) ;参数 ...
- jQuery 源码解析(二十九) 样式操作模块 尺寸详解
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度.高度,而且可以很方便的区分padding.b ...
- jQuery 源码解析(二十二) DOM操作模块 复制元素 详解
本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...
- jQuery 源码解析二：jQuery.fn.extend=jQuery.extend 方法探究
终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...
- jQuery 源码解析(二十三) DOM操作模块 替换元素 详解
本节说一下DOM操作模块里的替换元素模块,该模块可将当前匹配的元素替换指定的DOM元素,有两个方法,如下: replaceWith(value) ;使用提供的新内容来替换匹配元素集合中的每个元 ...
- jQuery 源码分析(二十) DOM操作模块 插入元素 详解
jQuery的DOM操作模块封装了DOM模型的insertBefore().appendChild().removeChild().cloneNode().replaceChild()等原生方法.分为 ...
- jQuery 源码解析(二十七) 样式操作模块 坐标详解
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下坐标这一块. 对于坐标来说,jQuery提供了一个offset方法用于获取第一个匹配元素的坐标或者设置所有匹配元素的坐标,还有offse ...
随机推荐
- day26
绑定方法 分为对象绑定方法和类的绑定方法 绑定方法的特殊之处 绑定给谁就是谁来调用 类的绑定方法 绑定给类,类来调用,会把类自身传过来 不需要通过对象 ,只需要通过类就能获取到一些东西的时候,用类的绑 ...
- css多行文本溢出显示省略号（兼容ie）
在日常编写页面中,我们经常遇到内容行数过多时,需要出现 “...” 来处理.但是又要考虑IE浏览器或IE内核浏览器的兼容性. 普通实现方法: display: -webkit-box; -webkit ...
- zsh: /usr/local/bin/pod: bad interpreter: /System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/bin/ruby: no such file or directory
系统升级为 macOS Catalina 发现 CocoaPods 不管用了. 解决方法: 打开 iTerm2 sudo gem update --system 输入电脑密码,然后 sudo gem ...
- <算法基础><排序>三种高级排序——快速排序，堆排序，归并排序
这三种排序算法的性能比较如下: 排序名称 时间复杂度(平均) 时间复杂度(最坏) 辅助空间 稳定性 快速排序 O(nlogn) O(n*n) O(nlogn) 不稳定 堆排序 O(nlogn) O(n ...
- 华为云 AI 实战营计划，带你迈上 AI 之路
当今,AI的开发人才需求呈现极大的供需不平衡.所有开发者都关心,要如何从一名开发者晋升为AI开发者?AI开发能力,是主要的进入障碍.不用慌,华为云推出了 <华为云ModelArts-Lab AI ...
- Java修炼——四种方式解析XML_SAX
四种方式解析XML:DOM JDOM DOM4J SAX 先写一个XML栗子: <?xml version="1.0" encoding="U ...
- ZOJ 3195 Design the city (LCA 模板题)
Cerror is the mayor of city HangZhou. As you may know, the traffic system of this city is so terribl ...
- 笔记||Python3之函数
函数: 函数的概念:就是一段代码:一段操作流程. 优点:代码量少.简洁. 维护起来方便 -- 在函数的定义进行修改 函数的定义:1 - def 函数名(): 函数内容 2 - 函 ...
- vue实现双向绑定的基础方法
Vue2的组件props通信方式 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能被动接收 ...
- 04Shell流程控制
流程控制 if 单分支结构 if 条件测试 then 命令序列 fi 双分支结构 if 条件测试 then 命令序列 else 命令序列 fi 多分支结构 if 条件测试 1 then 命令序列 [e ...