Dom编程(三)
简单菜单制作,参考代码:
var ul = document.getElementById("parent");
var lis = ul.getElementsByTagName("li");
; i < lis.length; i++) {
var uls = lis[i].getElementsByTagName("ul");
) {
uls[].style.display = "none";
}
lis[i].onmouseover = function() {
var uls = this.getElementsByTagName("ul");
) {
uls[].style.display = "";
}
};
lis[i].onmouseout = function() {
var uls = this.getElementsByTagName("ul");
) {
uls[].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='hello'/>")快速创建元素,并且赋值,但是注意设置的inner部分不会被设置var link = document.createElement("<a href='http://www.baidu.com'>百度</a>")
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编程(三)的更多相关文章
- JavaScript(DOM编程三)
节点的移动,insertBefore <body> <p>你喜欢哪个城市?</p> <ul id="city"><li id= ...
- JavaScript(三)-- DOM编程
JavaScript编程中最基本的就是DOM编程,DOM是 Document Object Model文本对象模型,就是对DOM对象进行编程的过程. Java语言和Js都有针对于DOM的编程,两者类似 ...
- javascript dom编程艺术笔记第三章:DOM操作的5个基本方法
JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
- JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
- 160826、浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘
一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DO ...
- JS之DOM编程
为什么学dom编程? 通过dom编程,我们可以写出各种网页游戏 dom编程也是我们学习ajax技术的基础,所以我们必需掌握好dom编程. dom编程简介 DOM=Document Object Mo ...
- JavaScript DOM编程艺术第一章:JavaScript简史
本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...
- Bom和Dom编程以及js中prototype的详解
一.Bom编程: 1.事件练习: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
随机推荐
- Java学习笔记之I/O流(读取压缩文件以及压缩文件)
1.读取压缩文件:ZipInputStream 借助ZipFile类的getInputStream方法得到压缩文件的指定项的内容,然后传递给InputStreamReader类的构造方法,返回给Buf ...
- 大学二三事——那些人(1)
校歌墙的对面是一座历史比较悠久的建筑,以前叫做12号楼,后来改成了"诚"字楼. 在诚字楼一楼昏暗的走廊上,你总是能看见一位大概四五十岁的大叔,有时他会指着挂在墙上的学校简介,一个人 ...
- SELinux(Security-Enhanced Linux)
http://blog.csdn.net/myarrow/article/details/9839377 Security-Enhanced Linux(SELinux)的历史 一个小历史将有助于帮助 ...
- UIGestureRecognizer 手势浅析
目录[-] iOS开发中的手势体系——UIGestureRecognizer分析及其子类的使用 一.引言 二.手势的抽象类——UIGestureRecognizer 1.统一的初始化方法 2.手势状态 ...
- Android实现GIF图片解码与播放
Android实现GIF图片解码与播放 如何在Android中播放GIF图片呢?如果直接按以前的方法,分解图片,可能相对比较麻烦. 今天给大伙介绍一种新的方式,构造自己的Android图片解码帮助类, ...
- ARC属性中还能使用assign,copy,retain这些关键字吗
http://blog.sina.com.cn/s/blog_6531b9b80101c6cr.html 很早以前比较弱,网上不知道哪里看了篇博文,留下了ARC属性中不能使用retain关键 ...
- java 面向抽象编程的思想
SIM.java public abstract class SIM { public abstract void setNumber(String n); public abstract Strin ...
- Linux学习 -- 系统管理
1 进程管理 判断服务器健康状态 top [选项] 查看系统中所有进程 ps aux BSD格式 ps -le Linux格式 pstree [选项] -p 显示PID - ...
- ActiveMQ的配置与使用
1.什么是ActiveMQ MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过写和检索出入列队的针对应用程序的数据(消息)来通信,而无需专用连接来 ...
- J2SE基本数据结构
1.J2SE中的常用数据结构对象的继承关系如下图 Collection ........|--------List ........|..........|----------ArrayList .. ...