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 ...
随机推荐
- 关于在MyEclipse中页面中文乱码的问题
1.首先在Window>preferences>General>Workspace中改为UTF-8. 2.将项目的Properties>Resource改为UTF-8. 3.将 ...
- Htttp协议
我 们在浏览器的地址栏里输入的网站地址叫做URL(UniformResourceLocator,统一资源定位符).就像每家每户都有一个门牌地址一样, 每个网页也都有一个Internet地址.当你在浏览 ...
- 最简单易懂的webService客户端之soap+xml请求
代码准备: 1.网络上有提供一些免费的服务器测试地址,可以上这里找一找:https://my.oschina.net/CraneHe/blog/183471 2.我选择了一个翻译地址:http://w ...
- IDL和生成代码分析
IDL:接口描述语言 这里使用thrift-0.8.0-xsb这个版本来介绍IDL的定义以及简单实例分析. 1. namespace 定义包名 2.struct 结构体,定义服务接口的参数和返回值用到 ...
- tomcat内存优化问题
Java内存组成 1) 堆 运行时数据区域,所有类实例和数组的内存均从此处分配.Java 虚拟机启动时创建.对象的堆内存由称为垃圾回收器 的自动内存管理系统回收. 堆由两部分组成: 其中eden+fr ...
- HDU4325--Flowers--树状数组,离散化
Description As is known to all, the blooming time and duration varies between different kinds of flo ...
- lucene特殊字符处理
这是个郁闷的问题,今天遇到了,但在lucene中查询的关键字保护有特殊字符,譬如--,会出现如下异常: org.apache.lucene.queryParser.ParseException: Ca ...
- IDL 建立影像金字塔
形成按目录放好的,类似于Google Map Tile的金字塔瓦片Jpg. 1: ; 2: pro tsplit 3: ; 读入Jpeg格式文件 4: szFile = 'e:\test.jpg'; ...
- 利用未文档化API:RtlGetNtVersionNumbers 获取系统版本号
问题一:Windows SDK 8.1版本中的VersionHelper.h文件当中没有IsWindows10ORGreater,所以当你用IsWindows8Point1ORGreater判断出版本 ...
- Android Studio 提示Error running app: No Android facet found for app
错误解决办法如下: 可以通过以下几个步骤解决该问题: 1) 点击菜单File -> 选择Project Structure, 或使用快捷键 (Ctrl+Alt+Shift+S) 打开”Proje ...