标签：
1：点击文本框 文字隐藏 <body> <input type="text" placeholder="请输入用户名"/> <input type="text" onfocus="if(this.value==‘请输入用户名‘)this.value=‘‘" onblur="if(this.value==‘‘)this.value=‘请输入用户名‘" value="请输入用户名"/> </body>
2：点击全选跟反选功能 <body> <p> <label><input type="checkbox" onclick="checkAll(this)" id="checkall">全选</label> <label><input type="checkbox" onclick="objectAll(this)" id="checkall">反选</label> </label> </p> <p><label><input type="checkbox" name="coursename" value="1">小明</label> <label><input type="checkbox" name="coursename" value="2">小牛</label> <label><input type="checkbox" name="coursename" value="3">小杨</label> <label><input type="checkbox" name="coursename" value="4">白羊</label> <label><input type="checkbox" name="coursename" value="5">姓名</label> <label><input type="checkbox" name="coursename" value="6">人民</label> </p> <script type="text/javascript"> /*全选*/ function checkAll(obj){ var courseName = document.getElementsByName("coursename"); if(obj.checked){//判断当前全选选中 for(var i=0;i<courseName.length;i++){ courseName[i].checked = true; } }else{ for(var i=0;i<courseName.length;i++){ courseName[i].checked = false; } } }; /*反选*/ function objectAll(obj){ var courseName = document.getElementsByName("coursename"); if(obj.checked){ for(var i=0;i<courseName.length;i++){ if(courseName[i].checked){ courseName[i].checked = false; }else{ courseName[i].checked = true; } } }else{ for(var i=0;i<courseName.length;i++){ if(courseName[i].checked){ courseName[i].checked = false; }else{ courseName[i].checked = true; } } } } </script> </body>
3：省市区级联 <body onload="tm_init_pronince()"> <select id="province" onchange="tm_city_change(this)"></select> <select id="city" onchange="tm_areas_change(this)"></select> <select id="area"></select> <script type="text/javascript"> function tm_init_pronince(){ var selectDom = document.getElementById("province"); var arr = [{"id":1001,"name":"广东省"},{"id":1002,"name":"湖北省"}]; /*var html = "<option value=‘‘>--请选择--</option>"; for(var i=0;i<arr.length;i++){ html += "<option value=‘"+arr[i].id+"‘>"+arr[i].name+"</option>"; } selectDom.innerHTML = html; */ var optionEmpty = document.createElement("option"); optionEmpty.value = ""; optionEmpty.text = "请选择"; selectDom.appendChild(optionEmpty); for(var i=0;i<arr.length;i++){ var option = document.createElement("option"); option.value = arr[i].id; option.text = arr[i].name; selectDom.appendChild(option); } }; //城市数据 var cityDatas = { "1001":"100101#中山,100102#广州,100103#河源", "1002":"100201#武汉,100202#太远,10023#十堰" }; var areasDatas = { "100101" :"10010101#紫金,10010102#龙川", "100102" :"10010201#连平,10010202#和平", "100201" :"10020101#源城,10020102#东源,10020103#北京" }; //1:了解数据层级接口 //2:javascript元素创建，定义和追加 function tm_city_change(obj){ var value = obj.value; var datas = cityDatas[value]; var cityDom = document.getElementById("city"); cityDom.innerHTML = ""; var optionEmpty = document.createElement("option"); optionEmpty.value = ""; optionEmpty.text = "请选择"; cityDom.appendChild(optionEmpty); if(datas){ var citys = datas.split(","); for(var i=0;i<citys.length;i++){ var option = document.createElement("option"); var v = citys[i].split("#"); option.value = v[0]; option.text = v[1]; cityDom.appendChild(option); } } }; function tm_areas_change(obj){ var value = obj.value; var datas = areasDatas[value]; var areaDom = document.getElementById("area"); areaDom.innerHTML = ""; var optionEmpty = document.createElement("option"); optionEmpty.value = ""; optionEmpty.text = "请选择"; areaDom.appendChild(optionEmpty); if(datas){ var areas =areasDatas[value].split(","); for(var i=0;i<areas.length;i++){ var option = document.createElement("option"); var v = areas[i].split("#"); option.value = v[0]; option.text = v[1]; areaDom.appendChild(option); } } }; </script> </body>
4：鼠标移到文本框表色 凸显客观效果 <style> .tm_hover:hover{border:2px solid red;} </style> <body onload="init(border:2px solid #141414)"> <form> <input class="tm_hover" type="text"> <input class="tm_hover" type="password"> <select class="tm_hover"></select> <textarea class="tm_hover"></textarea> </form> <script type="text/javascript"> function init(color){ var form = document.forms[0]; var elements = form.elements;//获取所有的表单元素 for(var i=0;i<elements.length;i++){ var e = elements[i]; e.onfocus = function(){ this.style.border = color; } e.onblur = function(){ this.style.border = ""; } } } </script> </body>
标签：
原文地址：http://www.cnblogs.com/Deng1185246160/p/4263785.html
