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)
`