js知识点积累

js知识点积累

文章目录

js知识点积累1、js如何在jsp中，通过点击事件创建多个表单？2、js创建二维数组3、js用split()切分字符串4、iframe子页面如何给父页面传值5、用js判断复选框（checkbox）是否选中的问题6、js阻止表单提交默认行为的两种方式7、js操作Map对象8、js定义二维数组（变长的）9、js读取文件表单10、js解析json字符串为json对象

1、js如何在jsp中，通过点击事件创建多个表单？

这里主要通过dom对象，用innerHTML或appendChild来创建多个表单。但是要注意的是element.innerHTML会将element原来的代码覆盖，而appendchild会在element中进行追加。

参考

DOM向HTML中添加元素Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type 'Node’问题js中appendChild()用法解决JS 中 innerHTML is not a function ... <div id="selectAdd"> <div class="parametersetup_title">所选特征：</div> <div class="parametersetup_content"> <div id="bbb"> <select id="Feature" name="Feature"> <%--<% for(int i=1;i<=inputdata.getdimension();i++)--%> <%--{%>--%> <%--<option value="<%= String.valueOf(i)%>"--%> <%--<%if(i==1) {%>selected<%}%>><%= inputdata.getcolname(i)%>--%> <%--</option>--%> <%--<% }%>--%> </select> <input type="button" value="添加" onclick="add()"/> </div> </div> </div> ... <script type="text/javascript"> //将java数组转化成json，可和js进行类型转换 var featureName = <%= featureName%>; //不知道为啥子不能用el表达式，只能用jsp表达式 //console.log(featureName) //判断"数据序列"选了什么，避免特征选择和数据序列选择重复 var sequenceId = document.getElementById("Sequence").selectedIndex; //console.log((sequenceId)) innerHTMLStr = ""; if(sequenceId == 0){ var k = 0; for (var i = 1; i < featureName.length; ++i){ if(k == 1){ innerHTMLStr += "<option value =" + (i + 1) + "selected>" + featureName[i] + "</option>"; }else{ innerHTMLStr += "<option value =" + (i + 1) + ">" + featureName[i] + "</option>"; } } }else{ var k = 0; for (var i = 0; i < featureName.length; ++i){ if(k == 0){ innerHTMLStr += "<option value =" + (i + 1) + "selected>" + featureName[i] + "</option>"; }else if(k != sequenceId){ innerHTMLStr += "<option value =" + (i + 1) + ">" + featureName[i] + "</option>"; } } } document.getElementById("Feature").innerHTML = innerHTMLStr; function add(){ var dom1 = document.createElement('div'); dom1.className = 'parametersetup_title'; document.getElementById("selectAdd").appendChild(dom1); var dom2 = document.createElement('div'); dom2.className = 'parametersetup_content'; var str = "<select>"; innerHTMLStr = ""; if(sequenceId == 0){ var k = 0; for (var i = 1; i < featureName.length; ++i){ if(k == 1){ innerHTMLStr += "<option value =" + (i + 1) + "selected>" + featureName[i] + "</option>"; }else{ innerHTMLStr += "<option value =" + (i + 1) + ">" + featureName[i] + "</option>"; } } }else{ var k = 0; for (var i = 0; i < featureName.length; ++i){ if(k == 0){ innerHTMLStr += "<option value =" + (i + 1) + "selected>" + featureName[i] + "</option>"; }else if(k != sequenceId){ innerHTMLStr += "<option value =" + (i + 1) + ">" + featureName[i] + "</option>"; } } } str += innerHTMLStr + "</select>"; console.log(str); dom2.innerHTML = str; document.getElementById("selectAdd").appendChild(dom2); } </script>

运行效果：

2、js创建二维数组

参考JS定义二维数组的三种方法

3、js用split()切分字符串

js在接收java的JSON数据（假设为arr）时，需要对数据进行split，但是直接用会出现问题，需要将arr转成字符串（toString()）参考value.split is not a function 的原因

4、iframe子页面如何给父页面传值

父页面: BOOST.jsp <div id="BOOST_con4" style="display:none"> <iframe name="SHOWDATA_BOOST" src="../../resultshow/resultDrivenBOOST.jsp"></iframe> </div> 子页面: resultDrivenBOOST1.jsp function submitModelNum(modelNum) { var innerHTMLStr = ""; innerHTMLStr += '<input type="hidden" name="modelNum" value="' + modelNum + '">'; var div = document.createElement('div'); div.innerHTML = innerHTMLStr; document.getElementById("modelSelect").appendChild(div); //把执行等待滚动条打开 // document.getElementById("loader_container1").style.display="block"; //通过父页面把分析结果的页面打开 //parent.document.getElementById("BOOST_tab5").style.display="block"; //子页面给父页面传值 var label = document.getElementById("label").value; var height = document.getElementById("height" + modelNum).value; var times = document.getElementById("times" + modelNum).value; var threshold = document.getElementById("threshold" + modelNum).value; parent.getChildVal(featureIndexStr,label,height,times,threshold); } 父页面:BOOST.jsp: ... function getChildVal(features,label,height,times,threshold){ document.getElementById("Sequence").value = label; document.getElementById("featureBox").value = features; document.getElementById("BOOST_parameter1").value = height; document.getElementById("BOOST_parameter2").value = times; document.getElementById("BOOST_parameter3").value = threshold; alert(features + ' ' + height + ' ' + times + ' ' + threshold); validate_BOOST(document.parameterform,1); document.parameterform.action="../../resultshow/resultDrivenBOOST1.jsp"; document.parameterform.target="SHOWDATA_BOOST1"; document.getElementById("model").value = "BOOST"; document.parameterform.submit(); }

实现功能：

子页面resultDrivenBOOST.jsp给主页面BOOST.jsp传值主页面获取子页面的值，修改表单数据，并实现表单提交

参考

关于使用iframe的父子页面进行简单的相互传值

js之iframe子页面与父页面通信

5、用js判断复选框（checkbox）是否选中的问题

参考用js判断复选框（checkbox）是否选中的问题

6、js阻止表单提交默认行为的两种方式

参考js阻止表单提交默认行为的两种方式

7、js操作Map对象

js中遍历Map对象JS获取对象的value方式js 创建类似java map集合

8、js定义二维数组（变长的）

js如何定义二维数组

9、js读取文件表单

js通过input type="file"获取文件名方法

JS-读取文件内容

10、js解析json字符串为json对象

js 将json字符串转换为json对象的方法解析