Javascript是通过客户端浏览器进行解析，浏览器内置了负责解析Javascript的解析器，由于每一种浏览器的解析器不一样，所以可能会出现相同的JS代码在不同的浏览器效果不一样，故日常测试中一定需要考虑兼容性测试。
Javascript的作用是提供页面交互效果，通过对页面上的元素进行操控从而达到页面元素按照预期进行显示。本文以编写测试小工具用到的js模块来进行说明。
Javascript模块
1.获取html前端数据
1.输入框：var input=$("#input").val() //获取输入框输入的内容
2.单选框：var radio=$('input[name="form-project-manager[]"]:checked').val() //选中单选框后对应的实际是value值
3.下拉框(单选)：var option = $('#drop').val()
4.表格中某行某列的值：var txt=document.getElementById ("table");
txt.rows[i].cells[j].innerHTML; //获取table中第i行第j列的值
2.前后端数据交互
1.前端html按钮元素处绑定onclick事件，如下面所示绑定了POST()
<button id="POST" class="btn btn-primary btn-block" type="button" onclick="POST()">Submit</button>
2.点击按钮后触发Javascript编写post()函数
function POST(){
post_data_string=JSON.stringify(value()) //获取到的前端数据
$.post( //发起ajax的post请求
"/unlock/post", // 请求的url，此URL为发起POST请求时的URL地址，即URL配置里面的地址
post_data_string, // 发送的数据
function(data_post_code){ // 回调函数，data_post_code为后端处理后的结果
code=data_post_code.code
if(code==0){ //根据code返回的结果返回给前端的弹窗显示结果页面
$("#modal-submit").modal('show')
$('.container1').text(data_post_code.message)
$('.modal-title').text("成功")}
else{
$("#modal-submit").modal('show')
$('.container1').text(data_post_code.message)
$('.modal-title').text("失败")}});};
3.前端html弹框元素透出后端结果，至此完成前后端交互整个过程
3.事件概念的理解
事件是javaScript和DOM之间交互的桥梁，遵循你若触发，我便执行，即事件发生，调用它的处理函数执行相应的JavaScript代码给出响应。
本次小工具重点用到了onclick事件，onclick事件：单击元素时执行功能，具体的实现方式可见前后端数据交互中的说明
4.this的作用域【待补充】
5.通过radio控制div里的内容显示或隐藏，无法对按钮button生效
1)html中对单选框元素绑定divClick()事件
<input type="radio" id="options Radios" name="options Radiosinline" value="1" class="mr-1" checked onclick="divClick(); "style="margin-left:30px;"><span class="mr-6 text-muted">单选框1</span>
2)根据绑定的divClick()事件，Javascript中根据单选框的值来对div里的内容进行显示或隐藏
function divClick(){
var show=$('input[name="optionsRadiosinline"]:checked').val()
if(show=="1"){
document.getElementById("div").style.display="block"; //显示
}
else{
document.getElementById("div").style.display="none"; //隐藏
}
}
6.实时监听输入框非空
$("#input").on("input",function(){
if ($('#input').val()==""){
$(this).addClass("is-invalid");
}
elseif($('#input').val()!==""){
$(this).removeClass("is-invalid");
}});
实战中一些收获点，持续补充
1.尽量复用同一个元素，比如出现在不同页面下拉框元素，但由于输出效果一致，无需在html中写两个下拉框元素，只需写一个即可
2.同一个按钮，期望由于单选框选择的差异，可在前端输出相应的文案，可按照如下的方式完成：
var show=$('input[name="optionsRadiosinline"]:checked').val()
if(show=="1"){
$('#POST').text("确认添加")
}
else{
$('#POST').text("提交申请")
}
3.强制往输入框内写入期望的值
document.getElementById("input").value=message[0]
4.下拉框选项需通过后端代码传回的值进行显示
// 获取后端的值
code=data_post_code.code
message=data_post_code.message
data=data_post_code.data
var options="";
for(vari=0,len=data.length;i<len;i++){
var parkdata=data[i]; //拼接成多个<option><option/>
if(i==0){
options='<option value="'+parkdata[0]+'" selected>'+parkdata[0]+'</option>'
}
else{
options+='<option value="'+parkdata[0]+'">'+parkdata[0]+'</option>'
}
}
$("#drop").append(options);//根据selectpicker根据你自己的ID写)填充到select标签中
$('#drop').selectpicker('refresh');//必须有的，强制刷新，不加会导致数据在前端无法显示$('#drop').selectpicker('render');//render方法
5.一个按钮上需要绑定多个函数，采用分号即可
<a> <button class="btn btn-primary btn-block" type="button" onclick="P1();P2()">查询</button></a>
6.table元素中的值需通过后端代码传回的值进行显示【待补充】
网友评论