027 奥展项目涉及的javascipt知识点笔记
1.获取指定div标签内的所有input标签
let inputs = document.getElementById("inspect-part1").getElementsByTagName("input");
2.获取input标签的内容
inputs[i].value
案例:
3.jQuery实现在一个输入框按回车键后光标跳到下一个输入框
//jQuery实现在一个输入框按回车键后光标跳到下一个输入框 function focusNextInput(thisInput) { let inputs = document.getElementById("inspect-part1").getElementsByTagName("input"); for(var i = 0;i<inputs.length;i++){ // 如果是最后一个,则焦点回到第一个(如果想实现按顺序可以登陆,可以写入登陆方法) if(i==(inputs.length-1)){ inputs[0].focus(); break; }else if(thisInput == inputs[i]){ inputs[i+1].focus(); break; } } }
4.获取指定div标签内的所有input标签,并获取span标签的内容
let spans = document.getElementById("inspect-part1").getElementsByTagName("span");
spans[0].innerHTML
案例:
5.js中分割字符串成数组
let strTest="12.55-12.60";
strTest.split('-')
效果图:
6.字符串转float数值
parseFloat("12.55")
案例:
7.字符串截取
(1)截取字符串的后4位
let str1="abcdefghhhh";
str1.substring(str1.length-4)
案例:
(2)获取除了后四位的剩余字符串
8.忽略大小写,判断字符串相等
"MAx".toLowerCase==="max".toLowerCase
案例:
9.span标签赋值及修改span字体颜色
let spans = document.getElementById("inspect-part1").getElementsByTagName("span"); spans[1].innerHTML="不合格"; spans[1].style.color="red";
案例:
10.清空id为tab-common的div标签下的所有input标签的内容
//清空id为tab-common的div标签下的所有input标签的内容 let inputs = document.getElementById("tab-common").getElementsByTagName("input"); for (let i = 0; i <inputs.length ; i++) { inputs[i].value=""; }
11.js控制li标签隐藏
let i=3; let lis = document.getElementById("charts-chartjs"+i); lis.setAttribute("hidden",true);
12.js获取表格中当前行的指定列的值
html代码:
<tr v-for="item in laliRecordList"> <td> <button type="button" class="btn bg-olive btn-xs" onclick="modifyDataByid(this)">修改</button> </td> <td>{{item.id}}</td> <td>{{item.testdate}}</td> <td>{{item.songjiandepart}}</td> <td>{{item.songjianren}}</td> <td>{{item.orderid}}</td> <td>{{item.customer}}</td> <td>{{item.material}}</td> </tr>
js代码:
<script> function modifyDataByid(obj){ var $td = $(obj).parents('tr').children('td'); var id = $td.eq(1).text(); console.log(id) }; </script>
注意:该方法不能放到vue中。