2021年8月5日--------------javascript小案例

1.好友列表

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>好友列表</title>
<style type="text/css">
table {border:#0099FF 1px solid;width:100px;border-collapse:collapse;}table td{border:#0066FF 1px solid;background-color:#FF9900;text-align:center;}table td div {background-color:#FFFF99;text-align:left;}table td a:link, table td a:visited {color:#00ffFF;text-decoration:none;}table td a:hover {color:#00CC00;}/*
使用display属性:如果取值为none就是隐藏标签。
*/
table td div {display:none;}.open {display:block;}.close {display:none;} </style><script type="text/javascript">function openDiv(obj){//1.获取divvar div = obj.nextSibling.nextSibling;//获取所有的div，如果有开启的div，在另一个div开启后关闭当前divvar divs =document.getElementsByTagName("div");//遍历所有的div，只要不是当前点击的div，就要将其关闭for(var i=0;i<divs.length;i++){if(divs[i]!=div){divs[i].style.display = "none";}}//2.显示divdiv.style.display = div.style.display == "none"?"block":"none";/*if(div.style.display == "none"){div.style.display = "block";}else{div.style.display = "none";}*/}
</script></head><body>
<table><tr><td><a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a><div>秦始皇<br />刘邦<br />李世民<br />康熙<br /></div></td></tr><tr><td><a href="javascript:void(0)" onclick="openDiv(this)">三国好友</a><div>刘备<br />关羽<br />张飞<br />赵云<br /></div></td></tr><tr><td><a href="javascript:void(0)" onclick="openDiv(this)">美女好友</a><div>西施<br />貂蝉<br />杨贵妃<br />王昭君<br /></div></td></tr><tr><td><a href="javascript:void(0)" onclick="openDiv(this)">IT好友</a><div>马云<br />李开复<br />俞敏洪<br />李彦宏<br /></div></td></tr>
</table>
</body>
</html>

2.获取子节点元素和标签元素

<!DOCTYPE HTML>
<html xmlns="" xml:lang="en">
<head><title>如何通过document获取数据</title><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><script type="text/javascript">function demo1(){var username = document.getElementById("username");alert(username.value);}function demo2(){var elements = document.getElementsByName("password");for(var i=0;i<elements.length;i++){alert(elements[i].value);}}function demo3(){var elms = document.getElementsByTagName("input");for(var i=0;i<elms.length;i++){alert(elms[i].value);}}function demo4(){var p = document.getElementById("pid");//alert(p.innerHTML);//alert(p.innerText);//设置对象html内容//p.innerHTML = "<font color='green'>真好</font>";}</script></head>
<body>用户名称：<input type="text" name="username" id="username"/><br />用户密码：<input type="password" name="password" id="password" /><br />用户密码2：<input type="password" name="password" id="password2" /><br /><hr /><input type="button" value="通过ID获取节点的值" οnclick="demo1()"/><input type="button" value="通过NAME获取节点的值"  οnclick="demo2()" /><input type="button" value="通过TAG获取节点的值" οnclick="demo3()" />        <hr  /><p id="pid"><font color="red">获取P标签中的文字</font></p><input type="button" value="获取P中文字" οnclick="demo4()" /></body>
</html>

3.增删查改

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>节点的增删改查</title>
<!--加入样式表-->
<style type="text/css">
div {border:#0099FF 1px solid;height:60px;width:120px;margin:20px 0px 20px 20px;padding:10px 0px 0px 20px;}#div_1{background-color:#00FFFF;}#div_2{background-color:#FF3399;}#div_3{background-color:#0000FF;}#div_4{background-color:#FFFF66;}
.min{background: #00ffFF;
}
</style><script>//创建并添加节点function addNode(cssstyle) {//创建新增节点var new_div=document.createElement("div")new_div.innerHTML="<font color='#8a2be2'>我的div1</font>";new_div.className=cssstyle;// 获取body节点对象var parentNode = document.getElementsByTagName("body")[0];//把新节点的元素赋值给父节点// parentNode.appendChild(new_div);//只能把我们的新节点追加到父节点的末尾var div_4 = document.getElementById("div_4");parentNode.insertBefore(new_div,div_4);}function deleteNode() {let parentNode = document.getElementsByTagName("body")[0];let div_2 = document.getElementById("div_2");//删除子节点parentNode.removeChild(div_2);}function updateNode() {let new_div = document.createElement("div");new_div.innerHTML="updatediv";let parentNode = document.getElementsByTagName("body")[0];let div_3 = document.getElementById("div_3");parentNode.replaceChild(new_div,div_3)}function copyNode() {let parentNode = document.getElementsByTagName("body")[0];let div_1 = document.getElementById("div_1");let node = div_1.cloneNode(true);parentNode.appendChild(node);}</script></head><body><div id="div_1"></div><div id="div_2">div区域2</div><div id="div_3">div区域3</div><div id="div_4">div区域4</div><hr /><input type="button" class="min" value="创建并添加节点" onclick="addNode('min')" /><input type="button" value="删除节点" onclick="deleteNode()" /><input type="button" value="替换节点" onclick="updateNode()" /><input type="button" value="克隆节点" onclick="copyNode()" /></body>
</html>

4.注册表单

<html><head><title>表单页面</title><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><script>//函数不能嵌套function checkData() {var canSub=true;//判断用户名是否为空//获取用户们输入框标签对象/*var username=document.getElementsByName("username")[0];//获取input框后面span标签对象var username_msg=document.getElementById("username_msg");//清空username_msg.innerText="";//判断用户名输入框是否内容为空if(username.value==""){//内容为空需要设置提示消息username_msg.innerText="用户名不能为空!!!";}*///调用函数判断非空canSub=checkNull("username","用户名不能为空！！！")&&canSub;canSub=checkNull("password","密码不能为空！！！")&&canSub;canSub=checkNull("password2","确认密码不能为空！！！")&&canSub;canSub=checkNull("nickname","昵称不能为空！！！")&&canSub;canSub=checkNull("email","邮箱不能为空！！！")&&canSub;canSub=checkNull("img","头像不能为空！！！")&&canSub;canSub=checkNull("valistr","验证码不能为空！！！")&&canSub;//密码一致性校验var psw1=document.getElementsByName("password")[0].value;var psw2=document.getElementsByName("password2")[0].value;//获取确认密码输入框后面得spanvar psw2_msg=document.getElementById("password2_msg");//判断两个密码的值是否相等if(psw1!=""&&psw2!=""&&psw1!=psw2){//设置提示消息psw2_msg.innerText="密码不一致！！！";canSub=false;}//性别非空//获取所有性别的单选框放入到数组中var genders=document.getElementsByName("gender");//获取性别单选框后面的span标签元素var gender_msg=document.getElementById("gender_msg");//清空gender_msg.innerText="";//标志位---布尔值var flag=true;//遍历数组---新变量for(var i=0;i<genders.length;i++){//判断数组元素（性别单选框）是否被勾选if(genders[i].checked==true){//如果单选框的属性checked的值为true表明被勾选//如果进了判断说明被勾选，表示内容不为空flag=false;break;}}//if(flag){//设置提示消息gender_msg.innerText="性别不能为空!!!";canSub=false;}//邮箱格式验证//邮箱正则语法var reg=/\w+@\w+(\.\w+)+/;//获取邮箱输入框的内容var email=document.getElementsByName("email")[0].value;//获取邮箱输入框后面得span标签var email_msg=document.getElementById("email_msg");//判断邮箱输入内容是否符合格式if(!reg.test(email)){//设置提示消息email_msg.innerText="邮箱格式不正确！！！";canSub=false;}//爱好非空校验//获取所有的复选框内容放到数组中var likes=document.getElementsByName("like");//获取复选框后面得span标签var like_msg=document.getElementById("like_msg");//清空like_msg.innerText="";//标志位var haslike=true;//遍历数组---新变量for(var i=0;i<likes.length;i++){//判断数组元素（复选框）是否又被勾选if(likes[i].checked==true){//被勾选haslike=false;break;}}if(haslike){//设置提示消息like_msg.innerText="爱好不能为空！！！";canSub=false;}//描述信息非空验证//获取描述信息输入框对象var desc=document.getElementById("desc");//获取描述信息后的span标签var desc_msg=document.getElementById("desc_msg");//清空desc_msg.innerText="";//判断描述内容是否是初始内容if(desc.value=="请输入描述信息~！"){//设置提示消息desc_msg.innerText="描述信息不能为空";canSub=false;}return canSub;}//定义公共判断非空的函数function checkNull(name,msg) {var tag=document.getElementsByName(name)[0];var tag_msg=document.getElementById(name+"_msg");tag_msg.innerText="";if(tag.value==""){tag_msg.innerText=msg;return false;}return true;}//描述信息处理//聚焦事件function descFocus(thisObj) {//thisObj接收this对象，这个对象代表当前描述输入框对象//判断是否是初始内容if(thisObj.value=="请输入描述信息~！"){//设置内容为空thisObj.value="";}}//离焦事件function descBlur(thisObj) {//thisObj接收this对象，这个对象代表当前描述输入框对象//判断是否是“”if(thisObj.value==""){//设置内容为空thisObj.value="请输入描述信息~！";}}</script><style type="text/css">span{color:red;font-size:12px;}</style></head><body><!--如果提交事件获取的是true则正常提交如果是false则不提交--><form action="http://localhost:8080" method="POST" onsubmit="return checkData()"><table border="1px" align="center" cellpadding="10px" cellspacing="0px" borderColor="red" bgcolor="pink"><caption><font color="red" size="6">注册表单</font></caption><input type="hidden" name="id" value="9527"/><tr><td>用户名:</td><td><input type="text" name="username" /> <span id="username_msg"></span></td></tr><tr><td>密码:</td><td><input type="password" name="password"/> <span id="password_msg"></span></td></tr><tr><td>确认密码:</td><td><input type="password" name="password2"/> <span id="password2_msg"></span></td></tr><tr><td>性别：</td><td><input type="radio" name="gender" value="男"/>男<input type="radio" name="gender" value="女"/>女 <span id="gender_msg"></span></td></tr><tr><td>昵称：</td><td><input type="text" name="nickname"/> <span id="nickname_msg"></span></td></tr><tr><td>邮箱：</td><td><input type="text" name="email"/> <span id="email_msg"></span></td></tr><tr><td>爱好：</td><td><input type="checkbox" name="like" value="lq"/>篮球<input type="checkbox" name="like" value="zq"/>足球<input type="checkbox" name="like" value="qq"/>铅球<input type="checkbox" name="like" value="blq"/>玻璃球<span id="like_msg"></span></td></tr><tr><td>客户类型：</td><td><select name="type"><option value="pm">平民</option><option value="sxdy">少先队员</option><option value="gqty">共青团员</option><option value="ybdy">预备党员</option><option value="zsdy">正式党员</option></select><span id="type_msg"></span></td></tr><tr><td>头像：</td><td><input type="file" name="img"/> <span id="img_msg"></span></td></tr><tr><td>描述信息：</td><td><textarea id="desc" rows="5" cols="45" name="desc" onfocus="descFocus(this)" onblur="descBlur(this)">请输入描述信息~！</textarea> <br/><span id="desc_msg"></span></td></tr><tr><td>验证码：</td><td><input type="text" name="valistr"/><img src="1.jpg" width="100px" height="20px"/><span id="valistr_msg"></span></td></tr><tr><td colspan="2" align="right"><input type="submit" value="提 交"/><input type="reset" value="重 置"/></td></tr></table></form></body>
</html>

5.切换字体

className 用来借用css样式

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻广告</title>
<style type="text/css">
<!-- 伪元素选择器 -->
a:link,a:visited {color:#FF9900;text-decoration:none;font-size:15px;}a:hover {color:#0099FF;}
.newsstyle {border:#0099FF 1px solid;font-size:16px;width:400px;}
/*
预先定一些选择器
*/
.max {border:#0099FF 1px solid;font-size:20px;color:#FF0000;background-color:#CCFFFF;width:400px;}
.min {border:#0099FF 1px solid;font-size:12px;color:#0000FF;background-color:#FFFFFF;width:400px;}</style><script type="text/javascript">
function resize(styleName){//拿到一个newstext的idvar newstext = document.getElementById("newstext");//将上面的css样式赋给当前字体newstext.className = styleName;}
</script>
</head>
<body><h2>这是一个大新闻.</h2><a href="javascript:void(0)" onclick="resize('min')">小字体</a> <a href="javascript:void(0)" onclick="resize('newsstyle')">中字体</a> <a href="javascript:void(0)" onclick="resize('max')">大字体</a> <hr />   <div id="newstext" class="newsstyle">演示接口.很多内容.怎么办呢?等等<br />演示接口.很多内容.怎么办呢?等等<br />演示接口.很多内容.怎么办呢?等等<br />演示接口.很多内容.怎么办呢?等等<br />演示接口.很多内容.怎么办呢?等等<br />演示接口.很多内容.怎么办呢?等等<br />演示接口.很多内容.怎么办呢?等等<br />演示接口.很多内容.怎么办呢?等等<br /></div>
</body>
</html>

6.二级菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级联动菜单</title>
<script>function selectCity(obj){data = {"北京市":["海淀区","朝阳区","丰台区"],"河北省":["石家庄","唐山","秦皇岛"],"辽宁省":["沈阳","大连","鞍山"],"山东省":["青岛","济南","烟台"]}var province = document.getElementById("province").value;var citys = data[province];console.log(citys)var city = document.getElementById("city");//清空上次所选列表的值city.innerHTML="<option>"+"选择城市"+"</option>";for (var i=0;i<citys.length;i++){//+=city.innerHTML+="<option>"+citys[i]+"</option>";}}</script>
</head><!-- "海淀区","朝阳区","丰台区""石家庄","唐山","秦皇岛""沈阳","大连","鞍山""青岛","济南","烟台"-->
<body>
<select id="province" onchange="selectCity(this)"><option>--选择省市--</option><option>北京市</option><option>河北省</option><option>辽宁省</option><option>山东省</option>
</select><select id="city"><option>--选择城市--</option>
</select>
</body></html>