- isNonBlankString(str) ⇒
boolean
检测一个字符串是否包含任何非空格的字符
- throwIfWhitespace(str)
如果字符串中包含空格,则抛出错误
- classRegExp(className) ⇒
Regexp
生成一个正则表达式,用于检查一个元素的 className 字符串中是否包含特定的 className
- isReal() ⇒
boolean
是否处于浏览器环境中
- isEl(value) ⇒
boolean
判断一个变量是否是 DOM element
- createQuerier(method) ⇒
function
创建一个 DOM 查询函数,这个函数在原有方法的基础上有额外的指定上下文的功能
- createEl([tagName], [properties], [attributes], content) ⇒
Element
创建 DOM 元素
- createElement(tagName, [props], child) ⇒
Element
创建一个元素,并能添加 props 和 子元素
vjs 的 createEl 将 props 和 attrs 分成了两个参数,但是我们的业务没必要这么做 而且每次想要传 child 参数的时候,还得先传 attrs 参数让我觉得很烦
- textContent(el, text) ⇒
Element
更改 DOM 元素中的文本节点(整个文本内容都会被替换掉)
- normalizeContent(content) ⇒
Array
将要插入到 DOM 元素中的内容标准化
使用 createTextNode 而不是 createElement 避免 XSS 漏洞
- isTextNode(value) ⇒
boolean
判断一个变量是否是 textNode
- prependTo(child, parent)
将一个元素插入到另一个中作为第一个子元素
- parent(el, classForSelector) ⇒
Element
|null
返回指定元素的最近的命中选择器的父元素
- hasClass(el, classToCheck) ⇒
boolean
检查指定元素是否包含指定 class
- addClass(el, classToAdd) ⇒
Element
给指定元素增加 class
- removeClass(el, classToRemove) ⇒
Element
移除指定元素的指定 class
- toggleClass(el, classToToggle, predicate) ⇒
Element
增加或删除一个元素上的指定的 class
- setAttributes(el, attributes)
设置元素的属性
- getAttributes(el) ⇒
Object
1) boolean 的属性,其值为 true/false
- getAttribute(el, attribute) ⇒
string
获取元素的指定属性,element.getAttribute 换一种写法
- setAttribute(el, attr, value)
设置元素的指定属性 element.setAttribute 换一种写法
- removeAttribute(el, attribute)
移除元素上的指定属性 element.removeAttribute 换一种写法
- blockTextSelection()
当拖动东西的时候,尝试去阻塞选中文本的功能
- unblockTextSelection()
关闭对文本选中功能的阻塞
- getBoundingClientRect(el) ⇒
Object
|undefined
同原生的 getBoundingClientRect 方法一样,确保兼容性
在一些老的浏览器(比如 IE8)提供的属性不够时,此方法会手动补全
另外,一些浏览器不支持向 ClientRect/DOMRect 对象中添加属性,所以我们选择创建一个新的对象, 并且把 ClientReact 中的标准属性浅拷贝过来( x 和 y 没有拷贝,因为这个属性支持的并不广泛)
- findPosition(el) ⇒
Object
1) clientLeft/clientTop 获取一个元素的左/上边框的宽度,不包括 padding 和 margin 的值
- getPointerPosition(el, event) ⇒
Coordinates
1) offsetWidth/offsetHeight: 元素宽/高,包括 border padding width/height scrollbar 2) pageX/pageY: 点击的 x/y 坐标,相对于 document,是个绝对值(当有滚动条时会把滚动条的距离也计算在内) 3) changedTouches: touch 事件中的相关数据
- emptyEl(el) ⇒
Element
清空一个元素
- appendContent(el, content) ⇒
Element
向元素内插入内容
- insertContent(el, content) ⇒
Element
替换元素的内容 感觉名字起得不怎么好
- replaceContent(el, content) ⇒
Element
同 insertContent insertContent 是 vjs 里的函数,但我感觉名字起的不好,我想用这个
通过选择器和上下文(可选)找到一个指定元素
Kind: global constant
Returns: Element
| null
- 被选中的元素或 null
Param | Type | Description |
---|---|---|
selector | string |
css 选择器,反正最后都会被 querySelector 处理,你看着传吧 |
上下文环境。可选,默认为 | Element | string |
document |
通过选择器和上下文(可选)找到所有符合的元素
Kind: global constant
Returns: NodeList
- 被选中的元素列表,如果没有符合条件的元素,空列表
Param | Type | Description |
---|---|---|
selector | string |
css 选择器,反正最后都会被 querySelectorAll 处理,你看着传吧 |
上下文环境。可选,默认为 | Element | string |
document |
检测一个字符串是否包含任何非空格的字符
Kind: global function
Returns: boolean
- 是否包含非空格的字符
Param | Type | Description |
---|---|---|
str | string |
待检查的字符串 |
如果字符串中包含空格,则抛出错误
Kind: global function
Throws:
Error
Param | Type | Description |
---|---|---|
str | string |
待检查的字符串 |
生成一个正则表达式,用于检查一个元素的 className 字符串中是否包含特定的 className
Kind: global function
Returns: Regexp
- 用于检查该类名是否存在于一个元素的 className 字符串中
Param | Type | Description |
---|---|---|
className | string |
就是为了他! |
是否处于浏览器环境中
判断一个变量是否是 DOM element
Kind: global function
Returns: boolean
- 是否是 DOM element
Param | Type | Description |
---|---|---|
value | Mixed |
待检查的变量 |
创建一个 DOM 查询函数,这个函数在原有方法的基础上有额外的指定上下文的功能
Kind: global function
Returns: function
- 查询 DOM 用的函数
Param | Type | Description |
---|---|---|
method | string |
方法名 |
创建 DOM 元素
Kind: global function
Returns: Element
- el 创建的元素
Param | Type | Description |
---|---|---|
[tagName] | string |
元素类型。可选,默认 div |
[properties] | Object |
元素 prop 属性。可选,默认无 |
[attributes] | Object |
元素 attr 属性。可选,默认无 |
content | string | Element | TextNode | Array | function |
元素内容。可选,默认无 |
创建一个元素,并能添加 props 和 子元素
vjs 的 createEl 将 props 和 attrs 分成了两个参数,但是我们的业务没必要这么做 而且每次想要传 child 参数的时候,还得先传 attrs 参数让我觉得很烦
Kind: global function
Returns: Element
- el 创建的元素
Todo
- 先写一个这个函数自己用,后面看有没有必要把 createEl 函数换掉
Param | Type | Description |
---|---|---|
tagName | string |
DOM 元素标签名 |
[props] | Object |
属性 |
child | Element | string |
元素的子元素,参数个数不限。可以没有,也可以有多个 |
更改 DOM 元素中的文本节点(整个文本内容都会被替换掉)
Kind: global function
Returns: Element
- el 更改后的 DOM 元素
Param | Type | Description |
---|---|---|
el | Element |
将要改变文本节点的 DOM 元素 |
text | string |
要添加的文本 |
将要插入到 DOM 元素中的内容标准化
使用 createTextNode 而不是 createElement 避免 XSS 漏洞
Kind: global function
Returns: Array
- 标准化后的内容
Param | Type | Description |
---|---|---|
content | string | Element | TextNode | Array | function |
- string: 标准化为 text node - Element/TextNode: 不做任何处理 - Array: 遍历处理数组元素 - Function: 先运行得到结果再处理 |
判断一个变量是否是 textNode
Kind: global function
Returns: boolean
- 是否是 textNode
Param | Type | Description |
---|---|---|
value | Mixed |
待检查的变量 |
将一个元素插入到另一个中作为第一个子元素
Kind: global function
Param | Type | Description |
---|---|---|
child | Element |
最终的子元素 |
parent | Element |
最终的父元素 |
返回指定元素的最近的命中选择器的父元素
Kind: global function
Returns: Element
| null
- 选择器命中的最近的父元素列表
Param | Type | Description |
---|---|---|
el | Element |
要寻找父元素的指定元素 |
classForSelector | string |
目前只支持 class 选择器 |
检查指定元素是否包含指定 class
Kind: global function
Returns: boolean
- 元素上是否包含指定 class
Param | Type | Description |
---|---|---|
el | Element |
宿主元素 |
classToCheck | string |
待检查的 class |
给指定元素增加 class
Kind: global function
Returns: Element
- 添加完 class 后的元素
Param | Type | Description |
---|---|---|
el | Element |
要添加 class 的元素 |
classToAdd | string |
要添加的 class |
移除指定元素的指定 class
Kind: global function
Returns: Element
- 移除指定 class 后的元素
Param | Type | Description |
---|---|---|
el | Element |
要移除 class 的元素 |
classToRemove | string |
要移除的 class |
增加或删除一个元素上的指定的 class
Kind: global function
Returns: Element
- 改变完 class 后的元素
Param | Type | Description |
---|---|---|
el | Element |
将要改变 class 的元素 |
classToToggle | string |
要添加或删除的 class |
predicate | function | boolean |
添加或删除 class 的依据(额外的判断条件) |
设置元素的属性
Kind: global function
Param | Type | Description |
---|---|---|
el | Element |
要设置属性的元素 |
attributes | Object |
要设置的属性集合 |
- boolean 的属性,其值为 true/false
Kind: global function
Returns: Object
- 以 key/value 形式存储的属性
Param | Type | Description |
---|---|---|
el | Element |
要获取属性的元素 |
获取元素的指定属性,element.getAttribute 换一种写法
Kind: global function
Returns: string
- 获取的属性值
Param | Type | Description |
---|---|---|
el | Element |
要获取属性的元素 |
attribute | string |
要获取的属性名 |
设置元素的指定属性 element.setAttribute 换一种写法
Kind: global function
Param | Type | Description |
---|---|---|
el | Element |
要设置属性的元素 |
attr | string |
要设置的属性 |
value | Mixed |
要设置的属性的值 |
移除元素上的指定属性 element.removeAttribute 换一种写法
Kind: global function
Param | Type | Description |
---|---|---|
el | Element |
要移除属性的元素 |
attribute | string |
要移除的属性名 |
当拖动东西的时候,尝试去阻塞选中文本的功能
关闭对文本选中功能的阻塞
同原生的 getBoundingClientRect 方法一样,确保兼容性
在一些老的浏览器(比如 IE8)提供的属性不够时,此方法会手动补全
另外,一些浏览器不支持向 ClientRect/DOMRect 对象中添加属性,所以我们选择创建一个新的对象, 并且把 ClientReact 中的标准属性浅拷贝过来( x 和 y 没有拷贝,因为这个属性支持的并不广泛)
Kind: global function
Param | Type | Description |
---|---|---|
el | Element |
要获取 ClientRect 对象的元素 |
- clientLeft/clientTop 获取一个元素的左/上边框的宽度,不包括 padding 和 margin 的值
Kind: global function
Returns: Object
- 包含位置信息的对象
See: http://ejohn.org/blog/getboundingclientrect-is-awesome/
Param | Type | Description |
---|---|---|
el | Element |
要获取位置的元素 |
getPointerPosition(el, event) ⇒ Coordinates
- offsetWidth/offsetHeight: 元素宽/高,包括 border padding width/height scrollbar 2) pageX/pageY: 点击的 x/y 坐标,相对于 document,是个绝对值(当有滚动条时会把滚动条的距离也计算在内) 3) changedTouches: touch 事件中的相关数据
Kind: global function
Param | Type | Description |
---|---|---|
el | Element |
被点击的元素 |
event | Event |
点击事件 |
清空一个元素
Kind: global function
Returns: Element
- 移除所有子元素后的元素
Param | Type | Description |
---|---|---|
el | Element |
要清空的元素 |
向元素内插入内容
Kind: global function
Returns: Element
- 被塞了新内容的元素
Param | Type | Description |
---|---|---|
el | Element |
父元素 |
content | string | Element | TextNode | Array | function |
待插入的内容,会先经过 normalizeContent 处理 |
替换元素的内容 感觉名字起得不怎么好
Kind: global function
Returns: Element
- el 替换内容后的元素
Param | Type | Description |
---|---|---|
el | Element |
父元素 |
content | string | Element | TextNode | Array | function |
参见 normalizeContent 中参数描述 {@link: dom:normalizeContent} |
同 insertContent insertContent 是 vjs 里的函数,但我感觉名字起的不好,我想用这个
Kind: global function
Returns: Element
- el 替换内容后的元素
Todo
- 看可不可以直接把 insertContent 函数去掉(需考虑到后续对 vjs 插件的影响);
Param | Type | Description |
---|---|---|
el | Element |
父元素 |
content | string | Element | TextNode | Array | function |
参见 normalizeContent 中参数描述 {@link: dom:normalizeContent} |