qcdom-es v1.4.2
#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对象的类,返回布尔值
$removeClass
移除dom对象的类
$toggleClass
移除/增加dom对象的类
$setStyle
设置dom元素的样式值
$getStyle
获取dom元素的样式值
- dom dom对象,或者dom对象数组或者nodeList,当不是单个dom对象时只会获取第一个
- styleName 样式名称,如$getStyle($('p'), 'width') 表示获取页面第一个p标签的长度
$render
提供高效率的dom渲染能力你可以传一个js对象或者一组js对象或者就是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绑定事件
$request
发起请求
- configs 请求的参数配置
// 常用的配置如下
// 支持get和post两种类型 在下一个标题中有封装的get和post
$request({
url: '',
type: 'post',
success (res) {},
data: {}
})
$get
发起get请求
$get('url', {name:'aaa',age:24}, res => {
// do sth with res
})
$post
发起post请求
$post('url', {name:'aaa',age:24}, res => {
// do sth with res
})
$each
迭代循环数组或者对象或者数字,可以用return false跳出循环, 如果全部迭代完成该函数会返回true,如果被中断则会返回false
// 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
解除事件
$attr
给dom元素添加属性
$attr($('div'), {
key: 'value'
})
$getType
获取任意值的值类型
$getType(1)
// 'Number'
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago