晚上做了一個jQuery的項目，使用jQuery實現了一個簡單的計算器功能，可以實現連加，連減，混合計算，括號內優先計算，代碼如下：
css部分：
1 <style> 2 .main{ 3 margin: 0 auto; 4 text-align: center; 5 } 6 *{ 7 padding: 0; 8 margin: 0; 9 } 10 table { 11 margin: auto; 12 border-collapse: collapse; 13 14 } 15 span{ 16 display: inline-block; 17 text-align:center; 18 font-size: 30px; 19 width: 404px; 20 height: 100px; 21 background-color: darkgrey; 22 23 } 24 table td{ 25 text-align: center; 26 width: 100px; 27 height: 100px; 28 line-height: 100px; 29 background-color: lightgrey; 30 border:1px solid darkgrey; 31 } 32 </style>
html部分：
<div class="main"> <span id="input"> </span> <table> <tbody> <tr> <td>C</td> <td>D</td> <td>.</td> <td>*</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> <td>-</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td>+</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>/</td> </tr> <tr> <td>(</td> <td>0</td> <td>)</td> <td>=</td> </tr> </tbody> </table> </div>
jquery部分：
1 <script type="text/javascript" src="jquery-3.2.1.min.js"></script> 2 <script type="text/javascript"> 3 $(function(){ 4 var $td=$("td"); 5 6 $td.each(function(){ 7 $(this).click(function(){ 8 var Text=$("#input").text().trim(); 9 $("#input").append($(this).text()); 10 switch ($(this).text()){ 11 case "C": 12 $("#input").text(""); 13 break; 14 case "D": 15 $("#input").text(Text.substr(0,Text.length-1)); 16 break; 17 case "=": 18 function compute(content){ 19 var index=content.lastIndexOf("("); 20 if(index>-1){ 21 var nextIndex=content.indexOf(")",index); 22 if(nextIndex>-1){ 23 //遞歸的思想,一步一步的遞歸 24 var result=compute(content.substring(index+1,nextIndex)); 25 return compute(content.substring(0,index)+(""+result)+content.substring(nextIndex+1)) 26 } 27 28 } 29 index=content.indexOf("+"); 30 if(index>-1){ 31 return compute(content.substring(0,index))+compute(content.substring(index+1)); 32 } 33 index=content.lastIndexOf("-"); 34 if(index>-1){ 35 return compute(content.substring(0,index))-compute(content.substring(index+1)); 36 } 37 //如果返回的content為空,則返回0 38 index=content.indexOf("*"); 39 if(index>-1){ 40 return compute(content.substring(0,index))*compute(content.substring(index+1)); 41 } 42 index=content.lastIndexOf("/"); 43 if(index>-1){ 44 return compute(content.substring(0,index))/compute(content.substring(index+1)); 45 } 46 if(content==""){ 47 return 0; 48 }else{ 49 //將content字符串轉化為數值, 50 //這兒也可以使用一些技巧,比如 content-1+1,使用加減操作符,將字符串轉化為數值 51 return Number(content); 52 } 53 } 54 $("#input").text(compute(Text)); 55 } 56 }) 57 58 }); 59 }) 60 64 </script>
代碼詳解
思路：
1給每個td元素添加一個click事件，通過判斷點擊不同的按鈕來實現不同的行為，例如：當判斷點擊的元素是操作符“C”的時候，使用
$("#input").text("");來清空元素
2實現計算的思路：
最后做出的代碼使用了遞歸的思想，思路如下：
（1）在點擊等號之后，獲取到輸入的運算式，這個運算式是以字符串的形式存在的，運行compute函數，這個函數的目的是循環查找在字符串中的操作符，在找到操作符之后，將字符串中的以操作符為間隔分為兩部分，對於每一部分再進行compute函數的運算，再查找運算符，在進行一次運算，循環，這樣一直循環嵌套，一直運算到沒有出現運算符為止
（2）實現優先級的代碼：
我們知道，在等式運算中，加號和減號的地位是相同的，乘號和除號地位是相同的，先乘除后加減，這就是運算符的優先問題，如何實現運算符優先問題呢？
在這個代碼中，是通過根據判斷不同運算符是否存在的順序先后來實現的，在代碼中下面這一段代碼：
index=content.indexOf("+"); 30 if(index>-1){ 31 return compute(content.substring(0,index))+compute(content.substring(index+1)); 32 } 33 index=content.lastIndexOf("-"); 34 if(index>-1){ 35 return compute(content.substring(0,index))-compute(content.substring(index+1)); 36 } 37 //如果返回的content為空,則返回0 38 index=content.indexOf("*"); 39 if(index>-1){ 40 return compute(content.substring(0,index))*compute(content.substring(index+1)); 41 } 42 index=content.lastIndexOf("/"); 43 if(index>-1){ 44 return compute(content.substring(0,index))/compute(content.substring(index+1)); 45 }
在上面的代碼中，先判斷的加減號，后判斷的乘除號，這里解決的是優先級問題，
例如下面等式： 1+2*3+4
在程序中，先查找到加號運算符，分成兩部分，1和 2*3+4 在后面的那一部分中，在進行循環運算，根據程序，先查找加號，又分為了兩部分，2*3和4對於2*3運行函數，找到了*號運算符，這時候沒有多余的運算符，直接計算2*3等式。
注意知識點：
1，$(selector).trim()用於消除字符串之間的間隔；
2，$(selecoor).each（function(){}）用於遍歷每個元素，
3，$(seletor).text()用於獲取匹配元素內的文本，注意：
在我們使用的是$(selector).text()來獲取元素的，在一般的情況下 對於$("td").[0]===$("td:eq(0)")===document.getElementByTagName("td")[0]是等價的
如果我們要獲取元素內的文本元素，我們需要通過$("td:eq(0)")來獲得，而對於$("td").[0]則獲取不到，因此，要注意，不要混用
4，對於字符串的操作方法：
在ECMAScript中存在三種基於子字符串創建新字符串的方法：
slice() , substr()和 substring()這三種方法都會返回被操作字符的一個子字符串，
當接受兩個參數的時候，第一個參數指定字符串的開始位置，第二個參數指定子字符串在哪里結束，
對於slice()，substring()和substr()第二個參數表示的意思還不同
對於slice()和substring()第二個參數表示子字符串最后一個字符后面的位置
而對於substr()表示的是返回的字符個數：
代碼如下：
var stringValue="hello world";
alert(stringValue.substring(3,7));//"lo w"
alert(stringValue.slice(3,7));//"lo w"
alert(stringValue.substr(3,7)//"lo worl"
如上：
字符串的序號從零開始，對於substring()和slice（）截取的是從3開始到7后面的那個字符結束的位置，實際上不包括字符位置為7的位置（最后截取的字符串因此不包括字符"o"）,但是包括一開始就截取的開頭的字符（"l"）
而對於substr()表示的是從3的位置開始，要截取7個字符的字符長度作為字符串
如果沒有第二個參數，這表示將字符串的長度作為結束位置：代碼如下：
alert(stringValue.substring(3)); alert(stringValue.slice(3)); alert(stringValue.substr(3))
最后輸出結果均為：
"lo world"
如上: