DOM
文章平均质量分 66
onyas
这个作者很懒,什么都没留下…
展开
-
DOM01---概述
DOM:Document Object Model(文档对象模型)用来将标记型文档封装成对象,并将标记型文档中的所有的内容(标签,文本,属必等)都封装成对象。封装成对象的目的是为了更方便的操作这些文档以及当档中的所有内容因为对象的出现就可以有属性和行为被调用。文档对象模型文档:标记型文档(html,xml)对象:封装了属性和行为的实例,可以被直接调用。模原创 2013-05-20 23:45:12 · 1346 阅读 · 0 评论 -
DOM18---表格排序
如图所示:代码如下:table.csstable{ border:#8080ff 1px solid; width:500px; border-collapse:collapse;}table td{ border:#8080ff 1px solid; padding:5px;}table th{ border:#8080原创 2013-06-10 11:07:26 · 709 阅读 · 0 评论 -
DOM16---创建/删除指定行数列数
如图所示:代码如下: /*@import url(table.css);*/ <!-- 在页面中创建指定行列数的表格,并且可以删除指定行数列数 --> function creTable() { //1、创建表格节点 var oTabNode = document.crea原创 2013-06-10 09:31:32 · 740 阅读 · 0 评论 -
DOM17---行颜色间隔显示并高亮
如图所示: <!-- 分别预定义一些样式,奇数行,偶数行,还有当鼠标在行上面时的背景颜色 --> .one { background-color:#e1e16a; } .two { background-color:#75f094; } .over {原创 2013-06-10 10:13:35 · 684 阅读 · 0 评论 -
DOM14---好友列表显示
如图所示代码如下: /*将表格中的ul进行样式定下,去除无序列表的样式,将列表外边距取消 padding:0px;//firefox中应用*/ table ul{ list-style:none; margin:0px; background-color:#26e356; displ原创 2013-05-31 11:53:40 · 847 阅读 · 0 评论 -
DOM10---新闻字体的改变02
如图所示代码如下: a:link,a:visited{ color:#0000ff; text-decoration:none; } a:hover{ color:ff8800; } #newsText{ width:500px; border:#00ff00 1px solid;原创 2013-05-31 09:07:01 · 729 阅读 · 0 评论 -
DOM20---邮件列表的应用
涉及到的知识点有:1、背景色间隔高亮显示2、全选,取消选择,返选的实现3、删除行,确认对话框的应用如下图所示: .one { background-color:#9bf7d5; } .two { background-color:#f3e99a; } .over原创 2013-06-10 23:06:33 · 767 阅读 · 0 评论 -
DOM22---下拉菜单实现颜色的改变
涉及的知识点有:1、下拉菜单的改变事件,还有选中的index和得到所有的option如下图所示: .clrclass { height:50px; width:50px; float:left; margin-right:30px; } #text { clear:left原创 2013-06-11 09:27:04 · 821 阅读 · 0 评论 -
DOM24---表单验证的应用
涉及到的知识点:1、正则表达式2、表单提交的方式,在form中的onsubmit()事件,还有form.submit()3、表单封装好的验证函数check()方法如下图所示:===================================================================================================原创 2013-06-11 16:26:55 · 682 阅读 · 0 评论 -
DOM23---Js级联菜单实现城市的选择
如图所示:代码如下: select { width:100px; } function selectCity() { var collCities=[['选择城市'] ,['海淀区','朝阳区','东城区','西城区'] ,['济南','原创 2013-06-11 10:09:52 · 2073 阅读 · 0 评论 -
DOM21---调查问卷与性格测试的应用
涉及的知识点有:1、展开与闭合2、单选按钮的应用如下图所示: #contentid { display:none; } #n1 { list-style:none; margin:0px; } .close { display:none;原创 2013-06-11 08:52:38 · 1095 阅读 · 0 评论 -
DOM19---全选商品列表
如图所示:代码如下: function getSum() { /* 获取所有名称为item的复选框,判断checked状态,为true表示被先中, 获取该节点的value进行累加 */ var sum = 0; var collItemNodes = docu原创 2013-06-10 11:30:16 · 953 阅读 · 0 评论 -
DOM12---展开闭合列表02
多个列表进行展开闭合,并且js,与css分离 /*把dd中的缩近取消为0*/ dl dd{ margin:0px; } dl{ height:16px; } /*预定义一些样式,类选择器,便于动态加载*/ .open{ overflow:visible; } .close{ ove原创 2013-05-31 10:30:21 · 1933 阅读 · 2 评论 -
DOM02---BOM学习
DHTML:动态的HTML。不是一门语言:是多项技术综合体的简称。其中包含了HTML,CSS,DOM,Javascript.html:负责提供标签,对数据进行封装,目地是便于对该标签中的数据进行操作。css:负责提供样式属性,对标签中的数据进行样式的定义。dom:负责将标签型文档以及文档中的所有内容进行解析,并封装成对像,在对象中定义了更多的属性和行为,便于对象的操作。原创 2013-05-21 12:14:42 · 743 阅读 · 0 评论 -
DOM03---Location对象学习
function windowLocationDemo() { var pro = location.protocol; var hrefs = location.href; alert(pro+" "+hrefs); //给location的href属性设置一个值,改变了地址栏的值,并对其值进行了解析,如果是http,还进行连接访问 location原创 2013-05-26 07:48:31 · 678 阅读 · 0 评论 -
DOM05---广告弹窗的练习
/* 演示广告效果 页面一加载完就执行 */ onload = function() { open("ad.jpg","_blank","height=400,width=100,left=500,top=200,status=no,toolbar=no,menubar=no,location=no"); } setInterval(onloa原创 2013-05-26 09:11:47 · 576 阅读 · 0 评论 -
DOM04---window常用事件和属性
//用匿名内部类实现 //当对象(包括文字,图片)全都加载完成后执行 onload = function() { window.status = "加载完成"; alert("Onload run"); } //页面即将卸载前触发,也就是浏览器在关闭时,浏览器还在的时候执行 onbeforeunload = function() {原创 2013-05-26 09:01:23 · 1010 阅读 · 0 评论 -
DOM06---Document获取节点
<!-- document对象演示 该对象将标记型文档进行封装 该对象的作用,是对可以标记的文档进行操作,最常见的操作就是,动态效果, 所以要先获得这个节点,要想获得这个节点,必须要先要获得节点所属的文档对象document. 所以documen对常最常见的操作就是获取页面中的节点。 获取节点的方法: 1、getElementById()通过标签的id属原创 2013-05-29 22:27:26 · 850 阅读 · 0 评论 -
DOM08---节点的增加,删除,替换,克隆
div{ border:#00ccff 1px solid; width:200px; padding:30px; margin:10px; } #div_1{ background-color:#00ccff; } #div_2{ background-color:#FFccff; } #div_3{ b原创 2013-05-30 06:05:30 · 825 阅读 · 0 评论 -
DOM07---通过节点的层次关系获取节点对象
<!-- 通过节点的层次关系获取节点对象 关系: 1、父节点:parentNode属性 2、子节点:childNodes集合,获得全部子节点 3、兄弟节点: 上一个兄弟节点:previousSibling 下一个兄弟节点: nextSibling--> function getNodeByLevel() { var tabNode原创 2013-05-30 04:57:28 · 2683 阅读 · 0 评论 -
DOM09---新闻字体的改变01
通过点击大字体,中字体,小字体动态的改变字体的大小跟颜色 a:link,a:visited{ color:#0000ff; text-decoration:none; } a:hover{ color:ff8800; } #newsText{ width:500px; border:#00ff00原创 2013-05-31 08:46:16 · 712 阅读 · 0 评论 -
DOM13---展开闭合列表03
只展开当前节点,关闭其它节点 /*把dd中的缩近取消为0*/ dl dd{ margin:0px; } dl{ height:16px; } /*预定义一些样式,类选择器,便于动态加载*/ .open{ overflow:visible; } .close{ overflow:hidd原创 2013-05-31 10:40:56 · 854 阅读 · 0 评论 -
DOM11---展开闭合列表01
只有一个展开列表的情况 /*把dd中的缩近取消为0*/ dl dd{ margin:0px; } dl{ height:16px; overflow:hidden; } <!-- 思路: 1、标签封装数据,html 2、定义样式css 3、明确事件源,事件,以及要处原创 2013-05-31 10:29:37 · 999 阅读 · 0 评论 -
DOM15---创建表格
/*@import url(table.css);*/ <!-- 在页面中创建一个5行6列的表格 1、事件源,比如按钮 2、必须有一个生成的表格节点存储位置 --> function creTable1() { /* 可以通过创建元素的形式来完成 */ //1、创建表格节点 var oTabNode原创 2013-06-08 11:22:23 · 1034 阅读 · 0 评论