06 2014 档案
摘要:第七章 基本视觉格式化正常流(没有浮动和定位元素)、非替换元素(包含在文档中)、替换元素(用作其它内容的占位符,如img)、块级元素(会和其它元素形成换行,如div)、行内元素(span之类的元素)和根元素(位于文档树顶端的元素,在HTML文档中就是元素html)水平格式化wideness? /...
阅读全文
摘要:替换元素指用来替换内容的部分并非由文档内容直接表示,最常见的是图片,与之对应的就是非替换内容display展示的形式,常见的值none、inline(行内)、block(块)向后兼容,对于不支持的浏览器,将会以文本的形式显示css中的内容,解决方法:123456第二章 选择器h1,h2,h3{co...
阅读全文
摘要:JSON对象早期的JSON解析器就是使用JavaScript的eval()函数,ECMAScript5对解析JSON的行为做出了规定,定义了全局对象JSON。JSON对象有2个方法:stringify()和parse(),分别用于把JavaScript对象序列化为JSON字符串(值为undefine...
阅读全文
摘要:新建一个博客文件在搭建博客的过程中,我们需要创建一个文件,用来存储博客的相关信息。这些信息包括域名的信息,主机空间服务器ip,FTP登录名和密码,空间面板登录信息等等,只要是与该博客有关的信息,全部存在这个文件内,方便以后查看。购买域名域名当然要去最有名的去他爹网站(goDaddy)购买了,作为全球...
阅读全文
摘要:错误处理try-catch语句try{ //可能会导致错误的代码}catch(error){ //在错误发生时如何处理}error是一个包含着错误信息的对象,它有一个message属性,保存着错误消息;还有一个保存着错误类型的name属性(Opera9之前不支持这个属性)try{ //可能会导...
阅读全文
摘要:dropEffect和effectAllowed利用dataTransfer对象,传输数据、确定被拖动元素以及作为放置目标的元素能够接受什么操作,为此需要访问对象的两个属性dropEffect和effectAllowed其中通过dropEffect属性可以知道被拖动元素能够执行哪种放置行为,有4个可...
阅读全文
摘要:15章 使用Canvas绘图略16章 HTML5脚本编程HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作跨文档消息传递简称XDM,指来自不同域的页面间传递消息(比如www.wrox.com域中页面与p2p.wrox.com)XDM的核心是postM...
阅读全文
摘要:表单序列化首先了解一下浏览器如何将数据发送给服务器对表单字段的名称和值进行URL编码,使用和号(&)分隔不发送禁用的表单字段只发送勾选的复选框和单选按钮不发送type为“reset”和“button”的按钮多选选择框中的每个选中的值单独一个条目在单击提交按钮提交表单的情况下,也会发送提交按钮;否则,...
阅读全文
摘要:选择选项对于只允许选择一项的选择框,访问选中项最简单的方式是selectedIndex属性var selectedOption=selectbox.options["selectbox.selectedIndex"];对于可以多选的选择框selectedIndex属性会导致取消之前的所有选项,并选择...
阅读全文
摘要:输入模式HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值例如,只想在允许在文本字段中输入数值注意,模式的开头和结尾不用加^和$符号(假定已经有了),这两个符号表示输入的值必须从头到尾与模式匹配与其他输入类型相似,指定的pattern也不能阻止用户输入无...
阅读全文
摘要:过滤输入对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下、退格键和删除键触发keypress事件,在Firefox中,所有非字符键触发的keypress事件对应的字符编码为0,而在Safari3之前的版本,对应的字符编码...
阅读全文
摘要:共有的表单字段方法每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段。可以侦听页面的load事件EventUtil.addHandler(window,"load",function(event){ document.fo...
阅读全文
摘要:表单脚本表单的基础知识在HTML中,表单是由元素表示的,在Javascript对应的是HTMLFormElement类型,它继承自HTMLElement,因此具有与其他HTML元素相同的默认属性,HTMLFormElement也有它自己独有的属性和方法acceptCharset:服务器能够处理的字符...
阅读全文
摘要:(续上篇)模拟鼠标事件var btn=document.getElementById("myBtn");//创建事件对象var event=document.createEvent("MouseEvents");//初始化事件对象event.initMouseEvent("click",true,t...
阅读全文
摘要:hashchange事件HTML5新增了hashchange事件,以便在URL的参数列表(及URL中“#”号后面的所有字符串)发生变化时通知开发人员,之所以新增这个事件,是因为在Ajax应用中,开发人员经常要利用URL参数列来保存状态或导航信息将hashchange事件处理程序添加给window对象...
阅读全文
摘要:HTML5事件contextmenu事件contextmenu事件是冒泡的,可以将事件处理程序指定到document,这个事件的目标是用户操作的元素,在兼容DOM的浏览器中使用event.preventDefalut()取消默认行为,在IE中将event.returnValue的值设置为false取...
阅读全文
摘要:设备中的键盘事件任天堂Wii等设备可以通过键码知道用户按下了哪个键复合事件复合事件是DOM3级事件新添加的一类事件,用于处理IME的输入序列。IME(Input Method Editor,输入法编辑器)可以让用户输入在物理键盘上找不到的字符,IME通常需要同时按住多个键,但最终只输入一个字符,有3...
阅读全文
摘要:触摸设备iOS和Android设备的实现非常特别,因为这些设备没有鼠标,在面向iPhone和iPod中的Safari开发时,要记住以下几点不支持dblclick事件,双击浏览器窗口会放大画面,没有办法改变该行为轻击可单击元素会触发mousemove事件,如果此操作导致内容的变化,将不再有其他事件发生...
阅读全文
摘要:鼠标按钮只有在主鼠标按钮被单击(或键盘回车键被按下)是才会触发click事件,对于mousedown和mouseup事件,其event对象存在一个button属性,表示按下或者释放按钮。DOM的button属性可能有3个值:0表示主鼠标按钮、1表示中间鼠标按钮、2表示次鼠标按钮IE8及之前版本也提供...
阅读全文
摘要:客户区坐标位置clientX和clientY保存着鼠标指针在视口中的水平位置坐标和垂直位置坐标(显示出页面的部分叫做客户区,坐标信息不包括页面的滚动距离)var div=document.getElementById("myDiv");EventUtil.addHandler(div,"click"...
阅读全文
摘要:unload事件与load事件对应的是unload事件,这个事件在文档被完全卸载后触发,只要用户从一个页面切换到另一个页面,就会发生unload事件,最多的情况是清除引用,避免内存泄漏与load事件类似,也有两种指定onunload事件的处理程序方式EventUtil.addHandler(wind...
阅读全文
摘要:事件类型Web浏览器中有很多事件类型,“DOM3级事件”规定了以下几类事件UI事件(用户界面),当用户与页面上的元素交互时触发;焦点事件,当元素获得或失去焦点时触发鼠标事件,当用户通过鼠标在页面上执行操作时触发滚轮事件,当用户使用鼠标滚轮(或类似设备)时触发文本事件,当在文档中输入文本时触发键盘事件...
阅读全文
摘要:IE中的事件对象要访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法。在使用DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在wondow.event.type //IE中的type属性与DOM的type属性相同在使用attachEvent()...
阅读全文
摘要:事件对象在触发DOM上某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。DOM中的事件对象兼容DOM的浏览器会将event对象传入到事件处理程序中,无论指定事件处理程序时使用什么方法(DOM0级或DOM2级)btn.addEventListener("click",fu...
阅读全文
摘要:DOM0级事件处理程序就是将一个函数赋值给一个事件处理程序属性,具有简单、跨浏览器优势,首先必须取得一个操作对象的引用,每个元素(包括window和document)都有自己的事件处理程序属性,这些属性通常全部小写var btn=document.getElementById("myBtn");bt...
阅读全文
摘要:第13章 事件JavaScript与HTML之间的交互式通过事件来实现的。事件流事件流描述的是从页面中接收事件的顺序,IE和Netscape提出了完全相反的事件流概念,IE是事件冒泡流,Netscape是事件捕获流事件冒泡click一个元素,click事件沿DOM树向上传播,在每一级节点都会发生,直...
阅读全文
摘要:比较DOM范围在有多个范围的情况下,可以使用compareBoundaryPoints()方法来确认这些范围是否有公共的边界,接收两个参数:表示比较方式的常量值和要比较的范围常量如下Range.START_TO_START(0):比较第一个范围和第二个范围的起点;Range.START_TO_END...
阅读全文
摘要:用DOM范围实现简单选择selectNode()和selectNodeContents()它们都接收一个DOM节点参数,然后使用该节点中的信息来填充范围,其中selectNode()方法选择整个节点,包括其子节点;而selectNodeContents()方法只选择节点的子节点var range1=...
阅读全文
摘要:TreeWalkerTreeWalker是NodeIterator的更高级的版本,除了包括nextNode()和previousNode()在内的相同功能外,这个类型还提供了用于不同方向上遍历DOM结构的方法parentNode():遍历到当前节点的父节点firstChild():遍历到当前节点的第...
阅读全文
摘要:遍历“DOM2级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM结构的类型:NodeIterator和TreeWalker,两个类型能够基于给定的起点对DOM结构执行深度优先(depth-first)的遍历操作,与DOM兼容的浏览器都可以访问到这些类型的对象,IE不支持DOM遍历使用以下代码检测...
阅读全文
摘要:元素大小偏移量offsetHeight:元素在垂直空间上占用的大小,以像素计。包括元素的高度、(可见的)水平滚动条的高度、上边框高度和下边框高度。offsetWidth:元素在水平空间上占用的大小,以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽度和右边框宽度。offsetLeft:元...
阅读全文
摘要:操作样式表CSSStyleSheet类型表示的是样式表包括通过元素包含的样式表和在元素中定义的样式表,前面提到过这两个元素本身分别是由HTMLLinkElement和HTMLStyleElement类型表示的,但CSSStyleSheet类型相对来说更加通用一些,而不管这些样式表在HTML中如何定义...
阅读全文
摘要:样式在HTML中定义样式的方式有3种:通过元素包含外部样式表文件、使用元素定义嵌入式样式,以及使用style特性定义针对特定元素的样式,“DOM2级样式”模块围绕这3种应用样式的机制提供了一套API,要确定浏览器是否支持DOM2级定义的css能力var supportsDOM2CSS=documen...
阅读全文
摘要:其它方面的变化DOM的其他部分在“DOM2级核心”中也发生了一些变化,这些变化与XML命名空间无关,而是确保API的可靠性及完整性DocumentType类型的变化DocumentType类型新增了3个属性:publicId、systemId和internalSubset其中前两个属性表示的是文档类...
阅读全文