jQueryEasyUI实现房贷计算器详细教程2--jQuery部分

1.从载入JavaScript开始

jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程。这一部分介绍下载和载入jQuery。

源代码：

        <script src="jquery-3.2.1.js"></script>
        <script src="fd_jquery.js"></script>  
    </body>

先修知识：

1. <script> 标签用于在HTML中载入JavaScript，src属性表示载入的JavaScript代码的位置。参考链接：script。推荐将<script> 标签放在 </body> 标签之前。将下载好的jQuery库源码，和我们将要编写的JavaScript文件，放在上一节HTML文件的相同目录下即可。
2. 只需要对JavaScript有一个简略了解即可，包括什么是JavaScript，如何打开、编辑、新建一个JavaScript文件，后续教程中会对用到的JavaScript知识给出明确说明。参考链接：关于JavaScript。
3. 只需要对jQuery有一个简略了解即可，包括什么是jQuery，如何下载最新的jQuery库，后续教程中会对用到的jQuery知识给出明确说明。参考链接：jQuery 简介，jQuery 下载。

2. 在文档在加载之后运行 jQuery 代码

我们希望所有的jQuery代码都在文档加载完成之后执行，在fd_jquery.js中编写如下代码，并将后续所有jQuery代码都放在这个方法中即可。
源代码：

$(document).ready(function(){
   

});  

先修知识：

1. 以上代码还有一个更加简便的等价写法（参考链接：ready() 方法）：
   $(function(){

   });

2. $是jQuery的简写形式，参考链接：jQuery 语法。

3. 选择贷款类别

功能：

当用户点击贷款类别的单选按钮时，下方贷款利率文本框会显示对应贷款类别的年利率。根据教程编写时的贷款利率，大于五年的商业贷款年利率是4.90%，大于五年的公积金贷款年利率是3.25%，参考链接：2017年房贷利率，因为房贷利率会不断调整，最终的计算结果仅供参考。

效果截图：

源代码：

    $(":radio[name=dai_kuan_lei_bie]").change(function () {
   
        if ( $(":radio[name=dai_kuan_lei_bie]:checked").val() == "shang_ye_dai_kuan")
        {
            $("#id_dai_kuan_li_lv").val("4.90");
        } else
        {
            $("#id_dai_kuan_li_lv").val("3.25");
        }
    });

先修知识：

1. 代码$("input:radio[name=dai_kuan_lei_bie]").change(function () {});完整展现了在HTML标签上发生一个事件时，包含的三部分jQuery代码：选择器、事件和当事件发生时执行的函数。
2. 只要对jQuery选择器有一个简要了解即可，教材中只用到了两类选择器，一类是用来选择一个单选按钮的，另一类是用id属性选择标签，会在代码第一次出现的时候进行说明，参考链接：jQuery 选择器。
3. 教程中所有选择单选按钮的选择器都采用了如下形式：:radio[name=dai_kuan_lei_bie]。选择器:radio[name=dai_kuan_lei_bie]表示选择一个类型为radio 的 元素，并且它的name属性值为dai_kuan_lei_bie;选择器:radio[name=dai_kuan_lei_bie]:checked表示选择被选中的name为dai_kuan_lei_bie的radio。参考链接：radio 选择器,[attribute=value] 选择器,:checked 选择器。
4. 读者需要对jQuery 事件方法有简要的了解，只需要知道事件方法指的是，当选择器选中的标签发生某一个事件时（例如点击这个标签，便会触发点击事件），这个方法便会执行即可，参考链接：jQuery 事件。
5. change事件是指当元素的值发生改变时会触发的事件，在上述代码中当用户选择贷款类别时，贷款类别单选按钮的值会发生改变，便会触发这个change事件。
6. 当change事件触发时，跟在change后面( )中的函数function(){}中的代码会被执行，也就是一条if else语句，参考链接：JavaScript If…Else 语句。
7. 代码中用if else语句实现的功能是，当贷款类别是商业贷款时，将贷款利率文本框的值设置为’4.90’，当贷款类别是公积金贷款时，将贷款利率的值设置为3.25。取出和设置一个元素的值，需要用到jQuery的文档操作val(),$(":radio[name=dai_kuan_lei_bie]:checked").val()表示取出取出被选中的贷款类别单选按钮的值，$("#id_dai_kuan_li_lv").val("4.90");表示将贷款利率文本框的值设置为4.90，参考链接：jQuery 文档操作，jQuery val() 方法。
8. 选择器#id_dai_kuan_li_lv是教程中用到的第二类选择器，这段代码表示选择一个id属性为id_dai_kuan_li_lv 的元素，参考链接：jQuery # 选择器。

这段代码虽然只有几行，但是已经基本囊括了教程中所需了解的绝大部分JavaScript和jQuery知识，包括教程中用到的两类选择器，jQuery事件，元素的取值与设值和JavaScript的if else语句，读者掌握了这段代码之后，阅读教程后续的jQuery代码的障碍就会小很多。

4. 选择计算方式

功能：用户选择期望的计算方式，当用户选择根据单价面积计算时，将输入贷款总额的文本框隐藏起来；当用户选择根据贷款总额计算时，将输入单价面积的文本框和选择首付比例的选择列表隐藏起来。

效果截图：

源代码：

    $("#id_div_gen_ju_zong_e").hide();

    $("input:radio[name=ji_suan_fang_shi]").change(function () {
   
        if ( $("input:radio[name=ji_suan_fang_shi]:checked").val() == "gen_ju_mian_ji")
        {
            $("#id_div_gen_ju_mian_ji").show();
            $("#id_div_gen_ju_zong_e").hide();
        } else
        {
            $("#id_div_gen_ju_zong_e").show();
            $("#id_div_gen_ju_mian_ji").hide();
        }
    });

先修知识：

1. hide()与show()是jQuery的效果函数，分表表示隐藏与显示元素，参考链接：jQuery 效果，jQuery 效果 - hide() 方法，jQuery 效果 - show() 方法。

5. 选择还款方式

功能：用户选择期望的还款方式，当用户选择等额本息时，将显示每月还款清单的文本域隐藏起来；当用户选择等额本金时，将显示每月还款额的文本框隐藏起来。

效果截图：

源代码：

    $("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();

    $("input:radio[name=huan_kuan_fang_shi]").change(function () {