tethys
这是一个微型的库,包含最常用的dom操作,压缩后只有4KB
。
起源
自从 angular
、vue
这类框架出现之后,我们终于不用再面对业务逻辑
与dom操作
混杂的代码。
但是,在极少的时候,特别是在组件中,我们仍然想要对页面元素进行直接的处理。
可是,你又不想仅仅为了用到几个方法,就去引入几十K的zepto
或上百K的jquery
。
这种情况下,tethys
是一个不错的选择。
它包含以下实例方法:
- find
- each
- on
- trigger
- css
- style
- width
- height
- attr
- hasClass
- addClass
- removeClass
- show
- hide
- html
- append
- delay
和以下静态方法:
安装
如果在Node.js环境中使用,通过以下命令安装它。
npm i tethys
https://www.npmjs.com/package/tethys
引用
标签引入:
如果通过script方式引入,你可以通过全局变量tethys
来调用它。
如果全局变量$
没有被其它库或者变量占用的话,那么$
会指向tethys
。
CommonJS/CMD/AMD引入:
var $ = ;
ES6引入:
;
查找元素
通过选择器查找
;;
直接传入元素
;
指定查找范围
;
与jQuery类似,你将得到一个包含查找到的节点的数组,这个数组有下列方法供你操作:
find
查找子元素
; // 查找<head>中的所有<script>
each
遍历
;
on
事件绑定
;
trigger
触发元素上绑定的事件监听函数
;
可以触发的事件包括:
focus
blur
select
change
和所有鼠标事件:
mousedown
mouseup
mousemove
click
dblclick
mouseover
mouseout
mouseenter
mouseleave
contextmenu
css
查询实际样式(computedStyle)
; // red
设置样式
;;
style
查询内联样式,如果没有内联样式,返回空字符串
style'color';
width
设置或查询宽度,参数或返回值均不带单位且是数值类型
width;width200;
height
设置或查询高度,参数或返回值均不带单位且是数值类型
height;height200;
attr
设置单个属性
;
设置多个属性
;
取属性:
; // 16
class
添加class
;
删除class
;
判断是否存在指定class
; // true
show/hide
显示
;
隐藏
;
html
修改文档的innerHTML
;
append
追加子元素
;
delay
延时执行一个函数
;
链式调用
;
获得原生节点
栗子1:获得第一个script标签
0; // <script>...</script>
栗子2:遍历所有style标签
静态方法
除了上述实例方法以外,还有下面的静态方法可以使用。
extend
浅层复制
$; $;
深层复制
$