1.复习昨天的知识
- 创建数组的两种方式
- var ary=[1,2,3];字面量方式创建；
- var ary2=new Array(1,2,3);实例创建；
- 给数组末尾增加一项
- push();
- ary[ary.length]==xxx;
- ary.splice(ary.length,0,xxx);
- 删除数组最后一项
- pop()
- ary.length--; ary.length-=1; ary.length=ary.length-1;
- ary.splice(ary.length-1,1);
- 如何实现克隆
- ary.slice();或是ary.slice(0);
- ary.concat();不添加参数；
- ary.splice(0);注：如果用splice()进行克隆，0不能省略；
- for循环也可以实现，但for循环是循环，不是方法；
- n++与++n的区别：
<script>
var n=15;
alert(++n+10);//弹出的值为26；++n,自身先累加，累加后的结果参与运算；
alert(10+(n++));// 弹出的值为25；n++，先运算，后累加；
alert(n++);//弹出的值为15；n变成16
alert(++n);//弹出的值为16；n变成16
var m=++n;//结果为m是16，n是16；先加1，后赋值；
var z=n++;//结果为z是15，n是16；先赋值，后加1；
</script>
2.日期对象
- 通过日期对象获得的值是数字类型；
- 日期对象的定义：var odate=new Date();指：获得当前电脑系统的时间；
- 日期对象的方法：
- get/setFullYear():返回/设置年，四位数；
- get/setYear():返回/设置年，两位数；
- get/setMonth():返回/设置月；
- get/setDate():返回/设置日；
- getDay():返回星期数，是0-6；0指星期日，6值星期六，配合数组运用；
- get/setHours():返回/设置小时；
- get/setMinutes():返回/设置分钟；
- get/setSeconds():返回/设置秒钟；
- get/setTime():返回/设置毫秒数，距离1970年1月1日0时0分0秒的毫秒数；
- 方法阐述：
- 获得当前电脑系统的时间：var odate=new Date();即定义即获取时间；
- 设置未来的年月日时分秒格式：var odate1=new Date("2018/9/30 18:22:03");或var odate1=new Date(2018,9,30,18,22,3);
- 设置当前电脑系统的年/月/日：
var odate=new Date(); odate.setMonth(odate.getMonth()+1);//改变系统的月份； console.log(odate.getMonth());- getDay():返回星期数，是0-6之间的数字；0指星期日，6值星期六，配合数组运用；
<script> var odate=new Date(); var m=odate.getDay();//m值为0； var ary=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; document.write("今天是："+ary[m]); </script>- get/setTime():返回/设置毫秒数，距离1970年1月1日0时0分0秒(格林尼治时间)的毫秒数；
- 例：使当前时间推迟2小时；推迟n个小时，即加上
n*60*60*1000;
<script> var odate=new Date(); console.log(odate); odate.setTime(odate.getTime()+2*60*60*1000); console.log(odate); </script> - 例：使当前时间推迟2小时；推迟n个小时，即加上
- 实例1：制作一个时钟，封装一个函数，将1-9变成01-09；
- 知识点：解决setInterval开始执行时的延迟问题，可以在执行setInterval前，执行一次函数；
<script>
var odiv=document.getElementsByTagName("div")[0];
//封装一个函数，用于将0-9之间的数字转换为两位数的字符串；
//需求：将数字转换为字符串，所以实参为数字，返回值为字符串；
var str;
function todou(n) {
if(n>=0&&n<10){
str="0"+n;//数字与字符串进行加法，则使两者进行拼接；
}else{
str=""+n;
//目的：一个函数输出的类型必须一样，当数字输入后，输出的全为字符串
//空字符串与数字拼接，达到数字转字符串的效果；
}
return str;
}
function clock() {
var odate=new Date();
var h=odate.getHours();
var m=odate.getMinutes();
var s=odate.getSeconds();
var str=todou(h)+"时"+todou(m)+"分"+todou(s)+"秒";
odiv.innerHTML=str;
}
clock();//为了解决定时器的延迟性，首先设置执行函数一次；
setInterval(clock,1000);//定时器的缺点是，在进行第一次执行函数时，也会延迟1000毫秒
</script>
- 实例2：制作一个距离未来指定时间倒计时时钟，知识点：格林尼治时间；
<body>
<div>距离玩耍时间还有: <span>00天 00:00:00</span></div>
<script>
var ospan=document.getElementsByTagName("span")[0];
function todou(n) {
return n>=0 && n<10?"0"+n:""+n;//三目格式添加if条件语句
}
function countDown(){
var odate=new Date();
var tomdate=new Date("2018/7/29 20:00:00");
var s=tomdate.getTime()-odate.getTime();
//可以写成var s=new Date("2018/7/29 23:00:00")-new Date();
var date=Math.floor(s/(24*60*60*1000));
s%=(24*60*60*1000);
var h=Math.floor(s/(60*60*1000));
s%=(60*60*1000);
var m=Math.floor(s/(60*1000));
s%=(60*1000);
var s=Math.floor(s/1000);
var str=todou(date)+"天"+" "+todou(h)+":"+todou(m)+":"+todou(s);
ospan.innerHTML=str;
}
countDown();
setInterval(countDown,1000);
</script>
</body>
3.DOM基本知识
DOM树，由一大堆的元素和标签组成；所以，DOM就是用来操作页面中的标签的；
-
DOM节点：
- 元素节点：HTML中各元素，如body,head,p,span,ul,li等元素；
- 文本节点：文本，如p元素中的文本；
- 注释节点：注释文本；
- 文档节点：document节点；
-
DOM节点属性：
- nodeName属性：节点的名称，只读；
- nodeValue属性：节点的值，可修改；
- nodeType属性：节点类型，只读；
- 节点类型的属性：
节点类型 nodeName nodeValue nodeType 元素节点 大写的标签名 null 1 文本节点 #text 文本内容 3 注释节点 #comment 注释内容 8 文档节点 #document null 9 -
DOM中的元素节点的获取方式有以下几种：
- id:document.getElementById("id");
- tagname:document.getElementsByTagName("标签名");
- classname:document.getElementsByClassName("class名");
- name:document.getElementsByName("name");
- querySelector(实参):获取一个元素； 实参可以是：div,.div1,#div1，用于移动端；兼容性不好，IE7不支持；
- querySelectorAll():获取一数组元素，兼容性不好；
-
遍历节点树：
- elementNode.childNodes: 返回一个数组，这个数组由给定元素节点的子节点构成；若不存在子节点则返回NodeList[];
- elementNode.children:可以拿到当前元素下的所有子元素节点，但是在IE8下，如果有注释，则作为元素节点返回，不兼容性；只有IE8不兼容，其他的都兼容；
- elementNode.firstChild: 返回元素节点下的第一个子节点； 若不存在,则返回null;
- elementNode.lastChild: 返回元素节点下的最后一个子节点； 若不存在,则返回null;
- nodeObject.parentNode: 返回一个给定子节点的父节点； 若不存在,则返回null;
- nodeObject.nextSibling: 返回给定子节点的下一个弟弟子节点； 若不存在,则返回null;
- nodeObject.previousSibling返回给定子节点的上一个哥哥子节点； 若不存在,则返回null;
-
节点树：
- childNodes: 获取元素节点的所有子节点
- 语法：elementNode.childNodes
- 返回值：元素节点的所有子节点构成的数组集合；
- 若选定元素无子节点，则返回NodeList[];
- 兼容性不好，如下代码中ul的子节点长度在不同浏览器中不同，其中在IE7，IE8浏览器中子节点长度为3，不存在空白节点；而在firefox/chrome/opera/safari浏览器中长度为7；会存在空白节点；
<ul>(空白节点） <li>meihao</li>(空白节点） <li>tiankong</li>（空白节点） <li>yuer</li>（空白节点） </ul>- 封装一个去除空白节点的函数，使所有浏览器均支持；
<body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <script> //需求：将一个元素节点子节点中去除空白节点，返回一个只有元素子节点的数组集合； //思路：函数实参为元素节点，返回值为去除空白子节点后的子节点数组集合 //判断条件：判断子节点的节点类型，空白节点为文本节点，节点类型为3，元素节点的节点类型为1； var oul=document.getElementsByTagName("ul")[0]; function tom(objnode) { var achild=objnode.childNodes; var ary=[]; for(var i=0;i<achild.length; i++){ if(achild[i].nodeType==1){ ary.push(achild[i]);//将元素添加到数组中； } } return ary;//返回值为数组； } var ma=tom(oul); ma[0].innerHTML="天空";//获得第一个li元素，添加内容； console.log(ma); </script> </body> - nodeObject.previousSibling返回给定子节点的上一个哥哥子节点(包括空白节点，注释节点等)； 若不存在,则返回null;
- nodeObject.previousElementSibling: 返回给定子节点的上一个哥哥元素子节点，兼容性不好，IE浏览器不支持；
- 封装一个函数，获取当前元素节点的上一个哥哥元素节点。其中判断循环条件为
pre && pre.nodeType!==1;
<body> <div class="div-1">内容1</div> <div class="div-2">内容2</div> <div class="div-3">内容3</div> <div class="div-4">内容4</div> <div class="div-5">内容5</div> <script> var aDiv=document.getElementsByTagName("div"); //需求：获取 当前元素节点 的上一个哥哥 元素节点 //思路： 实参：当前元素节点； 返回值：上一个哥哥元素节点； //第一步：判断该浏览器下是否支持previousElementSibling方式，如果支持，若支持，则返回元素节点，为true，执行if成立下的语句;如果不存在，则返回undefined，if判断后为假，则执行后面代码； //第二步：当不存在时，利用while循环查找当前元素的上一个节点类型是否为元素节点；如果不是，重新赋值，再判断；直到上一个子节点不存在，则返回null，停止循环；返回null; function preEle(curEle) { //1.判断：如果对象支持高级属性，直接使用系统提供的高级属性； if(curEle.previousElementSibling){ return curEle.previousElementSibling;//此时return的作用：1)返回值；2）阻断程序执行； } //2.如果系统不支持高级属性，则进行下列代码设置； var pre=curEle.previousSibling; while(pre && pre.nodeType!==1){//判断pre是否存在，不存在即为null，为false；跳出循环； pre=pre.previousSibling; } return pre; } var pe=preEle(aDiv[2]); console.log(pe.innerHTML); </script> - childNodes: 获取元素节点的所有子节点
-
判断属性是否存在的方法：
- in : "属性名" in 对象； 如果存在该属性，则返回true;如果不存在，则返回false;
- "." : 对象.属性名； 如果存在该属性，则返回该属性值，如果不存在，则返回undefined；
var aa=document.getElementsByTagName("a")[0]; console.log("href" in aa);//打印出true; alert(aa.mass);//返回值为undefined; -
可视区域的宽高
- 浏览器可视区域的宽高的兼容处理:不包括滚动条；默认17px滚动条；
- 可视区域的宽度：
document.documentElement.clientWidth || document.body.clientWidth; - 可视区域的高度：
document.documentElement.clientHeight || document.body.cilentHeight; - 兼容性问题分析：
-
document.documentElement.clientWidth/Height：除了IE5浏览器不支持，其他的都支持； -
document.body.clientWidth/Heigth：在IE5浏览器中作为浏览器的可视区域宽高获取； -
document.body.clientWidth- 在IE8以上浏览器中，与
document.documentElement.clientWidth差16px，即body元素默认的margin值(8px); - 在IE7浏览器中，与
document.documentElement.clientWidth差20px,即body元素默认的margin值(10px); - 在IE5浏览器中作为浏览器的可视区域宽度获取；
document.documentElement.clientWidth失效；
- 在IE8以上浏览器中，与
-
document.body.clientHeight- 在IE7及以上浏览器中，用于获取body标签的高度；
- 在IE5浏览器中，作为浏览器的可视区域高度获取；
-
- 可视区域的宽度：
- HTML中body标签的可视区域宽高
- body标签的可视区域宽度：
document.body.clientWidth;指body标签的宽度； - body标签的可视区域高度：
document.body.clientHeight;除IE5以外，均指body标签的高度；
- body标签的可视区域宽度：
- window.innerWidth/Height
- 作用：IE9及以上浏览器支持；与
document.documentElement.Width/Height的唯一区别是，它包含滚动条，若页面生成滚动条，则包含滚动条的默认17px，而document.documentElement.Width不包含滚动条；
- 作用：IE9及以上浏览器支持；与
- 浏览器可视区域的宽高的兼容处理:不包括滚动条；默认17px滚动条；
