还可以使这个过程变得更复杂，例如下面的代码：

　　这个的意思是，当文档准备好时，找到一个id叫hello的按钮元素，并当点击这个元素的时候，在body下添加一个Hello!的字样。

　　在完成高保真原型时，我们大部分情况需要的交互行为往往是：点击/悬停一个页面元素，关闭/打开/弹出/改变另一个元素样式/改变内容等等。只需要掌握jQuery中基础的两个触发事件click()和hover()，以及addClass()、removeClass()、show()、hide()、append()、text()、attr()六个基础方法，就可以搭配jQuery已有框架完成各种交互特效。

　　我们来尝试完成一个点击某个按钮出现一个隐藏图层的代码：

　　首先写HTML，我们需要一个按钮和一个隐藏的文字域：

　　这里省略了CSS渲染的过程，我们来写一段点击按钮打开文字域的代码，先不着急写代码，先想想我们要做什么，我们要做下面几件事情：

　　等待文档读取完毕;

　　寻找到这个按钮;

　　点击它;

　　找到这个隐藏的文字域;

　　把它显示出来;

　　于是我们开始写程序，第一步等待文档读取完毕：

　　第二步寻找这个按钮：

　　第三步点击它：

　　第四步找到目标的那个隐藏文字域：

　　第五步将它显示出来：

　　jQuery提供了很多特效的控件帮助你在细节上设计你的交互行为，比如在代码中加入fadeIn()：

　　Open a textpad

        jQuery以及其他一些框架拥有大量的行为效果插件，可以通过阅读API来了解各种方法的使用规则，基本思路跟上面这个简单的例子是一致的。

　　前端技术是交互设计之外一门相当精深的领域，不可能通过一篇简单的博客就能覆盖到全部，这篇博客的目的是至少当你有机会和前端开发人员一起合作的时候，适当一点前端技术知识可以帮助你更好的与前端开发人员进行沟通。

　　很多交互细节不是文字或图片能够解释清楚的，虽然使用Axure可以或多或少解决这个问题，但是Axure的存在有时阻碍了和开发人员的沟通，因为这不是个两种角色都能使用的技能，那么既然现在的前端技术已经大大发展，为何不尝试学习一些前端技术，将自己的想法用代码的形式表现出来。

　　这只是抛砖引玉的文章，希望越来越多的交互设计师能够花一些时间学习一些前端技术，下面提供的链接是一些我经常使用的框架和工具。

　　前端框架

　　jQuery – 流行框架也是博客使用的框架;

　　Bootstrap – Twitter出品的框架，包含精美的整套UI解决方面，全面支持Less，各种交互模式插件完整;

　　Foundation – Zurb出品的前端框架，各种交互控件完整，UI不如Bootstrap精细;

　　1140 Css Grid – 配合Responsive Design的CSS框架，优于960.gs;

　　实用工具

　　JSFiddle – 很好用的在线HTML+CSS+JS编辑器，支持jQuery和Bootstrap框架;

　　Pears – 很好用的基础交互模式HTML和CSS模板。