zepto源码--核心方法5(文本操作)--学习笔记

涉及到文本内容的主要有三个函数:html, text, val。

我们已经见过多次,一个函数多种用途的情况,今天这三个函数也不例外,既可以获取内容,也可以设置内容。判断条件就是有没有传入参数,如果没有传入参数,则表示获取内容,否则表示设置内容。判断条件也基本类似: 0 in arguments,后面不再对该条件判断解析。分两步介绍函数,1为设置内容,2为获取内容。

html

获取或设置对象集合中元素的HTML内容。

1、利用javascript原生属性innerHTML获取元素的文本内容(包含html标签结构)并保存下来,接着清空该元素,并通过funcArg函数对传入的参数进行处理,funcArg函数前文已经介绍过了,将处理后的文本内容(包含html标签结构)利用append函数追加到当前已经清空了的元素的内部。

2、获取文本内容,获取的是对象集合中的第一个对象的文本内容。

text

获取或者设置所有对象集合中元素的文本内容。

从zepto官方api描述上来看,text方法与html方法的区别就是前者操作的是纯文本内容,后者操作的是包括html标签的内容。

1、text方法利用的是JavaScript的原生属性textContent,此属性与innerHTML的区别在于其不取得任何的html标签,在对传入的参数利用funcArg处理之后,直接赋值给this.textContent,最终会清除掉元素内部的所有html标签,只剩下纯文本。

2、获取文本的时候,利用了一个pluck函数,这个也是zepto对外暴露的接口,api文档上介绍,pluck,获取或者设置所有对象集合中元素的文本内容。由于元素内部可能还存在html标签,所以必须将获取到的textContent连接起来。

val

获取或设置匹配元素的值。

val针对的目标元素是fom表单中的元素,input, textarea, button, select的值。

1、如果显示的传入null,则将参数转换为空字符串,然后就直接对元素赋值即可。

2、这里多一种可能性,就是select标签设置了multiple多选的属性,如果设置了多选,就必须获取所有选中的option的值,其他情况就直接利用获取第一个元素的value值。

时间: 2024-10-23 12:20:16

zepto源码--核心方法5(文本操作)--学习笔记的相关文章

zepto源码--核心方法7(管理包装集)--学习笔记

后面应该会有几篇连续介绍关于zepto包装集的文章.涉及的函数较多,就分别介绍,今天介绍几个使用关系获取包装集的方法.prev, next, first, last, siblings, eq prev 看代码,只有一行,涉及到一个pluck函数,一直以为前面介绍过了,但是我看了下似乎没有介绍,补充一下: API中只有一句话:获取对象集合中每一个元素的属性值. 看前文介绍的有关$.map函数之后,相对比较容易理解的,这里就是对包装集进行遍历,返回一个新的数组,这个新的数组是由含有所传入的参数这一

zepto源码--核心方法5(显示隐藏)--学习笔记

在不引入zepto插件模块fx_metho其他ds的情况下,zepto默认的显示隐藏的函数只有show, hide, toggle,这里解释有个前提条件,就是没有引入zepto的fx_methods插件模块 show 相比较于jQuery的show函数,这里真的很简单了,没有传入任何参数,如果在标签上以内联样式的形式存在style="display:none",直接将该内联样式的none改为空,如果不是内联样式,则通过获取计算后的样式,getComputedStyle(this, ''

zepto源码--$.map,$.each,$.grep--学习笔记

从相对比较简单的说起: 1.$.grep  获取一个新数组,新数组只包含回调函数中返回 true 的数组项. 调用javascript中数组原生函数filter,对elements进行过滤,保留回调函数返回值为真的数组项. 2.$.map  通过遍历集合中的元素,返回通过迭代函数的全部结果,null 和 undefined 将被过滤掉. 刚开始使用的时候会对$.map和$.each产生一定的误解.从一定程度上来书,两者都是对集合中的元素进行遍历. 可以遍历数组和键值对的集合,$.map返回的是一

读Zepto源码之样式操作

这篇依然是跟 dom 相关的方法,侧重点是操作样式的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 内部方法 classRE classCache = {} function classRE(name) { return name in classCache ? classCache[name] : (classCache[name] = new RegExp('(^|\\s)' + name

读Zepto源码之操作DOM

这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 .remove() remove: function() { return this.each(function() { if (this.parentNode != null) this.parentNode.removeChild(this) }) }, 删除当前集合中的元素. 如果父

读 Zepto 源码之内部方法

数组方法 定义 var emptyArray = [] concat = emptyArray.concat filter = emptyArray.filter slice = emptyArray.slice zepto 一开始就定义了一个空数组 emptyArray,定义这个空数组是为了取得数组的 concat.filter.slice 方法 compact function compact(array) { return filter.call(array, function(item)

读 Zepto 源码之内部方法[转载]

数组方法 定义 var emptyArray = [] concat = emptyArray.concat filter = emptyArray.filter slice = emptyArray.slice zepto 一开始就定义了一个空数组 emptyArray,定义这个空数组是为了取得数组的 concat.filter.slice 方法 compact function compact(array) { return filter.call(array, function(item)

读Zepto源码之内部方法

数组方法 定义 var emptyArray = [] concat = emptyArray.concat filter = emptyArray.filter slice = emptyArray.slice zepto 一开始就定义了一个空数组 emptyArray,定义这个空数组是为了取得数组的 concat.filter.slice 方法 compact function compact(array) { return filter.call(array, function(item)

zepto源码分析-代码结构【转载】

本来想学习一下jQuery的源码,但由于jQuery的源码有10000多行,设计相当复杂,所以决定从zepto开始,分析一个成熟的框架的代码结构及执行步骤. 网上也有很多zepto的源码分析,有的给源码添加注释,有的谈与jQuery的不同,但是都没有系统的讲解zepto框架的代码结构及初始化Zepto对象的过程. 准备 默认你已经对面向对象有一定的了解,本文是边实践边写的,虽有些乱,但好处是为大家提供了分析的思路. 英文文档. 中文文档 注意在文中$变量表示一个函数对象,而$()表示执行函数,他