简单的javascript学习03

来源：互联网发布：南宁知远科技有限公司编辑：程序博客网时间：2024/06/05 21:49
----------------------------------------------------------------------------------------------------------------------------------------------------------------第四天---------------------------------------------------------------------------------------------<html><head><title>document操作元素的属性</title><meta charset="UTF-8"/><script type="text/javascript">/* * document对象操作元素的属性: * 1、获取元素对象 * 间接方式和直接方式 * 2、操作元素属性 * 固有属性 * 获取元素的属性：元素对象名.固有属性名 * 修改元素的属性值：元素对象名.固有属性名="属性值"  * 自定义属性 获取自定义属性值：对象名.getAttribute("自定义属性键名"); * 如果使用此种方式获取固有属性，则拿到的是默认值 * 修改自定属性值：对象名.setAttribute("自定属性键名","要修改的值"); *  *  * */function test_oper_Param(){//获取元素对象var uname=document.getElementById("uname");//获取元素的属性alert(uname.type+":"+uname.id+":"+uname.name+":"+uname.value+":"+uname.abc);alert(uname.getAttribute("abc"));//使用getAtalert(uname.getAttribute("value"));//使用getAttribute()获取固有属性值，返回默认值uname.setAttribute("abc","456");//使用setAttribute()修改自定义属性值alert(uname.getAttribute("abc"));//修改元素的属性：uname.type="button";uname.value="50点一下";}</script></head><body><h3>document操作元素的属性</h3><input type="button" name="" id="" value="测试操作元素属性" onclick="test_oper_Param();"/><hr /><input type="text" name="uname" id="uname" value="zhangsan" abc="123"/></body></html>---------------------------------------------------------------------------------------------<html><head><title>操作元素的内容和样式</title><meta charset="UTF-8"/><script type="text/javascript">/* * 操作元素的内容: * innerHTML: * 获取元素内容的时候会将HTML的标签获取到 * 在修改元素内容的时候，HTML标签会被解析执行 *innerText: * 获取元素内容的时候，获取的是文本内容，不会获取到HTML的标签元素 * 在修改元素内容的时候，HTML标签不会被解析执行，会当成普通文本输出 *  * 操作元素的样式： * style: * 对象名.style.CSS属性名="属性值"; * className: * 对象名.className="类选择器名"; *  * */function test_content(){var showdiv=document.getElementById("showdiv");alert(showdiv.innerHTML);//获取元素内容，包括HTML标签元素//修改元素内容，HTML元素会被解析执行showdiv.innerHTML="<font color='darkgoldenrod'>你这个怕死的叛徒，要走你先走，人在塔在</font>"}function test_InnerText(){var div01=document.getElementById("div01");alert(div01.innerText);//获取元素内容，但是不包括HTML标签//修改元素内容，HTML元素标签不会被解析执行div01.innerText="<font color='red'>你先去，我们的人马上就到。。</font>"}/*===================================================================================================*/function test_Style(){var div02=document.getElementById("div02");div02.style.width="300px";div02.style.height="300px";div02.style.border="solid 1px red";div02.style.backgroundColor="gray";}function test_class(){var div02=document.getElementById("div02");div02.className="common";}</script><style type="text/css">#showdiv{border: solid 1px;width: 300px;height: 300px;margin-bottom: 20px;}#div01{border: solid 1px;width: 300px;height: 300px;}.common{border: solid 1px;width: 300px;height: 300px;margin-bottom: 20px;background-color: #8A2BE2;}</style></head><body><h3>操作元素的内容和样式</h3><input type="button" id="" value="测试InnerHTML" onclick="test_content();" /><input type="button" id="" value="测试InnerText" onclick="test_InnerText();" /><hr /><div id="showdiv"><h4>族长，火族大举来犯，我们赶紧跑吧。。。</h4></div><div id="div01"><h4>大王，前面有敌人，要不要干掉</h4></div><hr /><h3>操作元素的样式</h3><input type="button" name="" id="" value="测试操作样式---style" onclick="test_Style();" /><input type="button" name="" id="" value="测试操作样式---className" onclick="test_class();" /><div id="div02">现在的国产电视剧都是怎么了，一言不合就是50集;</div></body></html>--------------------------------------------------------------------------------------------------<html><head><title>操作元素的文档结构</title><meta charset="UTF-8"/><script type="text/javascript">/*  * 操作元素的文档结构： * 使用innerHTML： * showdiv.innerHTML=showdiv.innerHTML+"HTML元素"; * removeChild(HTML元素对象名)------移除指定的子元素 *  * onclick='test_del(this)'--------this代表的是当前HTML元素对象 *  * */function test_upLoad(){var showdiv=document.getElementById("showdiv");showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file' value='请选择上传的文件' />"+"<input type='button' value='删除' onclick='test_del(this)'/></div>";}function test_del(btn){var showdiv=document.getElementById("showdiv");var parentCode=btn.parentNode;showdiv.removeChild(parentCode);}</script><style type="text/css">div{border:solid 1px;margin: 5px;}#showdiv{width: 300px;}</style></head><body><h3>操作元素的文档结构</h3><input type="button" name="" id="" value="上传" onclick="test_upLoad();" /><hr /><div id="showdiv"></div></body></html>----------------------------------------------------------------------------------------------<html><head><title>操作元素的文档结构2</title><meta charset="UTF-8"/><script type="text/javascript">/* 操作元素的文档结构2： document.createElement("标签名")------创建一个指定的HTML元素对象 * showdiv.appendChild(HTML元素对象名)----在指定的元素中添加指定的HTML元素 * */function test_upLoad(){var showdiv=document.getElementById("showdiv");//创建上传的input对象var inp=document.createElement("input");inp.type="file";var btn=document.createElement("input");btn.type="button";btn.value="删除";btn.onclick=function(){showdiv.removeChild(inp);showdiv.removeChild(btn);showdiv.removeChild(br);}var br=document.createElement("br");showdiv.appendChild(inp);showdiv.appendChild(btn);showdiv.appendChild(br);}</script></head><body><h3>操作元素的文档结构2</h3><input type="button" id="" value="上传" onclick="test_upLoad();" /><hr /><div id="showdiv"></div></body></html>----------------------------------------------------------------------------------------------form表单---------------------------------------------------------------------------------------------<html><head><title>js_操作form学习</title><meta charset="UTF-8"/><script type="text/javascript">/* js操作form表单学习 1、获取表单对象： document.getElemetById("form表单的id"); document.表单名 * 2、操作表单的属性： * fm.action="" ----设置提交路径 * fm.method="" ----设置提交方式 * 3、方法 * submit()---------使普通的按钮具备提交功能，很常用 * reset()----------重置表单 * 特殊： * fm.elements-----获取的是表单元素，也就用户能点能写的，不包括普通的HTML元素，例如div,h3 * object HTMLFormControlsCollection *  *  * fm.elements.length----获取表单元素个数 * 或者写成 fm.length *  * */function test_form(){//获取元素对象var fm=document.getElementById("fm");//alert(fm);var frm=document.frm;//alert(frm);//alert(fm===frm);//操作form的属性alert(fm.action+":"+fm.method+":"+fm.name);fm.method="get";alert(fm.elements);//form的常用方法//fm.submit();//fm.reset();}</script></head><body><h3>js操作form学习</h3><input type="button" id="" value="测试form" onclick=" test_form();" /><hr /><form action="#" method="post" id="fm" name="frm"><div id="">用户名： <input type="text" name="uname" id="uname" value="zhangsan" /><br /><br />密码： <input type="password" name="pwd" id="pwd" value="" /><br /><br /><input type="submit" value="提交"/></div></form></body></html>-------------------------------------------------------------------------------------------------------<html><head><title>form表单域通用属性讲解</title><meta charset="UTF-8"/><script type="text/javascript">/* js操作form表单域： 获取表单域元素对象： var uname=document.getElementById("name"); * var uname1=document.frm.元素的name或者id; *  * 通用属性: * readOnly:只读，不可以修改数据。但是会提交 * disabled:关闭，置灰。不能写不能提交 * 方法: * focus()  获取焦点 * blur()   失去焦点 * */function test_F(){var uname=document.getElementById("name");var uname1=document.frm.uname;//alert(uname1);//form表单域通用属性var pwd=document.frm.pwd;pwd.disabled="";//方法uname1.focus();//获取焦点uname1.blur();//失去焦点}</script></head><body><h3>form表单域通用属性讲解</h3><input type="button"  value="测试form通用属性" onclick="test_F();"/><hr /><form action="" method="get" id="fm" name="frm">用户名：<input type="text" name="uname" id="name" value="zhangsan" />密码： <input type="password" name="pwd" id="pwd" value="123" disabled="disabled" /><input type="submit" value="提交" /><br /><br /><input type="button" id="" value="注册" disabled="disabled" /></form></body></html>--------------------------------------------------------------------------------------------------------------------------------------------第五天------------------------------------------------------------------------------------cc<html><head><title>js多选框和下拉框操作</title><meta charset="UTF-8"/><script type="text/javascript">/* js操作多选框： 1、使用document.getElementsByName("多选框的name"); 2、使用for循环遍历多选框对象，然后使用checked属性来进行校验是否选中 *  * js操作单选下拉框： * 1、直接方式： * var sel=document.getElementById("下拉框id"); * sel.value * 2、间接方式： * 首先获取所有的option对象----sel.options * 遍历option对象集合，使用selected属性进行检验是否选中 * js操作多选下拉框： * 只能使用间接获取的方式，直接方式会漏值js * *///播放function test_Play(){var music=document.getElementsByName("music");for(var i=0;i<music.length;i++){if(music[i].checked){alert(music[i].value);}}}//反选function test_fx(){var music=document.getElementsByName("music");for (var i=0;i<music.length;i++) {music[i].checked=!music[i].checked;}}//全选function test_ChooseAll(){var music =document.getElementsByName("music");var num=0;for(var i=0;i<music.length;i++){if(music[i].checked){num++;}}if(num<music.length){for(var i=0;i<music.length;i++){music[i].checked=true;//num=music.length;}}else{for(var i=0;i<music.length;i++){music[i].checked=false;}}}//单选function test_radio(){var sex=document.getElementsByName("sex");for (var i=0;i<sex.length;i++) {if(sex[i].checked){alert(sex[i].value)}}}//下拉框function test_sel(){//直接获取var sel=document.getElementById("sel");//alert(sel.value);//间接获取var op=sel.options;//alert(op);for(var i=0;i<op.length;i++){if(op[i].selected){alert(op[i].value+":"+op[i].text);}}}</script></head><body><h3>js多选框和下拉框操作</h3><hr /><input type="checkbox" name="music" id="" value="0" />斑马斑马<br /><input type="checkbox" name="music" id="" value="1" />当<br /><input type="checkbox" name="music" id="" value="2" />丑八怪<br /><input type="checkbox" name="music" id="" value="3" />绅士<br /><input type="checkbox" name="music" id="" value="4" />甩葱歌<br /><input type="checkbox" name="music" id="" value="5" />演员<br /><input type="checkbox" name="music" id="" value="6" />五环之歌<br /><hr /><input type="button" id="" value="播放" onclick="test_Play();"/><input type="button" id="" value="反选" onclick="test_fx();"/><input type="button" id="" value="全选" onclick="test_ChooseAll();"/><hr /><input type="button" id="" value="测试单选" onclick="test_radio();"/><br />男：<input type="radio" name="sex" id="sex" value="0" />女：<input type="radio" name="sex" id="sex" value="1" /><hr /><select name="sel" id="sel" onchange="test_sel();"><option value="0">英语四级</option><option value="1">普通话证</option><option value="2">计算机四级</option><option value="3">会计证</option><option value="4">电焊证</option><option value="5">驾照</option></select><select name="sel" id="sel" onchange="" multiple="multiple"><option value="0">滴滴</option><option value="1">火车</option><option value="2">动车</option><option value="3">高铁</option><option value="4">飞机</option><option value="5">轮船</option></select></body></html>------------------------------------------------------------------------------------------------<html><head><title>js的简单总结</title><meta charset="UTF-8"/></head><body><h3>js的简单总结</h3><ol><li>js的介绍及特点</li><li>js的引入</li><li>js的变量--var及一些特殊的</li><li>js的运算符--==和===</li><li>js的逻辑结构---和java一致</li><li>js的数组---length属性及数组的声明及数组的方法</li><li>js的函数---函数的声明 及函数也是对象及函数之间的相互调用和传参和返回值</li><li>js的常见对象及方法----eval()</li><li>js的事件机制</li><li>event对象</li><li>bom浏览器模型---window对象的方法和属性</li><li>document对象-----5个内容</li><li>js操作form</li><li>js中form的通用属性和方法</li><li>js操作下拉框及多选框</li><li>js中的form表单校验</li></ol></body></html>--------------------------------------------------------------------------------------------------------<html><head><title>js中的form表单验证</title><meta charset="UTF-8"/><script type="text/javascript">//生成验证码function CreateCode(){var code=parseInt(Math.random()*9000+1000);//动态随机生成四位整数var span=document.getElementById("codeSpan");//获取span对象span.innerHTML=code;//将验证码放进span中span.style.backgroundColor="darkslategrey"span.style.fontSize="25px";}//校验用户名function check_uname(){var id="uname";var reg=/^[\u4e00-\u9fa5]{2,4}$/;    return check_filed(id,reg);/*var uname=document.getElementById("uname");var val=uname.value;var span=document.getElementById("unameSpan");var reg=/^[\u4e00-\u9fa5]{2,4}$/;if(val=="" || val==null ){span.innerHTML=uname.alt+"不能为空";span.className="color";//alert("用户名不能为空");}else if(reg.test(val)){span.innerHTML="用户名合法";span.className="common";//alert("用户名合法")}else{span.innerHTML="用户名不合法";span.className="color";//alert("用户名不合法");}*/}//校验密码function check_pwd(){var id="pwd";var reg=/^[\d\w]{6,8}$/;return check_filed(id,reg)&&check_pwd2();/*var pwd=document.getElementById("pwd");var val=pwd.value;var reg=/^[\d\w]{6,8}$/;var span=document.getElementById("pwdSpan");if(val=="" || val==null){span.innerHTML="密码不能为空";span.className="color";}else if(reg.test(val)){span.innerHTML="密码合法";span.className="common";}else{span.innerHTML="密码不合法";span.className="color";}*/}//校验确认密码function check_pwd2(){var pwd=document.getElementById("pwd");var pwd2=document.getElementById("pwd2");var span=document.getElementById("pwd2Span");if(pwd2.value=="" || pwd2.value==null){span.innerHTML="确认密码不能为空";span.className="color";return false;}else if(pwd2.value==pwd.value){span.innerHTML="确认密码OK";span.className="common";return true;}else{span.innerHTML="两次密码不一致";span.className="color";return false;}}//校验手机号function check_phone(){var id="phone";var reg=/^1[34578]\d{9}$/;return check_filed(id,reg);}//校验邮箱function check_mail(){var id="mail";var reg=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;return check_filed(id,reg);}//校验籍贯function check_address(){var address=document.getElementById("address");var span=document.getElementById("addressSpan");if(address.value=="0"){span.innerHTML="籍贯不能为请选择";span.className="color";return false;}else{span.innerHTML="籍贯选择成功";span.className="common";return true;}}//校验爱好function check_fav(){var fav=document.getElementsByName("fav");var span=document.getElementById("favSpan");for(var i=0;i<fav.length;i++){if(fav[i].checked){span.innerHTML="爱好选择成功";span.className="common";return true; }}span.innerHTML="爱好至少选择一个";span.className="color";return false;}//校验个人介绍function check_intro(){var intro=document.getElementById("intro");var span=document.getElementById("introSpan");var val=intro.value;if(val=="" || val==null){span.innerHTML="个人介绍不能为空";span.className="color";return false;}else if(val.length<11){span.innerHTML="个人介绍OK";span.className="common";return true;}}//校验验证码；function check_code(){var usercode=document.getElementById("code").value;var code=document.getElementById("codeSpan").innerHTML;var span=document.getElementById("showSpan");if(usercode==""|| usercode==null){span.innerHTML="验证码不能为空";span.className="color";return false;}else if(usercode == code){span.innerHTML="验证码OK";span.className="common";return true;}else{span.innerHTML="验证码错误";span.className="color";return false;}}//校验是否同意公司协议function check_agree(){var agree=document.getElementById("agree");var sub=document.getElementById("sub");sub.disabled=!agree.checked;}/*封装： 相同的保留，不同的传参 * */function check_filed(id,reg){var v=document.getElementById(id);var val=v.value;var span=document.getElementById(id+"Span");if(val=="" || val==null){span.innerHTML=v.alt+"不能为空";span.className="color";return false;}else if(reg.test(val)){span.innerHTML=v.alt+"合法";span.className="common";return true;}else{span.innerHTML=v.alt+"不合法";span.className="color";return false;}}/*在提交的时候再次校验所有*/function check_all(){check_uname();check_pwd();check_phone();check_mail();check_address();check_fav();check_intro();check_code();return check_uname()&&check_pwd()&&check_phone()   &&check_mail()&&check_address()&&check_fav()&&check_intro()&&check_code();}</script><style type="text/css">body{background-color: #eee;font-family: 萝莉体;}#showdiv{width: 500px;background-color:;border: solid 1px;border-radius: 8px;text-align: center;margin: auto;margin-top: 50px;}table{width: 500px;height: 500px;padding: 20px;}.color{color: red;}.common{color: darkgoldenrod;}</style></head><body onload="CreateCode();"><form action="#" method="get" onsubmit="return check_all();"><div id="showdiv"><table><tr><td>用户名：</td><td><input type="text" name="uname" id="uname" value="张三" onblur="check_uname();" alt="用户名"/><span id="unameSpan">*用户名为2到4位的汉字</span></td></tr><tr><td>密码：</td><td><input type="password" name="pwd" id="pwd" value=""  onblur="check_pwd();" alt="密码"/><span id="pwdSpan">*6到8位的字母数字组合</span></td></tr><tr><td>确认密码:</td><td><input type="password" name="pwd2" id="pwd2" value="" onblur="check_pwd2();"/><span id="pwd2Span"></span></td></tr><tr><td>手机号:</td><td><input type="text" name="phone" id="phone" value="" alt="手机号" onblur="check_phone();" /><span id="phoneSpan"></span></td></tr><tr><td>邮箱:</td><td><input type="text" name="mail" id="mail" value="" alt="邮箱" onblur="check_mail();"/><span id="mailSpan"></span></td></tr><tr><td>性别:</td><td>男: <input type="radio" name="sex" id="sex" value="0" checked="checked"/>女: <input type="radio" name="sex" id="sex" value="1" /></td></tr><tr><td>籍贯:</td><td><select name="address" id="address" onchange="check_address();"><option value="0">--请选择--</option><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option></select><span id="addressSpan"></span></td></tr><tr><td>爱好:</td><td><input type="checkbox" name="fav" id="fav" value="0" onclick="check_fav();"/>打篮球<input type="checkbox" name="fav" id="fav" value="1" onclick="check_fav();"/>睡觉<input type="checkbox" name="fav" id="fav" value="2" onclick="check_fav();"/>吃<br /><input type="checkbox" name="fav" id="fav" value="3" onclick="check_fav();"/>LOL<input type="checkbox" name="fav" id="fav" value="4" onclick="check_fav();"/>打麻将<input type="checkbox" name="fav" id="fav" value="5" onclick="check_fav();"/>斗地主<span id="favSpan"></span></td></tr><tr><td>个人介绍：</td><td><textarea name="intro" id="intro" rows="5" cols="30"  onblur="check_intro();"></textarea><span id="introSpan"></span></td></tr><tr><td>验证码：</td><td><input type="text" name="code" id="code" value="" onblur="check_code();"/><span id="codeSpan" onclick="CreateCode();"></span>   <span id="showSpan"></span></td></tr><tr><td colspan="2" align="center"><input type="checkbox"  id="agree" value="" onclick="check_agree();"/>是否同意本公司的协议</td></tr><tr><td colspan="2" align="center"><input type="submit"  value="确认注册" id="sub" disabled="disabled" /></td></tr></table></div></form></body></html>-----------------------------------------------------------------------------------------------------------------------------------------
0 0