一、搜索框输入：
<input id="ID1" type="text" value="请输入用户名" onblur="Blurs()" onfocus="Focus()"> <script> function Focus(){ var input=document.getElementById("ID1"); if (input.value=="请输入用户名"){ input.value=""; } }; function Blurs(){ var ele=document.getElementById("ID1"); var val=ele.value; if(!val.trim()){ ele.value="请输入用户名"; } } </script>
二、完整版模态对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back{ background-color: rebeccapurple; height: 2000px; } .shade{ position: fixed; top: 0; bottom: 0; left:0; right: 0; background-color: coral; opacity: 0.4; } .hide{ display: none; } .models{ position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; height: 200px; width: 200px; background-color: gold; } </style> </head> <body> <div class="back"> <input id="ID1" type="button" value="click" onclick="action('show')"> </div> <div class="shade hide"></div> <div class="models hide"> <input id="ID2" type="button" value="cancel" onclick="action('hide')"> </div> <script> function action(act){ var ele=document.getElementsByClassName("shade")[0]; var ele2=document.getElementsByClassName("models")[0]; if(act=="show"){ ele.classList.remove("hide"); ele2.classList.remove("hide"); }else { ele.classList.add("hide"); ele2.classList.add("hide"); } } </script> </body> </html>
三、表格正反选练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正反选</title> </head> <body> <button onclick="select('all');">全选</button> <button onclick="select('cancel');">取消</button> <button onclick="select('reverse');">反选</button> <table id="Table" border="1"> <tr> <td><input type='checkbox'></td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td><input type='checkbox'></td> <td>222</td> <td>222</td> <td>222</td> </tr> <tr> <td><input type='checkbox'></td> <td>333</td> <td>333</td> <td>333</td> </tr> </table> <script> function select(choice) { var ele = document.getElementById('Table'); var inputs = ele.getElementsByTagName('input'); for (var i=0;i<inputs.length;i++){ var ele2 = inputs[i] if (choice == 'all'){ ele2.checked = true }else if (choice == 'cancel'){ ele2.checked = false }else{ ele2.checked = !ele2.checked //反选部分，表示与目前所选内容正好相反 } } } </script> </body> </html>
四、二级联动（关于这个问题的奥秘早都想知道了，为什么在选择地址的时候，你选择了陕西，然后市就出现了对应的内容）
下面就是如何实现这部分的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>二级联动</title> </head> <body> <select id="province"> <option>请选择省:</option> </select> <select id="city"> <option>请选择市:</option> </select> <script> data = {'陕西省':['西安','安康','杨凌'],"河北省":["廊坊","邯郸"],"北京":["朝阳区","海淀区"]} var p = document.getElementById('province'); var c = document.getElementById('city'); for (var i in data){ var option_pro = document.createElement('option'); option_pro.innerHTML = i; p.appendChild(option_pro) } p.onchange = function () { //onchange域的内容被改变。应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） pro = (this.options[this.selectedIndex]).innerHTML; citys = data[pro] c.options.length = 1; //重新选择新的省份的时候，保证不会重复增加，只保留了请选择 for (var i in citys){ var option_city=document.createElement("option"); option_city.innerHTML=citys[i]; c.appendChild(option_city); } } </script> </body> </html>
学了有两周的JavaScript了，然后今天得到一个噩耗，不用学也可以。。。直接上jq。。。