Weitere ähnliche Inhalte
Ähnlich wie KISSY for starter
Ähnlich wie KISSY for starter (20)
KISSY for starter
- 11. 为什么使用KISSY
• 入门简单
• API设计简单实用
• 组件贴近用户
• 支持 yui 和 jquery 两种语法,无缝切换
• 适合淘宝的JS类库
• 充分与基础设施融合
• 强大的“社区”支持
• 问题快速响应
- 13. Jquery-Like
• var el = KISSY.all(“#xx”);
• el.css(”width”,100).
parent(“.x”).
end().
css(“height”,200);
- 17. Sub project
• Kissy-tools: 工具集合
• Kissy-util: 代码片段
• Kissy-dpl: 设计模式规范库
• Kissy-ajbridge: aj-js 桥梁
• Kissy-nodejs: kissy on nodejs
- 18. Kissy tools
http://docs.kissyui.com/other/third.html#
- 19. Kissy util
http://docs.kissyui.com/other/third.html#
- 25. 常用功能介绍
• seed
• dom
• event
• anim
• node
• ajax
- 36. 包管理
KISSY.config({
packages:[
{
// 包名
name:"tc",
// 自动加上 ?t=20110323, 用于文件更新
tag:"20130323",
// 包对应路径, 相对路径指相对于当前页面路径
path:"../",
// 包里模块文件编码格式
charset:"gbk"
}
]
});
- 41. selector
// 获取符合选择器的所有元素.
KISSY.ready(function(S){
var els= S.DOM.query(“div");
})
// 获取符合选择器的第一个元素
KISSY.ready(function(S){
var el= S.DOM.get(“div");
})
- 42. sizzle
KISSY.use(“sizzle”, function(S){
var $ = S.all;
$('[class^=“test"]').hide();
})
http://www.codylindley.com/jquerysel
ectors/
- 43. class
• hasClass
• addClass
• removeClass
• replaceClass
• toggleClass
- 44. 常用操作
• val:获取value 值.
• text:获取元素所包含的文本值.相当于innerText
• html:获取符合选择器的第一个元素的 innerHTML.
• show:显示符合选择器的所有元素.
• hide:隐藏符合选择器的所有元素.
• toggle :显示隐藏
- 45. DOM 节点遍历
• parent:父节点.
• next:下一个同级节点
• prev:上一个同级节点
• siblings:所有同级节点.
• children:所有子节点.
- 46. DOM 尺寸相关
• width/height:高/宽.
• innerWidth/innerHeight:包含padding
• outerWidth/outerHeight:包含padding,margin,border
的宽/高
• scrollTop/scrollLeft:获取窗口或元素的
scrollTop/scrollLeft值.
• docHeight/docWidth:获取document的高宽
• viewportHeight/viewportWidth :获取可视区的高宽
- 47. DOM 节点修改
• insertBefore
• insertAfter
• append
• prepend
- 48. DOM 属性/数据
• attr:attributes
• hasAttr
• Prop:properties
• hasProp
• data:扩展属性
• removeData
• hasData
http://javascript.info/tutorial/attribute
s-and-custom-properties
- 49. Style & css
• addStyleSheet:将 cssText 字符串作为内
联样式添加到文档中.
• style
• css
- 53. 自定义事件
function MyClass(){
}
KISSY.augment(MyClass,KISSY.EventTarget);
var myObj = new MyClass();
myObj.on(“xx”,function(){
});
myObj.fire(“xx”);
- 55. 统一的注册方式
• 原生节点
– S.one(domNode).on(“click”,fn,context)
• 自定义事件
– obj.on(“customEvent”,fn,context)
- 56. 统一的触发方式
• Native event
– S.one(domNode).fire(“click”)
• Custom event
– obj.fire(“customEvent”)
- 57. 事件兼容
• submit/change @ie bubble, realtime fire
• focusin/out @non-ie
• mouseenter/leave @non-ie
• hashchange @ie
• mousewheel @firefox
• valuechange @all
- 61. var anim = new KISSY.Anim(
'#test',
{
'width': '100px',
'left': '900px',
'opacity': '.5',
'font-size': '48px',
'color': '#FF3333'
},
5,//持续时间
'bounceOut',//动画平滑函数
function(){
alert('demo 结束');
});
anim.run();
- 64. • Node 包括 dom , event , anim 模块的所
有功能, 推荐采用 Node 模块.
• 只需要把 KISSY.all 看做 jquery 中的 $
//推荐用法
var $ = KISSY.all;
$("#test").show();
- 67. Dom 操作
node.height(300)
.css({"color":"red"})
.addClass("cls")
.attr("data-value","test");
- 71. XMLHttpRequest
KISSY.io({
url : "getJson.htm",
cache : false,
type : "get",// "post"
data : { x: 1},
dataType : "json", // "text/html/xml"
success : function(d){
},
error : function(_,reason){
},
complete : function(){
}
});
- 73. form 异步提交
KISSY.io({
<form id="formEl>
url : "getJson.htm", <input name="f" type="file" />
type : "post", </form>
data : {x: 1},
dataType : "json",
form: "#formEl",
success : function(d){
},
error : function(_,reason){
},
complete : function(){
}
});
- 95. KISSY
Biz mod mod
Biz mod KISSY
mod
Page logic
KISSY
- 96. Gtalk/email:yiminghe@gmail.com
官方文档: http://docs.kissyui.com