WEB-DOM
文章平均质量分 59
java_zhaoyanli
不忘初衷,善始善终。
展开
-
DOM简介
1. 什么是DOM: Document Object Model 专门操作网页内容的API W3C DOM标准 浏览器厂商实现DOM标准 DHTML: 一切实现网页动态效果的技术的统称 HTML+CSS+JavaScript 鄙视题: HTML XHTML DHTML XML HTML: 专门编写网页内容的语言 X原创 2016-03-16 22:33:44 · 237 阅读 · 0 评论 -
动态实现表单提交验证
表单提交验证 /*失去焦点时,如果用户未填写,则恢复为hintText*/ .hintText{color: #aaaaaa; font-style: italic; } /*获得焦点时; 如果验证通过,则保持*/ .normalText { color: #000000;} function nameFocus(txt){ //如果txt的内容是"请输入您的姓名" if原创 2016-03-18 23:07:50 · 1139 阅读 · 0 评论 -
BOM简介
1. BOM: Browser Object Model 专门操作浏览器窗口的API —— 没有标准 window对象: 2个角色: 1.代替Global,充当全局作用域,包含所有全局对象,方法和变量 2.指代当前打开的浏览器窗口! 属性: 浏览器窗口中,文档显示区的范围: innerHeight原创 2016-03-22 21:54:49 · 318 阅读 · 0 评论 -
定时器
1. 定时器: 周期性定时器 一次性定时器1. 定时器: 让程序按指定时间间隔反复执行同一项任务 为什么: 现实中的变化,都是要经过一段时间间隔 何时: 让程序按指定时间间隔反复执行同一项任务 周期性定时器: 让程序按指定时间间隔反复执行同一项任务 何时: 让程序按指定时间间隔反复执行同一项任务 如何使用: 3件事:原创 2016-03-22 21:57:54 · 304 阅读 · 0 评论 -
打开新链接方式总结
打开新链接方式总结 /*打开新链接方式总结:1. 在当前窗口打开,可后退2. 在当前窗口打开,不可后退3. 在新窗口打开,可重复打开4. 在新窗口打开,不可重复打开*/ function goTo1(){//替换当前窗口,可后退: open("http://tmooc.cn","_self"); } function goTo2(){//替换当前窗原创 2016-03-22 22:00:28 · 694 阅读 · 0 评论 -
小游戏:点不到的小窗口
html: 小游戏:点不到的小窗口 js:var game={ OWIDTH:100+16,//弹出窗口的外部宽,横向修正误差16px OHEIGHT:100+66,//弹出窗口的外部高,纵向修正66px MAXLEFT:0,//保存弹出窗口最大可用left值: 屏幕宽-窗口宽 MAXTOP:0,//保存弹出窗口最大可用top值: 屏原创 2016-03-22 22:47:26 · 672 阅读 · 0 评论 -
倒计时de 问题
html: 倒计时 距离放学还有 || js://1. 任务: 每周期内执行一次计算距离放学的时间function calc(){ var over=new Date("2016/3/21 16:00:00");//下课时间 var now=new Date();//当前时间 //用over-now,再除1000,获得秒数差s原创 2016-03-22 22:50:15 · 379 阅读 · 0 评论 -
Js版带表盘的时钟
html: Js版带表盘的时钟 I II III IIII V VI VII VIII IX X XI XII js://1 任务: 每隔一秒计算三个指针旋转的角度function rotate(){ var now=new Date();//获得当前时间,保存在now中 var s=n原创 2016-03-22 22:51:55 · 1755 阅读 · 0 评论 -
窗口右下角消息弹出框
html: 窗口右下角消息弹出框 X js:/*重要*/var adv={ HEIGHT:0,//保存msg的高度,充当移动的总距离 TIME:2000,//总时间 STEPS:50,//总步数 interval:0,//每步时间间隔 step:0,//每步步长 timer:null,//保存当前定时器的序原创 2016-03-22 22:53:32 · 2662 阅读 · 0 评论 -
倒计时自动关闭/跳转页面
倒计时自动关闭/跳转页面//作业: 改成周期性定时器实现 function myClose(){//任务 //取出time中的数,保存在n中 var n=parseInt(time.innerHTML); n-=1//将n-1 if(n>0){//如果n>0 //将n+秒钟后自动关闭 再放回time中 time.innerHTML=n+"秒钟后自动关闭";原创 2016-03-22 22:55:17 · 3653 阅读 · 0 评论 -
BOM常用对象:
1. BOM常用对象: history: 保存当前窗口打开过的url的历史记录栈 操作:前进:history.go(1) 后退:history.go(-1) 刷新:history.go(0) location: 封装当前窗口正在打开的url的对象 属性: location可获得url中各个部分 pr原创 2016-03-22 22:56:50 · 5542 阅读 · 2 评论 -
event事件
1. *****event: 事件: 用户手动触发的,或浏览器自动触发的状态的改变 事件对象: 在事件发生时,自动创建的,专门封装事件信息的对象。 事件处理函数: 在事件发生时,自动调用执行的函数 何时调用事件处理函数: 在事件发生时,自动调用 如何调用: elem.on事件名() 如何定义事件处理函数:3种为 elem.on事原创 2016-03-22 22:57:45 · 510 阅读 · 0 评论 -
事件处理小案例
事件处理 window.onload=function(){ console.log(location.search); console.log(location.protocol); if(location.search!=""){ //将location的search属性,从第2个字符开始截取之后所有内容,按&切割,保存在数组params var params=l原创 2016-03-22 22:58:52 · 313 阅读 · 0 评论 -
使用 history 对象
使用 history 对象 2-1.html 1 2 3 后退一次 前进一次 前进二次 2-2.html使用 history 对象 2-2.html 1 2 3 后退二次 后退一次 前进一次 前进二次 2-3.html原创 2016-03-22 23:01:04 · 774 阅读 · 0 评论 -
事件处理
html: 事件处理 //d1.onclick(event) function highLight(e){//this->当前元素 //设置当前元素的背景色为yellow this.style.backgroundColor="yellow"; //弹出提示,显示当前元素的class属性 alert(e.target.cl原创 2016-03-22 23:03:20 · 304 阅读 · 0 评论 -
取消与利用冒泡
取消与利用冒泡 function calc(e){ if(e.target.nodeName=="BUTTON"){ if(e.target.innerHTML=="C"){//如果e.target是C sc.innerHTML="";//就清除sc的内容 }else if(e.target.innerHTML=="="){原创 2016-03-22 23:05:13 · 401 阅读 · 0 评论 -
阻止自动表单提交
html: 阻止自动表单提交 增加管理员 姓名:<input name="username" onfocus="getFocus(this)"onblur="valiName(this)"/> * 10个字符以内的字母、数字和下划线的组合原创 2016-03-22 23:08:05 · 521 阅读 · 0 评论 -
联动菜单
联动菜单 /*使用 HTML DOM 的方式实现联动菜单*/ var categories=[{"id":10,"name":'男装',"children":[ {"id":101,"name":'正装'}, {"id":102,"name":'T恤'}, {"id":103,"name":'裤衩'}]},{"id":20,"name":'女装',"children":[ {原创 2016-03-18 23:05:38 · 282 阅读 · 0 评论 -
动态操作表格
动态操作表格 table{width:500px; border-collapse:collapse; text-align:center; } td{border:1px solid #ccc} thead td{font-weight:bold;} var data=[{"id":1001,"name":'可口可乐',"price":2.5,"count":3000},原创 2016-03-18 22:57:24 · 276 阅读 · 0 评论 -
元素节点、属性节点
/* 元素节点console.log(s1.__proto__);console.log(s1.__proto__.__proto__);console.log(s1.__proto__.__proto__.__proto__);*//*属性节点console.log(s1.attributes["id"].__proto__);console.log(s1.attri原创 2016-03-16 22:43:12 · 377 阅读 · 0 评论 -
遍历节点树
遍历节点树 Hello World ! 电影 综艺 跑男 爸爸 极限 剧集 js://专门遍历parent下的直接子节点/*递归实现*/function getChildren(parent){ //输出parent的nodeName console.l原创 2016-03-16 22:45:41 · 882 阅读 · 0 评论 -
遍历API
1. 递归: 元素树: 仅包含元素节点的树结构 何时使用: 只希望访问元素节点时,就使用元素树 如何使用: 1.父子: parentElementNode children 兼容IE8 firstElementChild lastElementChild 2.兄弟: previousElementSibling原创 2016-03-16 22:48:37 · 475 阅读 · 0 评论 -
使用Selector API实现购物车客户端计算
html:使用Selector API实现购物车客户端计算 table{width:600px; text-align:center; border-collapse:collapse; } td,th{border:1px solid black} td[colspan="3"]{text-align:right;} /*tbody>tr>td:last-child{原创 2016-03-16 22:52:02 · 737 阅读 · 0 评论 -
实现伸缩二级菜单
html:1. 实现伸缩二级菜单 考勤管理 日常考勤 请假申请 加班/出差 信息中心 通知公告 公司新闻 规章制度 协同办公 公文流转 文件中心 内部邮件 即时通信 短信提醒 js:原创 2016-03-16 22:54:34 · 612 阅读 · 0 评论 -
bishi:getXXXXByXXX vs querySelectorXXX 差别:
返回值: 动态集合: 优: 查询结果快,缺: 导致重复检索DOM树 非动态集合:优: 保存元素完整的属性,不会导致重复检索 缺: 查询效率低 何时使用: 如果一次查询即可得出结果,优先选择getXXX 如果需要多次查询才得到结果,优先选择queryXXX原创 2016-03-16 22:55:54 · 241 阅读 · 0 评论 -
认识DOM的三大节点:元素节点,文本节点,属性节点以及nodeName,nodeType,nodeValue的区别
既然我们把网页文档看做树形结构,那么就有对应的节点。诚然DOM中有三大节点,分别是 元素节点,文本节点,属性节点元素节点:构成了DOM的基础。文档结构中,是根元素,代表整个文档,其他的还有,,,等等。元素节点之间可以相互包含(当然遵循一定的规则)文本节点:包含在元素节点中。属性节点:元素都可以包含一些属性,属性的作用是对元素做出更具体的描述,比如id,name之类的。翻译 2016-03-16 23:30:19 · 439 阅读 · 0 评论 -
读取并修改元素的内容
读取并修改元素的内容 div{float:left; height: 100px; line-height: 100px; } #d1,#d3{ background-color: #ccff00; } #d2{ cursor: pointer; background-color: #ffcc00; } /*用innerHTML是实现,开发一般用innerHTML*/ /*fun原创 2016-03-18 00:14:14 · 415 阅读 · 0 评论 -
读取并修改元素的内容:选中项左右移动
html:读取并修改元素的内容 select{width:100px;height:85px;} div{display:inline-block;width:50px} <!--假设两个selectx元素,分别保存备选地区列表和选中地区列表实现两选择框之间选项的交换: 包括:当个选中项左右移动 多个选中项左右移动原创 2016-03-18 00:21:18 · 537 阅读 · 0 评论 -
修改元素的属性:使用自定义属性实现摇号排名
html:修改元素的属性 queue"> Eric Scott Jerry Tom Rose John Smith Andy js:window.onload=function(){//在html中引入整个页面就可以了,不用调用,自动呈现页面上 //查找id为queue的ul下的所有li,将结果保存到变量lis中 var原创 2016-03-18 00:26:05 · 408 阅读 · 0 评论 -
实现带样式的表单验证:用户名、密码验证
html: 实现带样式的表单验证 增加管理员 姓名: <input name="uname" onfocus="show(this)" onblur="valiName(this)"/> * 10个字符以内的字母、数字或原创 2016-03-18 00:29:12 · 942 阅读 · 0 评论 -
读取并修改元素的属性:实现多标签页效果
读取并修改元素的属性.foreground { z-index: 1; } function toggle(n){ //查找包含style属性的div,保存在变量currDiv中 var currDiv=document.querySelector("div[style]"); //如果currDiv的id不等于"content"+n if(currDiv.id!="co原创 2016-03-18 00:31:57 · 542 阅读 · 0 评论 -
DOM-元素的内容、属性、样式
内容: elem.innerHTML: 获取或设置元素开始标签到结束标签之间的HTML代码内容。没有兼容性问题。 何时使用: 只要获得完整HTML原文时 只要批量设置元素内容时,都要用innerHTML先拼接字符串,再一次性赋值。 elem.textContent: 获取或设置元素开始标签到结束标签之间的纯文本的正文。忽略html标签; 将特殊符号翻原创 2016-03-18 00:35:44 · 541 阅读 · 0 评论 -
添加和删除元素:
1. 添加单个元素: 3步: 1. 创建空元素: var elem=document.createElement("标签名"); 比如: var a=document.createElement("a"); 2. 设置必要属性: elem.属性名=值; elem.onclick=functio原创 2016-03-18 22:28:50 · 403 阅读 · 0 评论 -
动态创建表格
动态创建表格 table{width:600px; border-collapse:collapse; text-align:center; } td,th{border:1px solid #ccc} //json: 以js对象格式存储或传输数据的字符串格式 // json格式和js中的对象直接量完全一样 // 唯一特别要求: 属性名最好都加引号 var json='[原创 2016-03-18 22:45:32 · 541 阅读 · 0 评论 -
二级联动列表
二级联动列表 .hide{ display: none; } /*实现“省”和“市”的级联下拉列表*/ var cities=[[], /*0号下标没有元素*/[{"name":'东城区',"value":101}, {"name":'西城区',"value":102}, {"name":'海淀区',"value":103}, {"name":'朝阳区',"value":1原创 2016-03-18 22:53:31 · 359 阅读 · 0 评论 -
在当前显示区范围内实现点不到的小方块
在当前显示区范围内实现点不到的小方块 div{position:fixed;width:50px;height:50px; background-color:pink; } js:var game={ SIZE:0,//保存pop小div的大小 MAXTOP:0,//小pop可用的最大top值: innerHeight-SIZE-30原创 2016-03-22 23:10:32 · 379 阅读 · 0 评论