跟着街霸玩KISSY

通过这个带交互的教程你将会对KISSY有一个基本的了解同时可以在你的项目中用上它。你将会学会如何选择元素、定义元素、以及使用一些十分酷的KISSY动画。

开始教程前请确保你已经对HTML、CSS和CSS选择器有了基本的了解。如果你想要先"温故"再"知新"，可以先点击这里w3cschool HTML教程，《Shay's intro to CSS & HTML》.

概述: 本教程使用了街霸中的Ryu和它著名的波动拳(hadouken)作为例子。众所周知，Ryu和波动拳都是Capcom的代表之作。

准备好了吗？让我们开始吧！（基于 KISSY 1.4.x）

什么是KISSY

关键字：淘宝、跨终端、模块化

这个教程我们使用Google Chrome浏览器控制台(以下简称Chrome控制台). 没错，你也可以用其他浏览器的控制台，但是我强烈建议你切换成Chrome跟着我们走.如果你还没有Chrome浏览器，你可以点击这里进行下载。

打开Chrome控制台

Chrome让你直接访问控制台，你可以使用控制台来直接编写Javascript代码(当然，在这里是KISSY代码)，同时可以直接看到代码运行后的结果。这是打开控制台的方法：

快捷键: Command + Option + J (Mac) or Control + Shift + J (Windows/Linux)。
你也可以点击设置-工具-Javascript控制台。

这是打开后的样子(你可能看到一些错误信息，不过不用怕，请忽略它们;另外，如果输入代码后，发现没有对应的输出，请在底部工具条选择"全部(All)")。

用KISSY选择元素

要选择下面这个绿色的方框，请在控制台输入下面这行简单的代码(对的，你需要跟着我一起做)：

$('#green-box')

刚才发生了这些：

$ 这个美元符号用过jQuery的应该很熟悉，在这里我再引入node模块后，用 var $=Node.all; 定义。（与jQuery库对比：引入jQuery源文件后，可以直接使用$）
('#green-box') 这是我们选择一个id为'green-box'的元素。如果你想温习一下CSS选择器，请点击这里

你应该能看到如图的结果，返回了符合这个选择器的 NodeList（细节可以参考 KISSY NodeList）（与与jQuery库对比：jQuery 如果用这条命令，会直接返回[<div id="green-box"></div>]，在 KISSY 中可以使用$('#green-box').getDOMNodes() 得到相同的结果；）

使用 KISSY API

备注: 在 KISSY 的环境中，API是一系列帮助你如何使用它的方法列表，相当于一本使用指南。这个链接可以访问到API手册。

既然你已经知道如何选择一个元素，那么我们继续去改变它的边框色吧. 一个淡天蓝(LightSkyBlue)如何(这是其中一个CSS颜色名)？为了实现这个目的我们需要使用KISSY's CSS API。这是你需要输入的代码：

$('#green-box').css('background-color','lightskyblue')

你猜到会发生什么吗？

$('#green-box') 我们选择一个id为'green-box'的元素。
.css(我们使用KISSY's CSS API。
'background-color',我们改变这个元素的背景色为'lightskyblue(淡天蓝色)'。

提示: 你可以直接用键盘向上方向键"↑"来选择之前输入的代码。

学习提示: 虽然你可以直接复制/粘贴以上代码来得到结果，但是我强烈建议你最好自己敲一次。

让我们继续改变边框色为钢铁蓝(steelblue)吧。你能猜出怎么实现吗?

$('#green-box').css('border-color','steelblue')

跟上面改变背景色差不多，只是这里改变的是'border-color'。

其实，我们可以把颜色设置为'transparent'来使其透明，例如

$('#green-box').css('background-color','transparent')

是不是开始领略一二了？对你来说并不难，对吧。 :)

想更好玩一点？在框里加一个波动拳吧！

我们有个波动拳图片一直保存在http://i.imgur.com/8NArGWZ.gif。要加入它到方框我们需要使用HTML的img标签去创建一个标签并用KISSY's HTML API加入一个图片。

这是代码：

$('#green-box').html('<img src="http://i.imgur.com/8NArGWZ.gif" />')

注意: 注意类名和src的地址我们都使用一个双引号括住，因为我们是在内嵌它们。

另一种加入波动拳的方法是使用KISSY's Append API。

$('#green-box').append('<img src="http://i.imgur.com/8NArGWZ.gif" />')

加分点:你能猜到如果你不断敲击'append'指令数次会发生什么吗?现在不妨试试多次敲击以上代码试试...

不要忘了你可以用键盘上翻键"↑"来查找上一条代码哦。

...

你能找到他们的不同点吗？如果你说'append'会不断在上一个元素后添加波动拳而'html'方法只会替代旧的波动拳的话，那么恭喜你，你对了！

这是这一节你学到的东西:

如何用KISSY选择一个元素。
如何用KISSY CSS API来改变背景和边框色。
如何改变一个元素的HTML内容。
如何在元素后添加HTML内容。

你的第一个KISSY项目

你现在已经知道KISSY的一些基本操作了。不如来做一个小项目加深你对KISSY的认识？这是我(Carl Sednaoui)提出的项目：让Ryu发射波动拳。

这是我们做完项目后的样子，确保你已经鼠标移动到它身上并点击它。

添加波动拳的声音

开始我们的项目

这是我们需要为项目准备的几个东西:

四张图，包括静止的Ryu，动态的Ryu，Ryu发波动拳的姿势和我们的波动拳。
一个空的<div>

幸运地，我已经为你准备好了一个空的<div>，它的id是'my-div'。你已经知道如何选择代码了吧：

$('#my-div')

你应该看到你的命令行是这样的:

把静止的Ryu加进来

既然我们已经知道我们能选择我们的<div>，那么继续让我们把Ryu加上吧。这是你需要的图片 http://i.imgur.com/90Mmdcm.png

$('#my-div').append('<img src="http://i.imgur.com/90Mmdcm.png">')

备注:你将会注意到我们最后一行的代码有一个"▶"符号。这意味着里面隐藏了一些详细内容。如果你点击它你会看到<div>的扩展里面有我们新加的图片：

添加动态的Ryu

当用户鼠标移动到Ryu上，我们想让他运动，让他看起来已经准备好战斗了。这是我们的动态Ryu图：http://i.imgur.com/nTj3Fxx.gif。要实现这个我们需要使用KISSY's on API，它可以为选择器绑定多个触发事件。

在我们的例子中，我们需要绑定两个事件。第一个事件是“mouseenter”——改变Ryu的状态从静止到运动；第二个事件是“mouseleave”——让Ryu恢复成静止。（与jQuery库对比：jQuery可以直接使用jQuery's Hover API）

下面是你要运行的代码

快速提示: 由于你在使用命令行，所以一般你会把所有代码用一行输入。但是，如果你想要用几行输入，你可以用shift+enter(windows)或option+enter(mac)来换行，输入完后再输入enter运行。

$('#my-div img').on({
  'mouseenter':function() {
      this.src = 'http://i.imgur.com/nTj3Fxx.gif';
    },
  'mouseleave':function() {
      this.src = 'http://i.imgur.com/90Mmdcm.png';
    }
})

如果你的代码不工作了，不要惊慌。确保你认真检查清楚它的语法，打错字是很经常出现的情况。同时，滚到下面我会把所有代码重新给出(checkpoint)。

在给代码前我们先分析一下上面的代码块。

$('#my-div img') 首先，我们选择一个#my-div里面的一个img元素
.on({ 接着我们使用KISSY's on API.
'mouseenter':function() {this.src = 'http://i.imgur.com/nTj3Fxx.gif';} 第一个事件，我们改变'this'元素的src属性为动态Ryu图片。'this'这里指的是我们上面选择的img元素。
, 逗号用于分割两个方法。
'mouseleave':function() {this.src = 'http://i.imgur.com/90Mmdcm.png';} 最后，我们第二个事件做一样的事情只是把src属性改为静态Ryu图片。

如果你鼠标移动到Ryu身上你将会看到他上跳下窜。

checkpoint:这是上面的所有代码，享受复制/粘贴的过程吧。

$('#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')
$('#my-div img').on({
  'mouseenter':function() {
      this.src = 'http://i.imgur.com/nTj3Fxx.gif';
    },
  'mouseleave':function() {
      this.src = 'http://i.imgur.com/90Mmdcm.png';
    }
})

提示: 如果你输入错了但不知道如何刷新，请直接F5刷新页面并回到这里复制代码，然后我们继续向下走。

备注: 如果到这里你开始有一些疑惑，这是正常的。如果你继续阅读这个教程你将会学会更多。我们将会继续向前走，给我们更多的时间来练习。这是接下来要实现的东西：

当用户点击Ryu后加上一个准备发射波动拳的姿势。
在Ryu后面添加波动拳。
让波动拳移动。
停止发射波动拳的姿势。
波动拳移动停止后清楚它。

发射波动拳的姿势

我们现在想要点击Ryu就改变姿势。为此我们继续使用KISSY's on API中的“mousedown”事件,（与jQuery库对比：jQuery可以直接使用jQuery's Mousedown API）。mousedown事件的使用场景：当元素被点击的时候就会被触发。这是使用它的方法:

$('#my-div img').on('mousedown',function() {
    this.src = 'http://i.imgur.com/Rfj0a80.png'
})

看看发生了什么:

$('#my-div img') 首先，我们选择了#my-div里面的img元素
.on('mousedown',然后使用了KISSY's on API.
function() { this.src = 'http://i.imgur.com/Rfj0a80.png' } 这方法将会在mousedown被触发后改变图片的src属性。是不是和上面的“mouseenter”、“mouseleave”类似？

Checkpoint: 这是所有我们刚刚输入的代码。

$('#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')
$('#my-div img').on({
  'mouseenter':function() {
      this.src = 'http://i.imgur.com/nTj3Fxx.gif';
    },
  'mouseleave':function() {
      this.src = 'http://i.imgur.com/90Mmdcm.png';
    }
})
$('#my-div img').on('mousedown',function() {
    this.src = 'http://i.imgur.com/Rfj0a80.png'
})

添加波动拳

让我们添加波动拳吧，这是波动拳的图：http://i.imgur.com/oTyQRvX.gif.

这和我们刚才做的很像，但不同的是我们需要用'append'把波动拳元素添加到Ryu后面。要附加的元素是一张图片，所以是img标签，同时我们为这个标签加上一个类(class)为'demo-hadouken'，这是为了可以控制它对齐于Ryu的手(使用CSS)。代码如下：

$('#my-div img').on('mousedown',function() {
    $('#my-div').append(
    '<img class="demo-hadouken" src="http://i.imgur.com/oTyQRvX.gif">'
    );
})

提示: 这是加在'#my-div img'的第二次mousedown的事件，这几个事件将会按顺序地执行。

这是运行的过程:

$('#my-div img') 首先，我们选择了'#my-div'的img元素。
.on('mousedown', 然后使用jQuery's Mousedown API。
function() {方法开始。
$('#my-div').append( 当方法执行，我们将会在'my-div'后面附加内容。
'<img class='demo-hadouken' src="http://i.imgur.com/oTyQRvX.gif">' 一个带着class的图片文件。
); 结束append方法。
}) 结束函数。

Checkpoint: 这是刚才的代码。

$('#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')
$('#my-div img').on({
  'mouseenter':function() {
      this.src = 'http://i.imgur.com/nTj3Fxx.gif';
    },
  'mouseleave':function() {
      this.src = 'http://i.imgur.com/90Mmdcm.png';
    }
})
$('#my-div img').on('mousedown',function() {
    this.src = 'http://i.imgur.com/Rfj0a80.png'
})
$('#my-div img').on('mousedown',function() {
    $('#my-div').append(
    '<img class="demo-hadouken" src="http://i.imgur.com/oTyQRvX.gif">'
    );
})

让波动拳动起来

这是我们等待已久的时刻...让这个波动拳动起来！为此我们使用KISSY's Animate API。

$('#my-div img').on('mousedown',function() {
    $('.demo-hadouken').animate( {
        "margin-left": "600px"
    }, 1, 'swing', function() {
        $('.demo-hadouken').remove();
    })
})

这是发生的过程:

$('#my-div img') 你懂得，选择元素。
.on('mousedown', 使用jQuery's Mousedown API。
function() { 函数开始。
$('.demo-hadouken').animate( 选择class为'demo-hadouken'的元素同时使用animate方法。
{ "margin-left": "600px" }, 1, 'swing' KISSY动画需要几个参数：需要改变的CSS属性、时间函数(以秒为单元；与jQuery库对比：jQuery animate的时间函数为毫秒级miliseconds)和一个CSS过渡函数。在这里我们加上一个600px的左边margin值，时间是1秒内，同时我们使用默认的'swing'过渡。
, function() { $('.demo-hadouken').remove(); 选中 class 为'demo-hadouken'的波动拳元素，然后清除它(remove)。（与jQuery库对比：jQuery animate 可以直接使用 this.remove(); 而 KISSY 回调 callback 在每个元素动画结束后都会回调, this 值指向当前单个元素所属的动画对象.）
}) animate结束。
}) mousedown结束。

Checkpoint: 这是上面的全部代码。

$('#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')
$('#my-div img').on({
  'mouseenter':function() {
      this.src = 'http://i.imgur.com/nTj3Fxx.gif';
    },
  'mouseleave':function() {
      this.src = 'http://i.imgur.com/90Mmdcm.png';
    }
})
$('#my-div img').on('mousedown',function() {
    this.src = 'http://i.imgur.com/Rfj0a80.png'
})
$('#my-div img').on('mousedown',function() {
    $('#my-div').append(
    '<img class="demo-hadouken" src="http://i.imgur.com/oTyQRvX.gif">'
    );
})
$('#my-div img').on('mousedown',function() {
    $('.demo-hadouken').animate( {
        "margin-left": "600px"
    }, 1, 'swing', function() {
        $('.demo-hadouken').remove();
    })
})

结束Ryu的发波动作

我们快要完成了！最后一件事我们想要做的是确保Ryu发波动拳后复位到他的战斗状态。为此我们使用 onmouseup 事件

$('#my-div img').on('mouseup',function() {
    this.src = 'http://i.imgur.com/nTj3Fxx.gif'
})

这是发生的过程：

$('#my-div img') 选择一个#my-div下面的img。
.mouseup( 然后使用jQuery's Mouseup API。
function() { this.src = 'http://i.imgur.com/90Mmdcm.png' } 第一个方法，在mouseup后改变图片的src属性。(跟上面的mouseover对比，应该不难理解。)

Final checkpoint: 这是上面所有的代码！

$('#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')
$('#my-div img').on({
  'mouseenter':function() {
      this.src = 'http://i.imgur.com/nTj3Fxx.gif';
    },
  'mouseleave':function() {
      this.src = 'http://i.imgur.com/90Mmdcm.png';
    }
})
$('#my-div img').on('mousedown',function() {
    this.src = 'http://i.imgur.com/Rfj0a80.png'
})
$('#my-div img').on('mousedown',function() {
    $('#my-div').append(
    '<img class="demo-hadouken" src="http://i.imgur.com/oTyQRvX.gif">'
    );
})
$('#my-div img').on('mousedown',function() {
    $('.demo-hadouken').animate( {
        "margin-left": "600px"
    }, 1, 'swing', function() {
        $('.demo-hadouken').remove();
    })
})
$('#my-div img').on('mouseup',function() {
    this.src = 'http://i.imgur.com/nTj3Fxx.gif'
})

额外加分

如果你点击Ryu 100次足够快的话，你会注意到波动拳会到处射。虽然这看起来十分酷，但是这是意料之外的影响，发生的原因是我们在添加新的波动拳前没有去掉已经存在的波动拳。要修复这个我们需要在发射波动拳前添加以下代码。

注意: 仅仅添加下面代码在最下方会让Ryu停止发波。这是因为我们的时间顺序错了。再看一下下面的代码，那是正确的顺序。

$('#my-div img').on('mousedown',function() {
    $('.demo-hadouken').remove();
})

全部代码

$('#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')
$('#my-div img').on({
  'mouseenter':function() {
      this.src = 'http://i.imgur.com/nTj3Fxx.gif';
    },
  'mouseleave':function() {
      this.src = 'http://i.imgur.com/90Mmdcm.png';
    }
})
$('#my-div img').on('mousedown',function() {
    this.src = 'http://i.imgur.com/Rfj0a80.png'
})
$('#my-div img').on('mousedown',function() {
    $('.demo-hadouken').remove();
})
$('#my-div img').on('mousedown',function() {
    $('#my-div').append(
    '<img class="demo-hadouken" src="http://i.imgur.com/oTyQRvX.gif">'
    );
})
$('#my-div img').on('mousedown',function() {
    $('.demo-hadouken').animate( {
        "margin-left": "600px"
    }, 1, 'swing', function() {
        $('.demo-hadouken').remove();
    })
})
$('#my-div img').on('mouseup',function() {
    this.src = 'http://i.imgur.com/nTj3Fxx.gif'
})

十分感谢你阅读完这个教程，希望你乐在其中。如果你想要添加波动拳的声音你可以看看这里的教程Thinkful's HTML5 Audio Guide。

附加

怎么安装KISSY?

最简单的办法是从KISSY 官方文档那找到种子文件。这是代码片段:

<script src="http://g.tbcdn.cn/kissy/k/1.4.1/seed.js"></script>，推荐将种子文件至于``标签内

你现在可以创建一个基本的HTML文件同时加上KISSY脚本在head标签里。下面的例子我们同时加入另一个javascript文件叫'example.js'，这是假设我们写了自己的其他KISSY代码，就像我们今天教程中的所有代码可以写进这个文件中，然后像这样用script标签添加即可。

<html>
    <head>
        <script src="http://g.tbcdn.cn/kissy/k/1.4.1/seed.js"></script>
        <script src="example.js"></script>
    </head>
    <body>
        <!-- Your content goes here -->
    </body>
</html>

注意:你需要确保你的KISSY在你的DOM元素加载完毕后才能使用。若听起来有点慌张请不要害怕，看看这里。