jQuery之简单计算器______初探jQuery

来源：互联网发布：淘宝客推广视频编辑：程序博客网时间：2024/05/18 01:38

最近jQuery在csdn有很多人在追棒，其实早有听说过！

但是一直没用，今天闲来无事看了一下jQuery的一些API想写一个计算器

当然是最简单的中间也遇到了N多问题！

总结：jQuery的选择器很是强大，兼容性也不错！代码是链式的！

（习惯写一堆乱七八糟的东西在前面!^_^）

先上代码看图片效果图片:

用jQuery选择器给所有的文本框设置了一下样式

接下来就是代码当然我这样写有问题也没想太多的去完善它

这样好像代码也一直在重复，有点破坏了jQuery代码短的特点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>jQuery计算器</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .div{ border:green 1px; border-style:solid; width:300px; text-align:center; } span{ background-color:#CCCCCC; font-size:32px; font-family:"微软雅黑"; }.input{border: 1px solid #6666FF;}</style><mce:script src="jquery-1.3.1.js" mce_src="jquery-1.3.1.js" type="text/javascript"></mce:script><mce:script language="javascript"></mce:script></head><body style="text-align:center" mce_style="text-align:center"><form><div class="div"><div><span>jQuery简单计算器</span></div><div>第一个数:<input type="text" id="num1" ></div><div>第二个数:<input type="text" id="num2" ></div><div><input type="button" value=" + " id="jia"><input type="button" value=" - " id="jian"><input type="button" value=" * " id="cheng"><input type="button" value=" / " id="chu"></div><div>结果:<input type="text" id="reset" /></div></div></form></body></html>