首页 > 代码库 > Dom编程(三)
Dom编程(三)
简单菜单制作,参考代码:
var ul = document.getElementById("parent"); var lis = ul.getElementsByTagName("li"); for (var i = 0; i < lis.length; i++) { var uls = lis[i].getElementsByTagName("ul"); if (uls.length > 0) { uls[0].style.display = "none"; } lis[i].onmouseover = function() { var uls = this.getElementsByTagName("ul"); if (uls.length > 0) { uls[0].style.display = ""; } }; lis[i].onmouseout = function() { var uls = this.getElementsByTagName("ul"); if (uls.length > 0) { uls[0].style.display = "none"; } }; }
IE中如果在body上添加onclick、onmousemove等事件响应,那么如果页面没有满,则 “body 中最后一个元素以下(横向不限制)” 的部分是无法响应事件的,必须使用代码在document上监听那些事件
通过dom读取元素的top、left、width、height等取到的值不是数字,而是“10px”这样的字符串;为这些属性设值的时候IE可以是80、90这样的数字,FF必须是“80px”、“90%”等这样的字符串形式,为了兼容统一用字符串形式。易错:不要写成div1.style.width=80px,而是div1.style.width=‘80px‘。如果要修改元素的大小(宽度加10),则首先要取出元素的宽度,然后用parseInt将宽度转换为数字(parseInt可以将"20px"这样数字开头的包含其他内容的字符串解析为20,);然后加上一个值,再加上px赋值回去。
元素的position 样式值:static(无定位,显示在默认位置)、absolute(绝对定位)、fixed(相对于窗口的固定定位,位置不会随着浏览器的滚动而变化,IE6不支持)、relative(相对元素默认位置的定位)。如果要通过代码修改元素的坐标则一般使用absolute,然后修改元素的top(上边缘距离)、left(左边缘距离)两个样式值。left、top都是指的层的左上角的坐标。word-break:break-all; overflow:scroll
img.style.top = event.clientY+"px";
img.style.left = event.clientX+"px";
createElement的两种用法,注意innerText的问题
var input = document.createElement("<input type=‘button‘ value=http://www.mamicode.com/‘hello‘/>")快速创建元素,并且赋值,但是注意设置的inner部分不会被设置var link = document.createElement("<a href=http://www.mamicode.com/‘http://www.baidu.com‘>百度")
label.setAttribute("for", "username"); //设定一些Dom元素属性名特殊的属性,label.for = "username"会有问题。 label.setAttribute("xuehao","33333")
document.getElementById(‘btn1‘).click()
form对象是表单的Dom对象。方法:submit()提交表单,但是不会触发onsubmit事件。实现autopost,也就是焦点离开控件以后页面立即提交,而不是只有提交submit按钮以后才提交,当光标离开的时候触发onblur事件,在onblur中调用form的submit方法。在点击submit后form的onsubmit事件被触发,在onsubmit中可以进行数据校验,数据数据有问题,返回false即可取消提交
<form name="form1" action="a.aspx" method="get" onsubmit="if(document.getElementById(‘txtname‘).value.length<=0){alert(‘姓名必填‘);return false;}">
给对话框传递参数,使用showModalDialog的第二个参数传递参数,在对话框中用window.dialogArguments获得传递的参数值;对话框中给window.parent.returnValue设定返回值,这样在父窗口中就可以通过showModalDialog返回值读取设置的返回值了。传递多个参数,将参数包装到数组中,然后仍然是通过第二个参数传递,返回多个返回值也可以返回数组
JavaScript中创建正则表达式类的方法:var regex = new RegExp("\\d{5}") 或者 var regex = /\d{5}/
/表达式/是JavaScript中专门为简化正则表达式编写而提供的语法,写在//中的正则表达式就不用管转义符了。
RegExp对象的方法:
(1)test(str)判断字符串str是否匹配正则表达式,相当于IsMatch
var regex = /.+@.+/;
alert(regex.test("a@b.com"));
alert(regex.test("ab.com"));
(2)exec(str)进行搜索匹配,返回值为匹配结果,没找到返回null(*)
String对象中提供了一些与正则表达式相关的方法,相当于对于RegExp类的包装,简化调用:match(regexp),相当于调用exec
keyCode: ascii码说明:8:退格键。46:delete。37-40: 方向键。96-105:小键盘区的数字。48-57:主键盘区的数字。110、190:小键盘区和主键盘区的小数点。189、109:小键盘区和主键盘区的负号。13:回车。9: Tab
Dom编程(三)