首页 > 代码库 > 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); };
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>
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>
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);};
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>
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>
7,为元素添加样式
<script type="text/javascript"> window.onload = function () { document.getElementById(‘btn‘).onclick = function () { document.getElementById(‘dv‘).className = ‘cls‘; }; }; </script>
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 = ‘‘;//恢复默认颜色 } }; //注册失去焦点事件 }};
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>
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>
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>
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>
13,正则表达式
var msg = ‘中国移动:10086,中国联通:10010,中国电信:10000‘; var reg=/\d+/g;//全局var result;while ((result = reg.exec(msg)) != null) { alert(result);}
14,js匹配邮箱
document.getElementById(‘txt‘).onblur = function () { var email = this.value; //获取邮箱 var regObj = /^\w+@\w+\.+\w+$/; alert( regObj.test(email)?‘是邮箱‘:‘不是邮箱‘); };
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>
16,切除字符串两端空格
<script type="text/javascript"> var msg = ‘ 天气还可以 ‘; function trimString(txt) { //先切左边再切右边-(query中1.8.3文件中是前面的方式)---可以左边右边一起切 return txt.replace(/^\s+/,‘‘).replace(/\s+$/,‘‘); }
dom例子
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。