html&JavaScript&innerHTML演练（计算器）：利用jQuery简化代码_jquery中与javascript中对应的innerhtml-CSDN博客

本文链接：https://blog.csdn.net/psyche_knight/article/details/76222489

jQuery

jQuery是一个JS库，有“写的少，做的多”的特点
包含HTML元素选取、元素操作等功能，也就是说可以代替getElementById来获取元素
html代码

<!doctype html>
<html>
    <head>
    <!--在HTML中加入jQuery引用-->
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> 
        </script>
    </head>
<body>

<form>
第一个数字：<br>
<input type="text" id="num1" >
<br>
第二个数字：<br>
<input type="text" id="num2">
<br>
    <!--添加一个P元素-->
  运算结果：<br>
    <p id="result">结果将显示在这里</p>
    <br>
</form>

    <button id="add">+</button>
    <button id="subtract">-</button>
    <button id="multiply">*</button>
    <button id="divide">÷</button>

    </body>

</html>

JavaScript&jQuery
省去getElementById步骤

var int_a,int_b;    //定义变量也可写在同一行
//点击事件
$('#add').click(function(){
getInputNum();
var result=addition(a_int,b_int);
$('#result').html(String(result));
});
$('#subtract').click(function(){
getInputNum();
var result=subtraction(a_int,b_int);
$('#result').html(String(result));
});
$('#multiply').click(function(){
getInputNum();
var result=multiplication(a_int,b_int);
$('#result').html(String(result));
});
$('#divide').click(function(){
getInputNum();
var result=division(a_int,b_int);
$('#result').html(String(result));
});
//函数方法
function getInputNum(){
var a =$('#num1').val();
var b=$('#num2').val();
a_int=parseInt(a,10);
b_int=parseInt(b,10);
}
function addition(x,y){
return x+y;
}
function subtraction(x,y){
return x-y;
}
function multiplication(x,y){
return x*y;
}
function division(x,y){
if(y==0){
alert('0不能做除数');
return;}
else{
return x/y;}
}
运行结果
![这里写图片描述](http://img.blog.csdn.net/20170727221209231?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHN5Y2hlX2tuaWdodA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)