KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架。
具备模块化、高扩展性、组件齐全,接口一致、自主开发、适合多种应用场景等特性。
在以下方面具有一定优势:
A、拥有大量的中文文档;
B、在国内具备一定的社区规模;
C、开发便捷;
D、综合借鉴国际先进的框架类库设计;
E、应用场景广泛。
下载引入KISSY 1.3.0
KISSY seed 1.3.0
引入方式有两种:
1、核心全部加载引入完整的 KISSY
2、按需加载模块引入 seed
引入完整的 KISSY
引入完整的 KISSY 会直接加载全部的 KISSY 核心模块
包括 dom,event,node,base,ajax 等
如果你下载了源码,直接引入 kissy-min.js
<script src="http://www.likecs.com/kissy-min.js"></script>如果你没下载源码,可以引用淘宝 cdn 上的地址
<script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js"></script> 操作元素KISSY 使用了类似 jQuery 的链式操作
只需定义
var $ = KISSY.all就可以进行如下操作
//Line 126: 获取图片列表元素 var imgList = $(\'.img-list\').all(\'li\'); //Line 132: 所有图片元素移除\'active\'类名 this.imgList.removeClass(\'active\'); //Line 133: 给第next个图片元素添加\'active\'类名 this.imgList.item(next).addClass(\'active\');链式操作
//Line 151 var cloneItem = selectedItem.one(\'img\') .clone() //复制选中的元素 .appendTo(\'.content\') //添加到容器最后 .css({ \'width\': \'100px\', \'height\': \'100px\'}) //设置样式 .animate({ \'top\': 100 }, 0.2, \'easeOut\') //添加一个动画 .animate({ \'top\': 200 \'left\': 200 }, 1, \'bounceOut\', function(){ ... }) //另一个动画绑定事件
KISSY 中的事件绑定非常简单
通过一个 on 操作就能完成事件绑定
//Line 178 $(\'button\').on(\'click\', function(ev){ //do something })