使用jQuery实现城市切换与计算器的效果

 

1. 我们先写城市切换，我们已经引入了bootstrap框架里面的css与js，所以我们只需要将我们需要的类引入就好了。
2. 我们先放一个div，给他一个类为container，Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中-- 这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）。
3. 我们在div里面放两个select标签，给这两个select标签添加相同的类为，custom-select-sm mt-5，在分别给他们一个ID为select1，select2,。
4. 在第一个select标签中放三个option标签，他们对应的文本为：请选择…，江西，广东。并且在后面的两个option标签里还有一个value属性，属性值分别为0,1。
5. 在第二select标签中放一个option标签，对应的文本为：请选择…。
6. 这样布局就完成了
7. 接下来就来写jQuery部分

 

1. 我们在页面加载事件中写
2. 我们先声明一个二维数组变量aa，将[["请选择...", "南昌", "宜春", "抚州"], ["请选择...", "广州", "东莞", "深圳"]]赋值给他。
3. 我们再来获取第一个select标签并且给他绑定点击事件，$("#select1").click(function () {})，在里面我们声明一个变量ss，将获取的第一个select标签的值赋值给他，var ss = $("#select1").val();
4. 我们用if语句来判断一下变量ss是否为 0，如果为0，那么先用empty方法将第二个select标签的子元素清空$("#select2").empty();再用each方法遍历一下变量aa里索引为0的数组，里面还有一个回调函数，并且回调函数有两个参数，第一个为索引，第二个为value值，然后在函数里面将给第二个select标签添加元素，$("#select2").append('<option value="index">' + aa[0][index] + '</option>');
5. 否则如果变量ss为1，同样先用empty方法将第二个select标签的子元素清空$("#select2").empty();再用each方法遍历一下变量aa里索引为1的数组，然后在函数里面将给第二个select标签添加元素，$("#select2").append('<option value="index">' + aa[1][index] + '</option>');
6. 这样我们的城市切换就写完了，效果如下：

 

 

我们再来写一下计算机的布局与效果

 

1. 我们先放一个input标签让他的type值为number，ID为n1，然后在input标签前面写上参数一：
2. 我们再放一个select标签，在这个标签里面我们放四个option标签，文本分别为+，-，*，/，并且他们的value值与文本相对应，再在select标签前面输入文本为运算符：
3. 在他后面再写一个input标签与上面的一样但是id为n2，然后在input标签前面写上参数二：
4. 在他后面再写一个button标签，文本为结果，然后在button按钮前面写上按钮:
5. 最后放一个input标签type值为text。这样就布局好了。
6. 
7. 现在我们来写jQuery
8. 我们先写一个页面加载事件，然后给button按钮绑定点击事件，再声明一个变量s，将获取的select的值赋值给他。
9. 我们在声明三个变量分别为ss，q，h，并且分别将空，ID为n1的input标签的值和ID为n2的input标签的值赋值给他们，并且将变量q和h用Number的方法将其转换成数字。
10. 我们再用switch语句来做判断，传一个参数为变量s，{case "+":ss =q +h ; break; case "-":ss = q - h; break; case "*":ss =q * h; break; case "/": if (h == 0) {alert("除数不能为0"); return; }ss =q / h; break;}
11. 最后再将获得的值给最后一个input标签。这样一个简单的计算机就写好了。效果如下：