DOM学习笔记六

示例：邮件列表

<!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].onmouseover=function(){
                    name = this.className;
                    this.className = "high";
                }
                oTrNodes[i].onmouseout=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" onclick="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" onclick="checkAll(this)"/>全选
        </th>
         <th colspan="3">
             <input type="button" value="全选" onclick="chcekAllButton(1)"/>
             <input type="button" value="取消全选" onclick="chcekAllButton(0)"/>
             <input type="button" value="反选" onclick="chcekAllButton(2)"/>
             <input type="button" value="删除所选邮件" onclick="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 = /^\[email protected]\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" onsubmit="return checkform()"><!--返回false，终止数据提交-->

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

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

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

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

</form>
<hr/><br/>
<!--自定义提交按钮-->
<input type="button" value="MySubmit" onclick="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="查看结果" onclick="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" onclick="showcontected(this)"/>是
        <input type="radio" name="wenjuan" value="no" checked="checked" onclick="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" onclick="Changecolor(this)"></div>
        <div class="clrclass" id="clr2" style="background-color: yellow" onclick="Changecolor(this)"></div>
        <div class="clrclass" id="clr3" style="background-color: blue" onclick="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" onchange="Changecolor2()">
            <option value="black">选择颜色</option>
            <option value="red">红色</option>
            <option value="yellow">黄色</option>
            <option value="blue">蓝色</option>
        </select>
        <select class="selClass" name="selectcolor2" onchange="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" onchange="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)' onclick='deleteFile(this)'> 删除附件 </a>";
            oTdNode_dele.innerHTML = "<img src='1000.jpg' alt='删除文件' onclick='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)" onclick="addFile()">添加附件</a>
                </td>
            </tr>
        <!--
        //点击添加文件，才显示
        <tr>
            <td>
                <input type="file"/>
            </td>
            <td>
                <a href="javascript:void(0)" onclick="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" onsubmit="return checkform()"><!--返回false，终止数据提交-->
        <!--自动校验，光标在文本框中，是获取焦点事件onblur-->
        用户名称: <input type="text" name="user" onblur="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" onclick="mySubmit()" />
</body>
</html>

时间： 2024-10-05 16:09:17

DOM学习笔记六的相关文章

python之raw_input()（学习笔记六）

python之raw_input()(学习笔记六) 我们经常使用raw_input()读取用户的输入,如下例子所示: >>> name = raw_input('please input your name:'),截图如下: 下面简单说下,raw_input()与if搭配使用,脚本如下: #!/usr/bin/env python # -*- coding:utf-8 -*- birth = raw_input('birth:') if birth < 2000: print '0

swift学习笔记(六)析构过程和使用闭包对属性进行默认值赋值

一.通过闭包和函数实现属性的默认值当某个存储属性的默认值需要定制时,可以通过闭包或全局函数来为其提供定制的默认值. 注:全局函数结构体和枚举使用关键字static标注函数则使用class关键字标注当对一个属性使用闭包函数进行赋值时,每当此属性所述的类型被创建实例时,对应的闭包或函数会被调用,而他们的返回值会被作为属性的默认值. ESC: Class SomeCLass{ let someProperty:SomeType={ //给someProperty赋一个默认值 //返回一个与

java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)

java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessController的checkPerssiom方法,访问控制器AccessController的栈检查机制又遍历整个 PerssiomCollection来判断具体拥有什么权限一旦发现栈中一个权限不允许的时候抛出异常否则简单的返回,这个过程实际上比我的描述要复杂得多,这里我只是简单的一句带过,因为这

初探swift语言的学习笔记六(ARC-自动引用计数,内存管理)

Swift使用自动引用计数(ARC)来管理应用程序的内存使用.这表示内存管理已经是Swift的一部分,在大多数情况下,你并不需要考虑内存的管理.当实例并不再被需要时,ARC会自动释放这些实例所使用的内存. 另外需要注意的: 引用计数仅仅作用于类实例上.结构和枚举是值类型,而非引用类型,所以不能被引用存储和传递. swift的ARC工作过程每当创建一个类的实例,ARC分配一个内存块来存储这个实例的信息,包含了类型信息和实例的属性值信息. 另外当实例不再被使用时,ARC会释放实例所占用的内存,这些

Linux System Programming 学习笔记(六) 进程调度

1. 进程调度 the process scheduler is the component of a kernel that selects which process to run next. 进程调度器需要使处理器使用率最大化,并且提供使多个进程并发执行的虚拟 Deciding which processes run, when, and for how long is the process scheduler's fundamental responsibility. 时间片:th

Lua学习笔记(六)：函数-续

Lua中的函数是带有词法定界(lexical scoping)的第一类值(first-class values).第一类值指:在Lua中函数和其他值(数值.字符串)一样,函数可以被存放在变量中,也可以存放在表中,可以作为函数的参数,还可以作为函数的返回值.词法定界指:嵌套的函数可以访问他外部函数中的变量.这一特性给Lua提供了强大的编程能力. Lua中关于函数稍微难以理解的是函数也可以没有名字,匿名的.当我们提到函数名(比如print),实际上是说一个指向函数的变量,像持有其他类型的变量一样:

laravel3学习笔记(六)

原作者博客:ieqi.net ==================================================================================================== ORM Laravel3中MVC体系中Model里最重要的组成部分无疑是ORM了,ORM — object-relational mapper — 将数据操作面向对象化,使得整个web框架的核心风格统一,降低整体复杂度,为开发者提供便利. Laravel3中的ORM叫

IBatis.Net学习笔记六--再谈查询

在IBatis.Net学习笔记五--常用的查询方式中我提到了一些IBatis.Net中的查询,特别是配置文件的写法. 后来通过大家的讨论,特别是Anders Cui 的提醒,又发现了其他的多表查询的方式.在上一篇文章中我提到了三种方式,都是各有利弊:第一种方式当数据关联很多的情况下,实体类会很复杂:第二种方式比较灵活,但是不太符合OO的思想(不过,可以适当使用):第三种方式最主要的问题就是性能不太理想,配置比较麻烦. 下面是第四种多表查询的方式,相对第二种多了一点配置,但是其他方面都很好(当然

[傅里叶变换及其应用学习笔记] 六. 热方程讨论

这份是本人的学习笔记,课程为网易公开课上的斯坦福大学公开课:傅里叶变换及其应用. 上节课讲到,在对非周期函数进行傅里叶分析时,有 $C_k = \displaystyle{\frac{1}{T}\int_{-\frac{T}{2}}^{\frac{T}{2}}f(t)e^{-2\pi i\frac{k}{T}t}dt }$ $f(t) = \displaystyle{\sum_{k=-\infty}^{\infty}C_ke^{2\pi i\frac{k}{T}t} }$ 我们希望仅让$T\to