No.7-JavaWeb自学笔记(五)——DOM
wy_0928
这个作者很懒,什么都没留下…
展开
-
DOM(二)-13-(示例-全选商品列表)
<!--全选商品列表;希望一单击button,右边就显示总金额--> function getSum(){ /* *想要计算总金额,那么必须知道哪些商品被选中,怎么知道? *打开DHTML API文档,找到INPUT type=checkbox 元素 | input type=checkbox 对象,其内有如下原创 2015-08-20 17:17:05 · 392 阅读 · 0 评论 -
DOM(三)-08-(示例-表单校验-涉及的正则校验)
<!--表单校验,用户名必须是4位字母组成,那么就要用到正则校验打开JScript API文档,找到正则表达式对象,其内描述如下:1.语法 1var regularexpression = /pattern/[switch]2.语法 2var regularexpression = new RegExp("pattern",["switch"]) 3.正则表达式对象语法有以原创 2015-08-20 17:25:18 · 447 阅读 · 0 评论 -
DOM(一)-15-(通过节点层次关系获取节点)
【通过节点层次关系获取节点】、、三者关系中,称为和公共的父节点,而和都称为的子节点,和称为兄弟节点,其中前者是后者的上一个兄弟节点,后者是前者的后一个兄弟节点【注意】一个节点的父节点只有一个,一个节点的子节点可以有多个所以只要拿到任一个节点,都可以通过其层次关系获取到任意节点对象。【总结】节点间关系:以下标记的属性都以div节点对象中的属性为原创 2015-08-20 16:29:02 · 742 阅读 · 0 评论 -
DOM(一)-03-(DOM三级模型)
DOM模型有三种:1.DOM level 1:将html文档封装成对象2.DOM level 2:在level 1基础上加入了新功能,比如解析名称空间名称空间解释如下:同样一个标签,我的意思是表格,你的意思是桌子,那么怎么区分?用如下代码:其中xmlns中的ns是name space的简写,这样就成功区分了同一原创 2015-08-20 16:14:29 · 495 阅读 · 0 评论 -
DOM(一)-02-(DOM解析的特点)
1.DOM技术的解析方式:将标记型文档解析成一颗DOM树,并将树中的内容都封装成节点对象。2.DOM解析的好处:可以对树中的节点进行任意操作,比如增删改查3.DOM解析的弊端:需要将整个标记型文档加载进内存,意味着如果标记型文档的体积很大,较为浪费内存空间4.简介另一种解析方式:SAX,是由一些组织定义的一种民间常用的解析方式,并不是w3c的标准,而DOM是w3c的标准原创 2015-08-20 16:13:46 · 1014 阅读 · 0 评论 -
DOM(三)-07-(示例-表单校验-涉及的事件和信息提示方式)
<!--表单校验-涉及的事件和信息提示方式用户注册信息,提交到服务端之前需要对用户填写的信息进行校验,如果用户写的对,就提交给服务端,否则不提交并出现提示信息。在客户端进行校验。--> //校验用户名 function checkUser(){ //alert("haha"); var oUserNode = docu原创 2015-08-20 17:24:38 · 441 阅读 · 0 评论 -
DOM(三)-06-(示例-添加删除附件)
<!--添加删除附件--> table a:link,table a:visited{ color:#179ed9; text-decoration:none; } table a:hover{ color:#f36021; } function addFile(){ /*原创 2015-08-20 17:23:33 · 500 阅读 · 0 评论 -
DOM(三)-05-(示例-下拉菜单-选择城市)
<!--下拉菜单:选择城市二级联动菜单,即在第一级下拉菜单先选择xx省,然后第二级下拉菜单自动跳转当前所选省的所有城市,再选择xx市--> select{/*标签选择器*/ width:100px; } function selectCity(){ /* *由于第一级菜单的一个option对应第二级原创 2015-08-20 17:22:45 · 791 阅读 · 0 评论 -
DOM(二)-10-(示例-删除表格的行和列)
表格样式table.css代码@CHARSET "UTF-8";table{ border:##249bdb 1px solid; width:500px; border-collapse:collapse; }table td{ border:#249bdb 1px solid; padding:5px;/*td左边顶格*/}主程序代码<!--添加新功原创 2015-08-20 17:07:48 · 616 阅读 · 0 评论 -
DOM(一)-13-(document获取节点byTagName)
【document对象获取节点byTagName】(1)当节点有id时,可以通过docuemnt对象中的getElementById方法获取节点对象;(2)当节点有name时,可以通过document对象中的getElementsByName方法获取节点数组;(3)如果节点既没有id也没有name,该如何获取呢?那么这种情况的标签,至少有标签名称,所以可以通原创 2015-08-20 16:27:11 · 382 阅读 · 0 评论 -
DOM(一)-16-(节点操作-创建并添加_1)
【示例】演示创建并添加文本节点 div{ border:#0CF 1px solid; width:200px; padding:30px; margin:10px;//外边距 } #div_1{ background-color:#0CF; } #div_2{ background原创 2015-08-20 16:30:05 · 366 阅读 · 0 评论 -
DOM(一)-18-(节点操作-删除节点)
演示DOM删除节点操作,记住,凡是删除或移除操作,就去API找包含delete或remove的方法,在DHTML API中的div对象中,有如下方法:(1)removeAttribute:删除对象的给定标签属性。 (2)removeAttributeNode:从对象中删除删除 attribute 对象。 (3)removeBehavior:分离元素的行为。 (4)remov原创 2015-08-20 16:31:50 · 748 阅读 · 0 评论 -
DOM(二)-05-(示例-展开闭合列表3)
<!--新需求:在多个列表下,一次只能展开一个,当展开另一个时候,前一个被自动关闭(如先展开列表一,立马点开列表二,此时列表一被自动关闭)--><!--思路:1.获取所有dl节点2.遍历这些节点,只对当前的dl进行展开或闭合操作,其他节点都进行闭合操作。--> dl dd{ margin:0px; } dl{ height:16px;原创 2015-08-20 16:57:35 · 394 阅读 · 0 评论 -
DOM(二)-03-DOM(示例-展开闭合列表)
<!--DOM示例-展开闭合列表这个也是网页中常用的功能演示,其中需要用到CSS技术、DOM技术等希望实际效果是,单击“显示条目一”就能出现下拉菜单--><!--思路:1.标签封装数据,用html2.定义样式,用css3.明确事件源,事件,以及要处理的节点,用dom4.明确具体操作方式,其实就是事件的处理内容 --> dl dd{/*关联选原创 2015-08-20 16:55:29 · 397 阅读 · 0 评论 -
DOM(二)-02-(示例-新闻字体2)
在前一视频基础上,希望单击超链接后不光改变字号,还可以改变字体颜色,甚至改变背景=============================================================================================================【示例】 a:link,a:visi原创 2015-08-20 16:53:24 · 287 阅读 · 0 评论 -
DOM(一)-06-(Location对象)
【window对象中的location对象】专门用于操作浏览器地址栏的对象(这里只举例说明部分location对象中的内容,更详细的请查阅DHTML API文档)=============================================================================【示例】 /原创 2015-08-20 16:17:20 · 282 阅读 · 0 评论 -
DOM(三)-10-(示例-表单校验-涉及的正则校验)
<!--表单校验:涉及的正则校验--> //发现很多框的校验出了几个内容不同外,校验过程是一样的 /* *所以进行了代码的提取,其中name代表“用户名称”一栏的name="user"属性; *reg代表正则表达式,即用于校验的标准;spanId是span区域的id号; *okinfo是校验正确的提示信息;errinf原创 2015-08-20 17:28:25 · 516 阅读 · 0 评论 -
DOM(三)-03-(示例-性格测试)
<!--单选按钮演示:2.性格测试--> #no1ul{ list-style:none;/*将单选前面的黑点去除*/ margin:0px;/*使选项距离页面左边0,即顶格写*/ } .close{/*类选择器,在没单击“查看测试结果”时,默认将测试结果隐藏*/ display:none; } .open{/*类选择器,在单击“查看测试结原创 2015-08-20 17:20:26 · 5995 阅读 · 0 评论 -
DOM(一)-19-(节点操作-替换&克隆节点)
【修改节点】在div对象中有如下两方法:(1)replaceChild 用新的子元素替换已有的子元素。 语法:oReplace = object.replaceChild(oNewNode, oChildNode)第一个参数是新节点,第二个参数是旧节点,即用第一个参数替换掉第二个参数(2)replaceNode 用其它元素替换对象。 语法:oReplace =原创 2015-08-20 16:32:39 · 542 阅读 · 0 评论 -
DOM(一)-09-(window常见事件)
【window常见事件】(详情请查阅DHTML API文档)见示例11.onunload:在对象卸载前立即触发。2.onload:在浏览器完成对象的装载后立即触发。3.onbeforeunload:在页面将要被卸载前触发。 【window常见属性】(详情请查阅DHTML API文档)见示例21.status 设置或获取位于窗口底部状态栏原创 2015-08-20 16:23:19 · 305 阅读 · 0 评论 -
DOM(一)-10-(练习-广告弹窗)
【DOM练习】模拟一个广告弹窗【思路】页面一加载完就执行,在当前页面定义脚本,有两种方式:(1)将广告弹窗定义在onload事件中,即页面一加载完成就启动onload事件;(2)将广告弹窗定义在open方法中,即页面一打开就加载open方法;【代码1】ad.html中的代码(广告文件) 特价大优惠! 什么东西便宜了原创 2015-08-20 16:24:23 · 588 阅读 · 0 评论 -
DOM(三)-09-(示例-表单校验-表单提交的两种方式)
<!--表单提交两种方法:(1)修改默认submit,通过在form标签中定义事件onsubmit="checkForm()";(2)自定义提交,自定义个button,通过onclick事件触发,用form对象中的submit方法控制--> function checkUser(){ //alert("haha"); var原创 2015-08-20 17:27:16 · 578 阅读 · 0 评论 -
DOM(一)-05-(BOM&Navigator对象&History对象)
【BOM】Browser Object Model:浏览器对象模型这个模型方便与操作浏览器。浏览器对应的对象就是window对象。查阅DHTML API文档发现,在DHTML中已将html中的所有标签全部封装成了对象。window对象中还有navigator等对象,这些就是内部对象,即对象内还有对象,下面通过具体例子说明window对象===原创 2015-08-20 16:16:00 · 264 阅读 · 0 评论 -
DOM(一)-04-(DHTML概述)
【DHTML】动态的HTML不是一门语言,HTML、XHTML、XML都是语言,这个DHTML不是。DHTML是多项技术综合体的简称。DHTML包含了HTML,CSS,DOM,JavaScript这4门技术。这4个技术在动态html页面效果定义时,都处于什么样的角色呢?负责什么样的职责呢?(1)HTML:负责提供标签,对数据进行封装,目的是便于对该标签中原创 2015-08-20 16:15:18 · 224 阅读 · 0 评论 -
DOM(三)-02-(示例-调查问卷)
<!--单选按钮演示。1.是否参与调查问卷?当选择“是”,问卷显示,当选择“否“,问卷不显示--> #contentid{/*问卷默认隐藏,注意这个id选择器优先级很高 */ display:none; } function showContent(node){ //获取问卷调查所在div区原创 2015-08-20 17:19:44 · 563 阅读 · 0 评论 -
DOM(二)-12-(示例-表格排序)
表格样式table.css代码@CHARSET "UTF-8";table{ border:##249bdb 1px solid; width:500px; border-collapse:collapse; }table td{ border:#249bdb 1px solid; padding:5px;/*td左边顶格*/}table th{ border:#24原创 2015-08-20 17:15:47 · 333 阅读 · 0 评论 -
DOM(二)-01-(示例-新闻字体)
需求:新闻字体的大中小样式改变。平时上网看新闻,网页中经常会有按钮来调节字体大小。思路:1.先有新闻数据,并用标签封装;2.定义一些页面样式;3.确定事件源和事件,以及处理方式中被处理的节点;(如超链接“大字体”是事件源,单击该超链接是事件,被处理的节点是div区域,即新闻字体发生改变)事件源:a标签事件:onclick被处理的节点:div-newste原创 2015-08-20 16:48:05 · 303 阅读 · 0 评论 -
DOM(一)-17-(节点操作-创建并添加_2)
【示例】在div_1中创建并添加一个按钮节点 div{ border:#0CF 1px solid; width:200px; padding:30px; margin:10px; } #div_1{ background-color:#0CF; } #div_2{ background-color原创 2015-08-20 16:30:52 · 285 阅读 · 0 评论 -
DOM(一)-11-(document获取节点byId)
【document对象——获取节点】该对象将标记型文档进行封装。该对象的作用,是可以对标记型文档进行操作。最常见的操作就是,想要实现动态效果,需要对节点操作,那么要先获取到这个节点。要想获取节点,必须要先获取到节点所属的文档对象document。所以document对象最常见的操作就是获取页面中的节点。【document对象常见方法】1.原创 2015-08-20 16:25:19 · 1112 阅读 · 0 评论 -
DOM(一)-07-(window常见方法_1)
【BOM中window中的常见方法】(1-4见示例1,5见示例2,7见示例3)1.alert方法:显示包含由应用程序自定义消息的对话框。2.confirm方法:显示一个确认对话框,其中包含一个可选的消息和确定取消按钮。(平时浏览网页时,会弹出"你确定离开当前页面"等提示信息,就是用confirm完成的)(1)语法:bConfirmed = window.confir原创 2015-08-20 16:20:14 · 252 阅读 · 0 评论 -
DOM(一)-12-(document获取节点byName)
【document对象——获取节点byName】不是所有标签都具备name属性,具备name属性的有:表单标签、超链接标签========================================================================================================【示例】通过单击b原创 2015-08-20 16:26:19 · 369 阅读 · 0 评论 -
DOM(二)-04-(示例-展开闭合列表2)
<!--重点说明前一视频的问题:1.ifelse设置的不合适,if和else都有修改节点属性的代码,重复→直接预定义样式完成2.现有3个列表,不再像之前只有1个列表,那么希望单击谁就展开或收起谁,怎么做?只要在事件onclick()中传入this即可,因为this是单击谁就操作谁,这个方法简单通用,【一定记住】--> dl dd{ margin:0px;原创 2015-08-20 16:56:49 · 340 阅读 · 0 评论 -
DOM(二)-07-DOM(示例-创建表格)
表格样式table.css代码@CHARSET "UTF-8";table{ border:##249bdb 1px solid; width:500px; border-collapse:collapse; }table td{ border:#249bdb 1px solid; padding:5px;/*td左边顶格*/}主程序代码<!--需求:制作表格原创 2015-08-20 16:59:40 · 465 阅读 · 0 评论 -
DOM(三)-04-(示例-下拉菜单-选择颜色)
程序1<!--下拉菜单的应用:选择颜色,比如有一件衣服,选择不同的颜色会给这衣服上对应的颜色--> .clrclass{ height:50px; width:50px; float:left;/*所有色块区域左漂浮,即从左到右依次排列*/ margin-right:30px;/*每个色块的右边外边距,即与右边色块的距离*/ }原创 2015-08-20 17:21:41 · 921 阅读 · 0 评论 -
DOM(三)-01-(示例-邮件列表)
表格样式table.css代码@CHARSET "UTF-8";table{ border:##249bdb 1px solid; width:500px; border-collapse:collapse; }table td{ border:#249bdb 1px solid; padding:5px;/*td左边顶格*/}table th{ border:#24原创 2015-08-20 17:18:25 · 614 阅读 · 0 评论 -
DOM(二)-11-(示例-行颜色间隔显示并高亮)
表格样式table.css代码table{ border:##249bdb 1px solid; width:500px; border-collapse:collapse; }table td{ border:#249bdb 1px solid; padding:5px;/*td左边顶格*/}table th{ border:#249bdb 1px solid; pa原创 2015-08-20 17:13:06 · 578 阅读 · 0 评论 -
DOM(二)-09-(示例-创建表格-指定行列)
表格样式table.css代码@CHARSET "UTF-8";table{ border:##249bdb 1px solid; width:500px; border-collapse:collapse; }table td{ border:#249bdb 1px solid; padding:5px;/*td左边顶格*/}主程序代码:<!--前一个视频原创 2015-08-20 17:03:11 · 632 阅读 · 0 评论 -
DOM(一)-14-(document获取节点byTagName_2)
【document获取节点byTagName_2】需求:有几个网站和新闻,希望当单击网站时,在当前页面打开,当单击新闻时,在新标签页打开思路:当然是要获取其中被操作的超链接对象,但是通过document获取超链接,拿到的是页面中所有超链接节点,只想获取一部分该怎么办呢?只要将新闻链接封装到一个div区域中,并加上id即可获取到该div节点,再通过该节点对象获取其内所有新闻链原创 2015-08-20 16:28:17 · 661 阅读 · 0 评论 -
DOM(一)-08-(window常见方法_2)
【BOM中window中的常见方法2】11.open 打开新窗口并装入给定 URL 的文档。 12.close 关闭当前浏览器窗口或 HTML 应用程序(HTA)。 ===============================================================================================原创 2015-08-20 16:22:17 · 205 阅读 · 0 评论 -
DOM(二)-06-(示例-好友菜单)
<!--DOM示例-好友菜单类似QQ面板功能,若3个好友分组,单击第一个分组会显示该组成员,即菜单下拉,然后单击第二个分组,第一个分组会自动收起,且第二个分组会顶格,不再像之前做的列表那样列表头不动。--> /*对表格中的ul进行样式定义*/ table ul{/*关联选择器*/ list-style:none;/*去除无序列表的样式原创 2015-08-20 16:58:35 · 261 阅读 · 0 评论