首页 > 代码库 > dom例子

dom例子

 //凡是html标签中的属性和值是一样的,那么在js中用true或者false

1,阅读协议倒计时

<input type="button" name="name" value="http://www.mamicode.com/请仔细阅读协议(5)" disabled="disabled" id="btn" /><script type="text/javascript">        window.onload = function () {            var btnObj = document.getElementById(‘btn‘);            var sec = 5;            var setId = setInterval(function () {                sec = sec - 1;                if (sec <= 0) {                    btnObj.value = ‘同意‘;                    clearInterval(setId); //清除计时器                    btnObj.disabled = false;                } else {                    btnObj.value = ‘请仔细阅读协议(‘ + sec + ‘)‘;                }            }, 1000);        };
View Code

2,事件冒泡

 window.event.cancelBubble = true; //阻止事件冒泡.

    <script type="text/javascript">        //冒泡排序,--元素中有元素(元素的嵌套如果触发了里面元素的事件,那么外面元素的事件也会被触发)(事件是相同的事件)        //阻止事件冒泡        window.onload = function () {            document.getElementById(‘dv‘).onclick = function () {                alert(this.id);                //alert(window.event.srcElement.id);//事件源的id            };            document.getElementById(‘p1‘).onclick = function () {                alert(this.id);            };            document.getElementById(‘sp‘).onclick = function () {                alert(this.id);                window.event.cancelBubble = true; //阻止事件冒泡.                //return false;//没有阻止事件冒泡            };        };        </script>
View Code

3,dom动态创建元素

 <script type="text/javascript">        window.onload = function () {            //获取按钮添加点击事件            document.getElementById(‘btn‘).onclick = function () {                //创建一个层的对象                var dvObj = document.createElement(‘div‘);                dvObj.style.width = ‘300px‘;                dvObj.style.height = ‘200px‘;                dvObj.style.backgroundColor = ‘yellow‘;                //把层添加到body中                document.body.appendChild(dvObj);            };        };    </script>
View Code

4,将创建的元素添加到现有元素中

var i = 0;document.getElementById(‘btnc‘).onclick = function () {i++;//创建一个input标签var inputObj = document.createElement(‘input‘);inputObj.type = ‘button‘;inputObj.value = ‘我骄傲‘ + i;//document.getElementById(‘dv‘).appendChild(inputObj);document.getElementById(‘dv‘).insertBefore(inputObj, document.getElementById(‘dv‘).firstChild);};
View Code

5,简单无刷新评论

  <table border="1" id="tb">        <tr>            <td>猫猫            </td>            <td>            我好困            </td>        </tr>    </table>   昵称: <input type="text" name="name" value="" id="txt" />   <br />    <textarea rows="10" clos="10" id="txtContent"></textarea>    <br />    <input type="button" name="name" value="提交" id="btn" />
 <script type="text/javascript">        window.onload = function () {            document.getElementById(‘btn‘).onclick = function () {                //获取昵称                var name = document.getElementById(‘txt‘).value;                //获取内容                var txtCt = document.getElementById(‘txtContent‘).value;                //获取页面的表格                var tbObj = document.getElementById(‘tb‘);                //创建行                var trObj = document.createElement(‘tr‘);                //创建单元格                var td1 = document.createElement(‘td‘);                var td2 = document.createElement(‘td‘);                td1.innerText = name;                td2.innerText = txtCt;                //把单元格添加到行中                trObj.appendChild(td1);                trObj.appendChild(td2);                //行添加到表中                tbObj.appendChild(trObj);            };        };        </script>
View Code

6,创建表格方式

   <script type="text/javascript">        window.onload = function () {            document.getElementById(‘btn‘).onclick = function () {                var tb = document.createElement(‘table‘);                var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" };                for (var key in dic) {                    //创建行,根据表创建行                    var trObj = tb.insertRow(-1);                    //创建单元格,根据行创建单元格                    var td1 = trObj.insertCell(-1);                    td1.innerText = key;                    //创建单元格                    var td2 = trObj.insertCell(-1);                    td2.innerHTML = ‘<a href="http://www.mamicode.com/‘ + dic[key] + ‘">‘ + key + ‘</a>‘;                }                //表格添加到body中                document.body.appendChild(tb);            };        };        </script>
View Code

7,为元素添加样式

   <script type="text/javascript">        window.onload = function () {            document.getElementById(‘btn‘).onclick = function () {                document.getElementById(‘dv‘).className = ‘cls‘;            };        };        </script>
View Code

8,文本框焦点事件(onfocus与onblur)

  //创建三个输入文本框,当光标离开文本框的时候如果文本框为空,则将文本框背景色设置为红色,如果不为空则为白色。提示:焦点进入控件的事件是onfocus,焦点离开控件的事件是onblur。window.onload=function(){ //获取所有的文本框            var txts = document.getElementsByTagName(‘input‘);            for (var i = 0; i < txts.length; i++) {                txts[i].onblur = function () {                    if (this.value.length == 0) {                        this.style.backgroundColor = ‘red‘;                    }                    else {                        this.style.backgroundColor = ‘‘;//恢复默认颜色                    }                }; //注册失去焦点事件            }};
View Code

9,★☆评分控件

    <script type="text/javascript">        window.onload = function () {            var tds = document.getElementById(‘tb‘).getElementsByTagName(‘td‘);            for (var i = 0; i < tds.length; i++) {                tds[i].onmouseover = function () {//注册一个鼠标进入的事件                    for (var j = 0; j < tds.length; j++) {                        //this.innerText = ‘★‘;                        tds[j].innerText = ‘★‘;                        if (tds[j] == this) {                            break;                        }                    }                };                tds[i].onmouseout = function () {                    for (var i = 0; i < tds.length; i++) {                        tds[i].innerText = ‘☆‘;                    }                };            }        };        </script>
View Code

10,点击按钮,表格隔行变色

 <script type="text/javascript">        //点击按钮,表格隔行变色:偶数行为黄色背景,奇数行为默认颜色。通过table的getElementsByTagName取得所有的tr,依次遍历,如果是偶数就…………。        window.onload = function () {            document.getElementById(‘btn‘).onclick = function () {                var trs = document.getElementById(‘tb‘).getElementsByTagName(‘tr‘);                for (var i = 0; i < trs.length; i++) {                    if (i % 2 != 0) {                        trs[i].style.backgroundColor = ‘yellow‘;                    } else {                        trs[i].style.backgroundColor = ‘‘;                    }                }            };        };        </script>
View Code

11,鼠标放到超链接上,显示图片(层)

    <script  type="text/javascript">        window.onload = function () {            //获取超链接, //为超链接注册一个事件--鼠标进入事件            document.getElementById(‘ak‘).onmouseover = function () {                if (!document.getElementById(‘imxy‘)) {                    //创建一个图片                    var im = document.createElement(‘img‘);                    im.id = ‘imxy‘;                    im.src = ‘xy.JPG‘;                    //图片要脱离文档流                    im.style.position = ‘absolute‘;                    //超链接距离左边距离                    var x = this.offsetLeft + ‘px‘;                    //超链接距离上面加上超链接高度距离                    var y = this.offsetTop + this.offsetHeight + ‘px‘;                    //图片添加到body中                    document.body.appendChild(im);                }            };            //鼠标离开            document.getElementById(‘ak‘).onmouseout = function () {                if (document.getElementById(‘imxy‘)) {                    document.body.removeChild(document.getElementById(‘imxy‘));                }            };        }    </script>
View Code

12,让图片跟随图片

    <script type="text/javascript">        window.onload = function () {            document.onmousemove = function () {                // alert(‘让你动‘);                var imObj = document.getElementById(‘im‘);                imObj.style.position = ‘absolute‘;                imObj.style.left = window.event.clientX + ‘px‘;                imObj.style.top = window.event.clientY + ‘px‘;                //给鼠标加样式                document.body.style.cursor = ‘url(dinosau2.ani)‘;            };        };        </script>
View Code

13,正则表达式

 var msg = ‘中国移动:10086,中国联通:10010,中国电信:10000‘; var reg=/\d+/g;//全局var result;while ((result = reg.exec(msg)) != null) {     alert(result);}
View Code

14,js匹配邮箱

document.getElementById(‘txt‘).onblur = function () {                var email = this.value; //获取邮箱                var regObj = /^\w+@\w+\.+\w+$/;              alert( regObj.test(email)?‘是邮箱‘:‘不是邮箱‘);            };
View Code

15,电话号码指定位置换星号

<script type="text/javascript">        var msg = ‘杨小舅:13888888888张三:13999999999小李子:13111111111‘;        // /\d{3}\d{4}\d{4}/;    var result= msg.replace(/(\d{3})(\d{4})(\d{4})/g,‘$1****$3‘);    alert(result);    </script>
View Code

16,切除字符串两端空格

<script type="text/javascript">        var msg = ‘    天气还可以    ‘;        function trimString(txt) {        //先切左边再切右边-(query中1.8.3文件中是前面的方式)---可以左边右边一起切           return txt.replace(/^\s+/,‘‘).replace(/\s+$/,‘‘);       }
View Code

 

dom例子