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

时间:2022-11-07 06:00:37

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

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

html

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

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

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

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

text

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

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

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

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

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

val

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

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

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

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

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