标签：
DOM
实例1:购物车实例(数量,小计和总计的变化)
这里主要是如何获取页面元素的节点:
document.getElementById("...")
cocument.querySelector("选择器");
通过所需的元素节点,得到我们想要的数据做运算.
实例2:伸缩二级菜单
这里主要是逻辑判断,不同的逻辑给不同的className来控制样式.
需求是:一级菜单可以都关闭,但最多只有一个能打开.(思路是,每次都将所有的一级菜单关闭,然后仅打开当前点击的元素,并且点击同一个还会实现开/关 的来回切换)
DOM
实例1:在备选框中选择国家添加到已选国家框中.(要求实现单选,多选,并且要求两个框中的数据都要进行排序)
这里主要是根据选择,动态的更新两个select中的数据.select有一个onchange事件,专门用于检测被选中的元素,通过sel.selectedIndex返回备选中的option的下标.这帮助我们获得到了我们想要的元素.
要想对页面中的元素排序,只能间接的通过数组的sort方法才能排序.所以要将select中的元素放进数组里.(将select的innerHTML掐头去尾,用</option><option>切割,即可返回一个我们想要的数组,并且根据返回的option下标可知对应数组里的元素,进行相应的操作)最后将对应的数组中的元素更新(就是将数组的元素用join("</option><option>"),再加上头尾即可)到页面上.而且只要是对应数组里有元素,都要排序后在更新到页面上.
在遍历数组的过程中,要反向遍历才可以这样能保证select中option的顺序和对应数组中的数组顺序一致.
实例2:使用自定义属性实现摇号排名
要求:摇号(指定个数并不重复),排序,自定义属性.
生成指定范围内的随机整数,并且不重复.然后将生成的随机数添加到对应页面元素上,然后根据自定义的属性排序,使用sort方法.
实例3:表单元素的验证.
首先表单元素都有两个事件,onfocus和onblur.分别是获得焦点和失去焦点.
根据class来控制不同元素的样式.主要是onblur时对用户输入的内容做验证.
一般分为两步,新建一个正则表达式对象.然后调用test方法验证用户输入的内容是否符合要求.
实例4:在表盘上显示当前时间 => Date相关属性和方法
新建时间对象的三种方式:
新建指定是时间的对象 var t=nwe Date("yyyy/MM/dd hh:mm:ss");
新建当前是时间的对象 var now=now Date();
Date的常用方法:
getTime(); 获得当前对象的毫秒数(1970.01.01)
getHours(); 获得...的小时数值
getMinutes() 获得...的分钟数值
getSeconds() 获得...的秒数值
笔记总结:获取元素节点是什么元素?---->Node.nodeName;
查找页面元素时,我们一般建议使用"选择器"查找.
document.querySelector("选择器");
document.querySelectorAll("选择器");
DOM
实例1:
笔记总结:增加节点:3步
1.创建一个空元素对象
var a=document.createElement("a");
2.添加关键属性
a.href="http://tmooc.com";
3.将新元素添加到指定父元素下
追加:parent.appendChild(a);
插入:parent.insertBefore(a,旧元素);
删除:parent.replaceChild(a,旧元素);
在挂载子元素到DOM树上时,要遵循最少次数的操作DOM树.
有父子元素的关系时最好,没有父子关系时,就建立一个虚拟的fragment虚拟父元素.
frag=document.DocumentFragment();
删除节点:
parent.removeChild(child);
child.parentNode.removeChild(child);
HTML DOM常用对象:
select对象:
属性:
selectedIndex:获得当前选中项的下标--配合onchange属性
options:获得select下所有的option元素;
value:有值,就返回值,没有值就返回内容;
方法:
add(opt);将opt添加到select元素上
remove(i);移除i位置的选项
事件:
onchange
option对象:
创建:var opt=new Option(text,value);
属性:
index:选项在select中的下标
text:代替innerHTML,访问option的内容
From对象:
获取form对象:
var form = document.forms[i/id/name];
属性:
elements:仅包含所有表单元素的集合.
length:就是是element的个数
方法:
submit();
reset();
获取form中的元素?
form.elements[i/id/name]
form.id/name
表单元素:
elem.focus(); 让elem获得焦点
elem.blur (); 让elem失去焦点
***定时器的使用***
这是首次使用面向对象的编程思路来进行编程的.
首先,定义一个我们要操做的对象,然后定义在实现过程中所需要的属性和方法.
在本例中,做的是一个广告的上滑,下滑和自动上滑的效果.对于这种复杂的问题,思路就是做最简单的事,然后从其中找规律,将这些简单的事情拼接成我们所要的功能,最后在做代码的优化和重构.
补充:做动画一定要明确三个量,总距离,总时间,总步数-相关的两个量->步长,步频
首先做上滑,确定三个量.通过步长和步频来控制定时器(周期性).
对应做下滑,最好让代码的结构便于优化.
然后考虑在什么样的情况下,启动一次性的定时器,用于自动向上移动(广告出来),
再考虑动画叠加带来的影响和如何消除动画叠加
DOM
鄙视题: "?username=zhangdong&pwd=123456"-->使用location的search的属性来解析浏览器提交的内容
思路分析:首先使用location.search获得浏览器提交的内容,然后截取出第一个字符(?)外的所有字符.再使用&切割字符串,并保存在数组中,然后对数组中的每个元素再使用"="切割,得到最终的数组.
注意:为对象添加属性时要注意,如果属性值是一个固定的字符串时,可以使用.来添加,如果添加的属性是变量时,则,只能使用obj.[变量]=值的方式来添加.
事件处理:
事件:用户和web页面的交互
event对象:事件发生时,自动创建,封装事件信息的对象.
事件处理函数:事件发生时自动调用执行的函数.
事件处理函数的本质:其实就是节点的一种特殊的属性.只不过赋值为function.
绑定事件处理函数的3种方法:
绑定在元素上, onclick="function";
直接给元素的事件处理函数属性赋值.
未完待续。。。。。。
标签：
原文地址：http://www.cnblogs.com/tianzun-blog/p/5935631.html
