简介
webnano 是一个基于 TypeScript 开发的轻量级 DOM 操作库,用于处理 DOM 操作和事件绑定。通过 webnano,您可以轻松地操作 DOM 元素,实现各种复杂效果。webnano 也支持大多数常用的浏览器和 Node.js 环境。
安装
使用 npm 安装 webnano,可以全局安装,也可以在项目中使用:
# 全局安装 npm install -g webnano # 在项目中使用 npm install webnano
使用
获取元素
- webnano(selector: string | Element | Element[]): ElementInfo
selector: string 是查询元素的选择器,可以传递一个选择器字符串,也可以传递原生的 DOM 元素或者元素集合。ElementInfo 提供了一些常用的 DOM 元素属性的读取和设置方法。
-- -------------------- ---- ------- -- -- -------- ------ - ------- - ---- --------- ----- ----- - ----------------- --------------------- -- -------- -- -- -------- ----- --- - ----------- ---- --- ------ -- -- ---- - ------------------ -- ---- -
元素操作
- addClass(className: string): ElementInfo
为元素添加 class。可以添加多个 class,用空格分隔。
const el = webnano('#el') el.addClass('class1 class2')
- removeClass(className: string): ElementInfo
从元素中移除 class。可以删除多个 class,用空格分隔。
const el = webnano('#el') el.removeClass('class1 class2')
- hasClass(className: string): boolean
检查元素是否包含指定的 class。
const el = webnano('#el') if (el.hasClass('class1')) { console.log('包含 class1') }
- attr(attrName: string, value?: string): ElementInfo | string
读取或设置元素的属性值。
const el = webnano('#el') el.attr('title', 'hello') const title = el.attr('title')
- prop(propName: string, value?: any): ElementInfo | any
读取或设置元素的属性值。与 attr 方法类似,但是可以设置任意属性,如 value、checked 等。
const el = webnano('#el') el.prop('checked', true) const checked = el.prop('checked')
- css(cssPropName: string, value?: string): ElementInfo | string
读取或设置元素的样式属性。
const el = webnano('#el') el.css('color', 'red') const color = el.css('color')
- text(value?: string): ElementInfo | string
读取或设置元素的文本内容。
const el = webnano('#el') el.text('hello') const text = el.text()
- html(value?: string): ElementInfo | string
读取或设置元素的 HTML 内容。
const el = webnano('#el') el.html('<p>hello</p>') const html = el.html()
- val(value?: string): ElementInfo | string
读取或设置元素的值。对于 input、select、textarea 等表单元素,可以直接设置或读取其值。
const inputEl = webnano('#input') inputEl.val('hello') const inputVal = inputEl.val()
事件绑定
- on(eventName: string, listener: EventListener): ElementInfo
为元素绑定事件。eventName 为事件名称,listener 为事件回调。
const el = webnano('#el') el.on('click', () => { console.log('clicked') })
- off(eventName: string, listener: EventListener): ElementInfo
从元素中移除事件。eventName 为事件名称,listener 为事件回调。
const el = webnano('#el') el.off('click', () => { console.log('clicked') })
- once(eventName: string, listener: EventListener): ElementInfo
为元素绑定一次性事件。事件只会触发一次,触发后会自动移除事件。
const el = webnano('#el') el.once('click', () => { console.log('clicked') })
总结
通过本文,您学习了如何使用 webnano 库进行 DOM 操作和事件绑定。webnano 提供了多种便捷的方法,使得操作 DOM 元素变得简单易懂。同时,本文还给出了示例代码,帮助您更好地理解 webnano 的使用方法。
值得注意的是,webnano 是一个轻量级库,相比于其他 DOM 操作库,它更加简单易用,并且不会占用太多的内存和 CPU 资源。如果您正在进行前端开发,不妨试试 webnano,相信它能为您的开发工作带来不少帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/57667