课程内容

本教程完整再现了使用HTML、jQuery和EasyUI设计实现房贷计算的全流程，并给出了教程涉及知识点的详细参考资料和演示demo，供初学者形成完整的学习路径。

目标人群

教程难度简单，属于HTML、jQuery和EasyUI开发的基础课程。对于刚开始学习前端编程的新手，本教程是一个很好的项目练手，有助于形成完整的学习路径和知识体系；对于想学习jQueryEasyUI的读者，教程第三部分提供了详细的入门指导。

最终效果展示

为什么要编写这样一篇教程、这是一篇什么样的教程

用刚入门的编程语言来实现一个功能总是会感觉困难重重，尤其是新手，经常会被各种小问题卡住，却不知所措。

正确编写并运行一段程序需要一些先修知识，如果读者不了解这些先修知识，就会大大增加学习的难度。本教程并没有假设读者知道那些应该知道的东西，就像读者什么都懂一样，一上来就开始讲解代码；本教程也不是给出泛泛的先修建议，比如掌握了HTML和jQuery就能够读懂这篇教程，因为教材中的代码只用到了一部分HTML和jQuery的内容，在学习完大部头的巨著,精通了这些知识之前，完全读者就可以学习这篇教程。与前两种情况不同的是，本教程会把每段代码的先修知识予以明确说明，不多也不少，就是那些先修知识。读者需要检查自己对先修知识的了解程度，查漏补缺，如果已经掌握，便可以顺利理解后续的代码；如果没有掌握，可以按照教程中给出的建议快速入门。

编写程序是一个从0到1的过程，直接给出代码，写好注释对于新手学习来说依旧难度过大。本教程会重现编码过程，展现编程中遇到的问题，以及如何回答这些问题，将编程的体验以及思考过程融入教程之中，从而完整展现从0，到0.1再到0.2......一直到1的的整个编程过程。

编写一个大程序的有效方法是控制复杂度，将大问题分解为几个小问题，再分析每个小问题包含哪几个方面，进而形成一个完整的知识体系。本教程采取了同样的讲授思路，将用EasyUI实现房贷计算器分为了三个不同层次的问题：

1. 用HTML实现前端的内容展现。房贷计算器需要用户选择贷款类型，输入贷款金额，计算每月还款额等等内容，这一部分只包含HTML代码，思考一个房贷计算器在内容上包含哪些部分，应该用哪些HTML的标签来实现这些内容。
2. 用jQuery实现前端与用户的交互。当用户选择贷款类型时，贷款利率也随之改变，当用户点击计算时，每月的还款结果也随之计算出来。这一部分只包含jQuery和JavaScript代码，在第一部分的基础之上，完成与用户的交互，并将贷款的计算结果在前端展示。至此一个用HTML加jQuery编写的房贷计算器在功能上就已经实现完毕了。
3. 虽然教程的主题是用jQueryEasyUI实现房贷计算器，但是当我们准备好前两个部分之后，将会大大降低学习EasyUI的难度。在前两部分的代码基础之上，这一部分只包含EasyUI代码，我们将考虑用哪些EasyUI插件和插件的哪些属性、事件和方法，来实现第一部分的HTML内容和第二部分的jQuery交互。