• DOM2


    样式

    通过修改元素的style属性来操作样式
    js中的style对象提供了很多属性,对应着css的相关样式
    这里的写法与css中基本相同
    如果在css中有“-”的样式,把“-”去掉将单词首字母变成大写
    对于某些元素拥有的属性,可能在提示中不存在,直接写就可以了
    设置样式类:dvObj.className='类名称';

     1  onload = function () {
     2             //获取容器
     3             var div1 = document.getElementById('div1');
     4             
     5             //循环创建5个超链接
     6             for (var i = 0; i < 5; i++) {
     7                 //创建a对象
     8                 var a1 = document.createElement('a');
     9                 //为属性赋值
    10                 a1.href = 'http://www.itcast.cn';
    11                 a1.innerHTML = '链接' + i;
    12                 a1.onclick = function() {
    13                     //设置背景色为红色
    14                     this.style.backgroundColor = 'red';
    15                     return false;
    16                 };
    17                 //追加到容器中
    18                 div1.appendChild(a1);
    19             }
    20         };

    练习  透视图

     <script>
            onload = function () {
                //根据标签获取body元素
                var body = document.getElementsByTagName('body')[0];
                //规定初始值
                var width = 500, height = 500, left = 10, top = 10;
                //循环创建div
                while (true) {
                    //创建div加入body中
                    var div1 = document.createElement('div');
                    div1.style.position = 'absolute';
                    div1.style.left = left + 'px';
                    div1.style.top = top + 'px';
                    div1.style.border = '1px solid blue';
                    div1.style.width = width + 'px';
                    div1.style.height = height + 'px';
                    body.appendChild(div1);
                    
                    //改写数值
                    left += 5;
                    top += 5;
                    width -= 10;
                    height -= 10;
                    
                    //当div的宽度<=0时,在页面上不会显示,所以退出循环
                    if (width <= 0) {
                        break;
                    }
                }
            };
        </script>

    表单

     <script>
            var bgColor;
            var list = [
                { id: '1', country: '中国', capital: '北京' },
                { id: '2', country: '美国', capital: '华盛顿' },
                { id: '3', country: '日本', capital: '东京' },
                { id: '4', country: '韩国', capital: '首尔' }
            ];
            onload = function() {
                var body = document.getElementsByTagName('body')[0];
                
                //创建表格
                var table = document.createElement('table');
                table.border = 1;
                body.appendChild(table);
                
                //创建标题行
                var thead = document.createElement('thead');
                var item0 = list[0];
                for (var key0 in item0) {
                    //创建标题单元格
                    var th = document.createElement('th');
                    th.innerText = key0;
                    thead.appendChild(th);
                }
                table.appendChild(thead);
    
                for (var i = 0; i < list.length; i++) {
                    //遍历对象
                    var item = list[i];
                    //创建行
                    var tr = document.createElement('tr');
                    table.appendChild(tr);
                    //注册事件
                    tr.onmouseover = function () {//指向行时高亮
                        //改变颜色前,先获取值,用于恢复
                        bgColor = this.style.backgroundColor;
                        this.style.backgroundColor = 'green';
                    };
                    tr.onmouseout = function() {//移开行时恢复原来颜色
                        this.style.backgroundColor = bgColor;
                    };
                    //设置行的背景色
                    if (i % 2 == 0) {
                        tr.style.backgroundColor = 'red';
                    } else {
                        tr.style.backgroundColor = 'blue';
                    }
                    
                    //遍历对象
                    for (var key in item) {
                        //创建单元格
                        var td = document.createElement('td');
                        td.innerText = item[key];
                        tr.appendChild(td);
                    }
                }
            };
        </script>

    隐藏和显示

      <script>
            onload = function() {
                document.getElementById('btnShow').onclick = function () {
                    var divShow = document.getElementById('divShow');
                    if (this.value == '隐藏') {
                        this.value = '显示';
                        divShow.style.display = 'none';//控制层隐藏
                    } else {
                        this.value = '隐藏';
                        divShow.style.display = 'block';//控制层显示
                    }
                };
            };
        </script>

    显示

    控制层的隐藏和显示
    通过设置样式display控制显示与隐藏
    值为''表示显示,block
    值为'none'表示隐藏

    示例:点击按钮,控制div的显示与隐藏,并同时更新按钮提示文本

     1  <script>
     2         onload = function () {
     3             //获取所有按钮
     4             var btns = document.getElementsByTagName('input');
     5             //遍历按钮,绑定事件
     6             for (var i = 0; i < btns.length; i++) {
     7                 btns[i].onmouseover = function(e) {
     8                     //显示div,内容是id
     9                     //获取div
    10                     var divShowId = document.getElementById('divShowId');
    11                     divShowId.textContent = this.id;
    12                     //显示
    13                     divShowId.style.display = 'block';
    14                     //定义位置
    15                     divShowId.style.left = e.clientX + 'px';
    16                     divShowId.style.top = e.clientY + 'px';
    17                 };
    18                 btns[i].onmouseout = function() {
    19                     //隐藏div
    20                     //获取div
    21                     var divShowId = document.getElementById('divShowId');
    22                     //隐藏
    23                     divShowId.style.display = 'none';
    24                 };
    25             }
    26         };
    27     </script>

    表单的提交

    表格对象
    使用传统方式进行表单提交:点击submit按钮
    事件onsubmit:表示在提交前触发,一般用于进行控件内容的有效性验证
    如果返回false则会停止提交
    如果返回true或者不返回则完成提交

    问:如果在不点击提交按钮时进行提交呢?
    方式一:调用按钮的click()方法,模拟点击
    方式二:调用表单的submit()方法,这种提交不会触发onsubmit事件

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script>
            // 1、表单提交会触发onsubmit事件,不想提交使用return false;
            //2、模拟事件:onclick->click()
            //3、form.submit直接提交,不会触发onsubmit事件
            
            onload = function() {
                var form1 = document.getElementById('form1');
                form1.onsubmit = function() {
                    alert(1);
                    //return false;//停止转向
                };
    
                var submit1 = document.getElementById('submit1');
                submit1.onclick = function () {
                    //模拟表单提交方式一:
                    //form1.submit();//这种方式不会触发 onsubmit事件
                    
                    //模拟表单提交方式二:
                    //将事件当作一个方法用,会模拟用户对这个控件的事件操作
                    //去掉on
                    //form1.onsubmit();
                    document.getElementById('submit2').click();
                };
            };
        </script>
    </head>
        <body>
            submit按钮可以让form完成提交,提交时会触发onsubmit事件
            <br/>
            onsubmit事件的作用:可以在转向页面前,进行数据的有效性验证
            <br/>
            取消提交的方式:return false;
            <br/>
            <form id="form1" action="hello.html">
                <input type="button" id="submit1" value="模拟提交"/>
                <input type="text"/>
                <input type="submit" id="submit2"/>
            </form>
        </body>
    </html>

     显示密码强度

     1  <script>
     2         onload = function () {
     3             //为文本框注册失去焦点事件,失去焦点时,进行密码验证
     4             document.getElementById('txtPwd').onblur = function () {
     5                 var msg = this.value;
     6 
     7                 //获取提示框
     8                 var msgPwd = document.getElementById('msgPwd');
     9 
    10                 if (msg.length < 6) {
    11                     msgPwd.innerText = '弱爆了';
    12                 } else {
    13                     //纯字符:弱,两种混合:中,三种混合:强
    14                     var pwd = 0;
    15                     if (/[a-zA-Z]/.test(msg)) {
    16                         pwd++;//有一个字母
    17                     }
    18                     if (/[0-9]/.test(msg)) {
    19                         pwd++;//有一个数字
    20                     }
    21                     if (/[!@#$%^&*()]/.test(msg)) {
    22                         pwd++;//有一个特殊字符
    23                     }
    24                     //提示结果
    25                     switch (pwd) {
    26                         case 1:
    27                             msgPwd.innerText = '弱';
    28                             break;
    29                         case 2:
    30                             msgPwd.innerText = '中';
    31                             break;
    32                         case 3:
    33                             msgPwd.innerText = '强';
    34                             break;
    35                     }
    36                 }
    37             };
    38         };
    39     </script>

    正则在dom里面的使用

  • 相关阅读:
    mac crontab
    mac 修改MAC代码
    python 二叉树计算器
    python 验证码识别
    scp 上传和下载文件
    centos 开机执行的命令
    centos aws 修改使用密码ssh登录
    python nose测试
    C# linq to xml
    Visual Studio 2015+InstallShield 2015
  • 原文地址:https://www.cnblogs.com/liuweiqiang11188/p/6683378.html
Copyright © 2020-2023  润新知