qcdom-es
v1.4.2
Published
此库提供了常用的dom操作方法,通过构建工具 你可以轻松地进行 tree-shaking 优化
Downloads
14
Readme
#qcdom-es 此库提供了常用的dom操作方法,通过构建工具 你可以轻松地进行 tree-shaking 优化
// 所有方法导入示例
import {
$, $s, $addClass, $removeClass,
$hasClass, $toggleClass, $setStyle, $getStyle,
$getType, $render, $onEvent, $request,
$get, $post, $each, $offEvent,
$attr
} from 'qcdom-es'
$
接受css选择器字符串 返回单个dom对象
$s
接受css选择器字符串 返回nodeList
$hasClass
判断是否有dom对象的类,返回布尔值
- [dom] dom对象,或者dom对象数组或者nodeList
- [className] 类字符串
$removeClass
移除dom对象的类
- [dom] dom对象,或者dom对象数组或者nodeList
- [className] 类字符串
$toggleClass
移除/增加dom对象的类
- [dom] dom对象,或者dom对象数组或者nodeList
- [className] 类字符串
$setStyle
设置dom元素的样式值
- [dom] dom对象,或者dom对象数组或者nodeList
- [conf] 样式对象,如{background: 'red'},会被添加到dom的style属性上
$getStyle
获取dom元素的样式值
- [dom] dom对象,或者dom对象数组或者nodeList,当不是单个dom对象时只会获取第一个
- [styleName] 样式名称,如$getStyle($('p'), 'width') 表示获取页面第一个p标签的长度
$render
提供高效率的dom渲染能力你可以传一个js对象或者一组js对象或者就是dom对象本身,
当传入的是一个数组是该函数会使用文档随便从而优化效率
- [dom] | [object] | [Array] 只有唯一参数可以是dom,对象或者数组,使用如下
const listItems = ['苹果', '香蕉', '草莓'].map(
v => ({ tag: 'li', text: v })
)
const list = $render({
tag: 'ul',
className: 'list-box',
prop: {
'data-word': 'hello world'
},
style: {
background: 'red'
},
children: listItems
})
document.body.appendChild(list)
<ul class="list-box" data-word="hello world" style="background: red">
<li>苹果</li>
<li>香蕉</li>
<li>草莓</li>
</ul>
$onEvent
给dom绑定事件
- [dom] dom元素或者一组dom元素
- [eventType] 事件类型
- [handle] 一个事件处理函数
$request
发起请求
- [configs] 请求的参数配置
// 常用的配置如下
// 支持get和post两种类型 在下一个标题中有封装的get和post
$request({
url: '',
type: 'post',
success (res) {},
data: {}
})
$get
发起get请求
- [url] 请求地址
- [data] 请求数据json格式
- [success] 成功请求的回调函数
$get('url', {name:'aaa',age:24}, res => {
// do sth with res
})
$post
发起post请求
- [url] 请求地址
- [data] 请求数据json格式
- [success] 成功请求的回调函数
$post('url', {name:'aaa',age:24}, res => {
// do sth with res
})
$each
迭代循环数组或者对象或者数字,可以用return false跳出循环, 如果全部迭代完成该函数会返回true,如果被中断则会返回false
- [arr] 数组或者是类数组或者是对象
- [callback] 回调函数,回调函数里面的参数根据第一个参数类型的不同返回不同的参数,有如下三种情况
// 1 一个数组
$each([1, 2, 3], (val, index, arr) => {
console.log(val, index, arr)
})
// 1 0 [1,2,3]
// 2 1 [1,2,3]
// 3 2 [1,2,3]
// 2 一个对象
$each({a:1,b:2,c:3}, (val, key, obj) => {
console.log(val, key, obj)
})
// 1 'a' {a:1,b:2,c:3}
// 2 'b' {a:1,b:2,c:3}
// 3 'c' {a:1,b:2,c:3}
// 3 一个数字 > 0的否则无效
$each(3, (v, n)) => {
console.log(v, n)
})
// 1 3
// 2 3
// 3 3
$offEvent
解除事件
- [dom] dom元素或者一组dom元素
- [eventType] 事件类型
- [handler] 事件处理函数, 传入函数的变量名
$attr
给dom元素添加属性
- [dom] dom元素或者一组dom元素
- [conf] 属性配置
$attr($('div'), {
key: 'value'
})
$getType
获取任意值的值类型
$getType(1)
// 'Number'