DOM学习笔记六

最新推荐文章于 2024-08-07 17:12:09 发布

u013497151

最新推荐文章于 2024-08-07 17:12:09 发布

阅读量1.4k

点赞数

分类专栏： JavaScript Learn_Web

本文链接：https://blog.csdn.net/wjw0130/article/details/41923521

版权

Learn_Web 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

JavaScript

25 篇文章 0 订阅

订阅专栏

示例：邮件列表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<link rel="stylesheet" type="text/css" href="table.css" />
    <style type="text/css">
        .one {  background-color: #249BDB;  }
        .two {  background-color: #F8981D;  }
        .high{  background-color: #cc0000;  }
    </style>
    <script type="text/javascript">
        //行颜色间隔显示功能
		function trColor(){
			//1.获取表格对象
			var oTableNode = document.getElementById("mailtable");
			//获取行对象
			var oTrNodes = oTableNode.rows;
			//3.对所有需要设置背景的行对象进行遍历
            var name;
            for(var i = 1;i<oTrNodes.length-1;i++){

                oTrNodes[i].className=(i&1)?"one":"two";
                oTrNodes[i].οnmοuseοver=function(){
                    name = this.className;
                    this.className = "high";
                }
                oTrNodes[i].οnmοuseοut=function(){
                    this.className = name;
                }
            }
		}
        onload = function(){
            trColor();
        }

        //复选框的全选动作
        function checkAll(node){
            //获取所有的mail复选框
            var omailNodes = document.getElementsByName("mail");
           // alert(omailNodes.length);
            for(var i = 0;i<omailNodes.length;i++){
                omailNodes[i].checked = node.checked;
            }
        }
        //定义操作操作复选框按钮的方法
        function chcekAllButton(num){

            var omailNodes = document.getElementsByName("mail");
            for(var i = 0;i<omailNodes.length;i++){

                if(num>1) {
                    omailNodes[i].checked = !omailNodes[i].checked;
                }
             else {
                    omailNodes[i].checked = num;//0,false,1,true,反选，全选，直接复制即可
                }
            }
        }
        //删除所选邮件
        function deleteMail() {
            //获取所有mail节点
            if (confirm("确定要删除所选邮件?")) {
                var omailNodes = document.getElementsByName("mail");
                for (var i = 0; i < omailNodes.length; i++) {
                    if (omailNodes[i].checked) {

                        var trNode = omailNodes[i].parentNode.parentNode;
                        //注意和集合一样，只要remove，长度就减了，而i在增加
                        trNode.parentNode.removeChild(trNode);
                        //所以i要--
                        i--;
                    }
                }
                trColor();//删完后，颜色就变了
            }
        }

	</script>
</head>

<body>
    <table id="mailtable">
    <tr>
        <th><input type="checkbox" name="all" οnclick="checkAll(this)">全选</th>
        <th>发件人</th>
        <th>邮件名称</th>
        <th>邮件附属信息</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="mail" /></td>
        <td>我是1号</td>
        <td>邮件1号</td>
        <td>信息1号</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="mail" /></td>
        <td>我是2号</td>
        <td>邮件2号</td>
        <td>信息2号</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="mail" /></td>
        <td>我是3号</td>
        <td>邮件3号</td>
        <td>信息3号</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="mail" /></td>
        <td>我是4号</td>
        <td>邮件4号</td>
        <td>信息4号</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="mail" /></td>
        <td>我是5号</td>
        <td>邮件5号</td>
        <td>信息5号</td>
    </tr>
     <tr>
        <th>
            <input type="checkbox" name="all" οnclick="checkAll(this)"/>全选
        </th>
         <th colspan="3">
             <input type="button" value="全选" οnclick="chcekAllButton(1)"/>
             <input type="button" value="取消全选" οnclick="chcekAllButton(0)"/>
             <input type="button" value="反选" οnclick="chcekAllButton(2)"/>
             <input type="button" value="删除所选邮件" οnclick="deleteMail()"/>
         </th>
     </tr>
    </table>
</body>
</html>

校验

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">

   function check(name,reg,spanId,okinfor,errinfor){

       var flag = false;

       var val = document.getElementsByName(name)[0].value;
       var oSpanNode = document.getElementById(spanId);

      oSpanNode.innerHTML=(reg.test(val))?(flag=true,"√".fontcolor("green")):"X".fontcolor("red");
        
       return flag;
   }
    //校验用户名
   function checkuser(){
       var reg = /^[a-z]{4}$/;//注意是正则
       return check("user",reg,"userspan");
   }

   //校验密码
   function checkPsw(){
       var reg = /^\d{4}$/i;
       return check("psw",reg,"pswspan");
   }

   //校验邮件
   function checkMail(){
       var reg = /^\w+@\w+(\.\w+)+$/i;
       return check("mail",reg,"mailspan");
   }

   //确定密码
   function checkrePsw(){
       //只要判断密码是否一致
       //获取密码框内容
       var flag = false;

       var pass = document.getElementsByName("psw")[0].value;
       //获取确认密码框内容
       var repass = document.getElementsByName("repsw")[0].value;
        //获取确认密码的span
       var ospanNode = document.getElementById("repswspan");
     //  alert(pass+" :　"+repass);
       if(pass==repass) {
            ospanNode.innerHTML = "√".fontcolor("green");
           flag = true;
       }else{
           ospanNode.innerHTML = "X".fontcolor("red");
       }
       return flag;
   }

    function checkform(){

        return checkuser() && checkPsw() && checkrePsw() && checkMail();
        //在校验一次，以防校验通过后又改密码
    }
    function mySubmit(){
        var oFormNode = document.getElementById("usersubmit");
        if(checkuser() && checkPsw() && checkrePsw() && checkMail())
            oFormNode.submit();
    }
</script>
<form id="usersubmit" οnsubmit="return checkform()"><!--返回false，终止数据提交-->

    用户名称: <input type="text" name="user" οnblur="checkuser()" />
    <span id="userspan"></span>
    <br/><br/>
    输入密码:<input type="text" name="psw" οnblur="checkPsw()" />
    <span id="pswspan"></span><br/><br/>

    确认密码:<input type="text" name="repsw" οnblur="checkrePsw()"/>
    <span id="repswspan"></span><br/><br/>

    邮件地址:<input type="text" name="mail" οnblur="checkMail()"/>
    <span id="mailspan"></span><br/><br/>

    <input type="submit" value="提交" /><br/>

</form>
<hr/><br/>
<!--自定义提交按钮-->
<input type="button" value="MySubmit" οnclick="mySubmit()" />
</body>
</html>

示例—问卷调查

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #contectid{
            display: none;
        }
        #noul{
            list-style: none;
            margin: 0px;
        }
        .close{
            display: none;
        }
        .open{
            display: block;
        }
    </style>
</head>
<body>
        <!--


        单选按钮演示
        1.是否参与问卷调查
        2.性格测试
        -->
        <script type="text/javascript">
            function showResult(){
                //1.判断是否参与选择，获取所有no1的radio，并判断checked状态
                var oNo1Node = document.getElementsByName("no1");
                var flag = false;
                var val;
                for(var i = 0;i<oNo1Node.length;i++){
                    if(oNo1Node[i].checked){
                        flag = true;
                        val = oNo1Node[i].value;
                        break;
                    }
                }
               if(!flag){
                    document.getElementById("errInformation").innerHTML="没有答案被选中!".fontcolor("red");
                    return;
               }
                if(1<=parseInt(val) && parseInt(val)<=3){
                    document.getElementById("res_1").className="open";//1只要显示了，2就不要显示
                    document.getElementById("res_2").className="close";
                }else{
                    document.getElementById("res_2").className="open";
                    document.getElementById("res_1").className="close";
                }
            }
        </script>
        <h2>欢迎参加性格测试:</h2>
          <div>
                <h3><span>No.1:您喜欢什么?</span></h3>
              <ul id="noul">
                 <li><input type="radio" name="no1" value="1"/>A</li>
                  <li> <input type="radio" name="no1" value="3"/>B</li>
                  <li> <input type="radio" name="no1" value="5"/>C</li>
                  <li><input type="radio" name="no1" value="7"/>D</li>
              </ul>
            </div>
          <div>
               <input type="button" value="查看结果" οnclick="showResult()" />
              <span id="errInformation"></span>
                <div id="res_1" class="close">1-3:性格开朗</div>
                <div id="res_2" class="close">4以上:浮动</div>
          </div>
        <hr/>
        <script type="text/javascript">
            function showcontected(node){


                var odivNode = document.getElementById("contectid");
                with (odivNode.style){
                    if(node.value=="yes"){
                       // odivNode.style.display="block";
                        display="block";
                    }else{
                        //odivNode.style.display="block";
                        display="none";
                    }
                }
            }
        </script>
        <!-- 问卷调查,是，就显示问卷，否，不显示-->
        <div>
        是否要参加问卷调查?
        <input type="radio" name="wenjuan" value="yes" οnclick="showcontected(this)"/>是
        <input type="radio" name="wenjuan" value="no" checked="checked" οnclick="showcontected(this)"/>否
        </div>
        <div id="contectid">
        内容如下:<br/><br/>
        姓名:<input type="text" /><br/><br/>
        邮箱:<input type="text" /><br/><br/>
        </div>
</body>
</html>

下拉菜单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .clrclass{
            height: 50px;
            width: 50px;
            float: left;
            margin-right: 20px ;
        }
        #txt{
            clear: left;
            margin-top:50px;
        }
        .selClass{
            width: 100px;
        }
    </style>
</head>
<body>
        <script type="text/javascript">
            function Changecolor(node){
               // alert(node.style.backgroundColor);
                var color = node.style.backgroundColor;
                document.getElementById("txt").style.color = color;
            }
        </script>
        <div class="clrclass" id="clr1" style="background-color: red" οnclick="Changecolor(this)"></div>
        <div class="clrclass" id="clr2" style="background-color: yellow" οnclick="Changecolor(this)"></div>
        <div class="clrclass" id="clr3" style="background-color: blue" οnclick="Changecolor(this)"></div>
        <div id="txt">
            需要显示效果的文字</br>
            需要显示效果的文字</br>
            需要显示效果的文字</br>
            需要显示效果的文字</br>
        </div>

        <hr/>
        <script type="text/javascript">
            function Changecolor2(){
                var oselectNode = document.getElementsByName("selectcolor")[0];
                //如何确定选择是哪种颜色，select API
                var ooptinNodes = oselectNode.options;//获取所有的option
             // alert(oselectNode.selectedIndex);//被选中颜色的索引
             // alert(oselectNode.options[oselectNode.selectedIndex].innerHTML);
                var color = oselectNode.options[oselectNode.selectedIndex].value;
                document.getElementById("txt").style.color = color;
            }
        </script>
        <select name="selectcolor" οnchange="Changecolor2()">
            <option value="black">选择颜色</option>
            <option value="red">红色</option>
            <option value="yellow">黄色</option>
            <option value="blue">蓝色</option>
        </select>
        <select class="selClass" name="selectcolor2" οnchange="Changecolor3()">
            <option style="background-color: black" value="black">选择颜色</option>
            <option style="background-color: red" value="red"></option>
            <option style="background-color: yellow" value="yellow"></option>
            <option style="background-color: blue" value="blue"></option>
        </select>
</body>
</html>


示例—选择城市

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        select{
            width: 100px;
        }
    </style>
</head>
<body>
        <script type="text/javascript">
            function selectcity(){
                var citys = [['选择城市'],['A','B','C','D'],
                            ['E','F','G','H'],
                            ['I','J','K','L'],
                            ['M','N','O','P'],
                            ['Q','R','S','T']];
               // var keyword = {"shandong":['A','B','C','D']};第二种方式，键值对形式
                //获取两个下拉菜单对象
                var oselectNode1 = document.getElementById("selectid");
                var oselectNode2 = document.getElementById("subselectid");
                //确定选择的是哪个省
                var index = oselectNode1.selectedIndex;
                //通过角标获取城市数组
                var arrcity = citys[index];

                //将子菜单中的内容清空
            /*    for(var i = 1;i<oselectNode2.length;i++){
                    oselectNode2.removeChild(oselectNode2.options[i]);
                    i--;
                }*/
                oselectNode2.length = 0;//不必重新删个干净，直接初始化length就好
                
                //遍历这个数组，并将数组的值封装成option对象，添加到子菜单中
                for(var i = 0;i<arrcity.length;i++){
                    var opNode = document.createElement("option");
                    opNode.innerHTML = arrcity[i];
                    oselectNode2.appendChild(opNode);
                }
            }
        </script>
        <select id="selectid" οnchange="selectcity()">
            <option>选择省市</option>
            <option value="shandong">山东</option>
            <option>山西</option>
            <option>河北</option>
            <option>江西</option>
        </select>
        <select id="subselectid">
            <option>选择城市</option>
        </select>
</body>
</html>

添加和删除附件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        table a:link,table a:visited{
            color: #0066FF;
            text-decoration: none;
        }
        table a:hover{
            color: red;
        }
    </style>
    <script type="text/javascript">
        function addFile(){
            var oTableNode = document.getElementById("fileid");
            var oTrNode = oTableNode.insertRow();
            var oTdNode_file = oTrNode.insertCell();//添加文件的单元格
            var oTdNode_dele = oTrNode.insertCell();//删除文件的单元格
            oTdNode_file.innerHTML = "<input type='file' />";
            //oTdNode_dele.innerHTML = "<a href='javascript:void(0)' οnclick='deleteFile(this)'> 删除附件 </a>";
            oTdNode_dele.innerHTML = "<img src='1000.jpg' alt='删除文件' οnclick='deleteFile(this)'>";
        }
        function deleteFile(node){
            var oTrNode = node.parentNode.parentNode;
            oTrNode.parentNode.removeChild(oTrNode);
        }
    </script>
</head>
<body>
        <table id="fileid">
            <tr>
                <td>
                    <a href="javascript:void(0)" οnclick="addFile()">添加附件</a>
                </td>
            </tr>
        <!--
        //点击添加文件，才显示
        <tr>
            <td>
                <input type="file"/>
            </td>
            <td>
                <a href="javascript:void(0)" οnclick="deleteFile()"></a>
            </td>
        </tr>

        -->
        </table>
</body>
</html>

表单校验—涉及的事件和信息提示方式&&正则表达式&&提交校验

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
</head>
<body>
    <script type="text/javascript">
        function checkuser(){

            var flag = false;
           // alert("ni");
            var oUserNode = document.getElementsByName("user")[0];
            var oSpanNode = document.getElementById("userspan");
            var name = oUserNode.value;

            //定义正则表达式
            var reg = new RegExp("^[a-z]{4}$","i");//头尾一共4个字母，i忽略大小写
            //reg = new RegExp("^[0-9]{4}$");//必须4个数字
           // reg = /^[0-9]{4}$/;//第二种定义格式/..../，因为不是字符串，不需要再次转义，比如\d,在这
                                //种方式中直接写\d，即可
            // alert(oUserNode.value);
            //实例校验,test方法，判断是否符合正则,match,返回的不是boolean
            oSpanNode.innerHTML=(reg.test(name))? ("√".fontcolor("green"),flag=true):"X".fontcolor("red");

            return flag;
        }
        //form的onsubmit事件，提交事件处理
        function checkform(){
            //如果用户名正确，才允许提交
            return checkuser();
        }
        function mySubmit(){
            var oFormNode = document.getElementById("usersubmit");
            if(checkuser())
            oFormNode.submit();//form的提交方法
        }
    </script>
    <form id="usersubmit" οnsubmit="return checkform()"><!--返回false，终止数据提交-->
        <!--自动校验，光标在文本框中，是获取焦点事件onblur-->
        用户名称: <input type="text" name="user" οnblur="checkuser()" />
        <span id="userspan"></span>
        <br/><br/>
        输入密码:<input type="text" name="psw" ><br/><br/>
        <input type="submit" value="提交" /><br/>
    </form>
    <hr/><br/>
        <!--自定义提交按钮-->
        <input type="button" value="MySubmit" οnclick="mySubmit()" />
</body>
</html>