本节案例相对复杂，对于布局而言推荐使用表格，数字0-9共10个，运算符有4个，操作符2个，所以正好16个，四行四列的表格。另外需要一个显示选择的表达式，和计算结果的地方，这里也单独使用一个表格，与上述表格紧邻，显得比较好。具体知识点如下：

  1. 选择表格里的单元格并点击的方法：$('table').find('td').click(function(){})。 ('table').find('td')是找到表格里的单元格，这里有一个层级关系，即td是在table里的子节点。可以想象，如果要找到表格里某一行怎么做呢？思考一下。
  2. 获得单元格的值然后拼接成表达式，这里就是字符串的拼接，使用+号即可。
  3. 表达式的分析，字符串拼接后形成了一个字符串数组，获得某一个字符，可以使用其下标来定位。如表达式exp=“3+1“，3是第一个字符，下标是0，因此exp[0]就是3，同理可以判断其他位置的内容。
  4. 运算：对表达式确定数值和运算符，这里运算符就是第二个字符，判别第二个字符是+-*/中的哪一个，给定对应的计算就行。需要注意的是，加法运算的+很容易变成连接符，因此所以对字符强制转换为数值类型，parseInt或者parseFloat。



Jquery数组包含 jquery获取数组下标_jquery 取对象数组下标

https://www.zhihu.com/video/1152524760284995584

该案例代码及说明如下：



<!DOCTYPE html>
<html>
<head>
	<title>js09</title>
	<style type="text/css">
		td{
			width: 60px;
			height: 40px;
			text-align: center;
			border: 1px solid red;
		}
		#exp{
			width: 186px;
		}
		table{
			border-collapse: collapse; //去除单元格默认边界
		}
	</style>
	<script src="lib/jquery-3.4.1.min.js" ></script>
</head>
<body>
	<h2>jquery实现四则运算</h2>
	<hr>
	<!-- 放置表达式和结果的表格 -->
	<table>
		<td id="exp"></td>
		<td id="res"></td>
	</table>
	<!-- 放置数字和运算符 -->
    <table id="options">
    	<tr>
    		<td>0</td>
    		<td>1</td>
    		<td>2</td>
    		<td>3</td>
    	</tr>
    	<tr>
    		<td>4</td>
    		<td>5</td>
    		<td>6</td>
    		<td>7</td>
    	</tr>
    	<tr>
    		<td>8</td>
    		<td>9</td>
    		<td>*</td>
    		<td>/</td>
    	</tr>
    	<tr>
    		<td id="cls">cls</td>
    		<td>=</td>
    		<td>+</td>
    		<td>-</td>
    	</tr>
    </table>
</body>
</html>
<script src="js/jss.js"></script>



对应的jss.js脚本如下：



// 网页文档启动状态 $(document）.ready(function(){})
$(document).ready(function(){
    // 知识点：选择表格里的单元格$('#options').find('td').click(function(){})
    // 放置/获取单元格里的文本: text()
    // 网页元素对象本身: this
    // 拼接单元格里的文本来获得表达式
    //表达式是字符串，使用字符串的分割和对象方法
    //字符转数值,parseInt,parseFloat
    var equ='';
    $('#options').find('td').click(function(){
        var val=$(this).text(); //$(this)定位的元素自己
        equ+=val;//字符串数组
        $('#exp').text(equ);
        //获得第一个数num1,第二个数num2，运算符
        var num1=equ[0];
        var num2=equ[2];
        var operator=equ[1];  
        if(operator=='+'){
        	$('#res').text(parseInt(num1)+parseInt(num2));
        }
        else if(operator=='-'){
        	$('#res').text(num1-num2);
        }
        else if(operator=='*'){
        	$('#res').text(num1*num2);
        }
        else if(operator=='/'){
        	$('#res').text(num1/num2);
        }
    })

    $('#cls').click(function(){
    	equ='';  //清除表达式的值
    	$('#res').text('');  //清除结果单元格的显示
    	$('#exp').text(0);    //将表达式单元格显示为0
    })
})