3.1 JavaScript基础

1. 输出 document.write(" ");

2. 变量 var

3. DOM简介

　　网页在加载时, 浏览器会创建页面的文档对象模型(Document Object Model)

　　添加监听器 document.getElementById("xx").addEventListener() 此方法一个元素添加多个事件不会冲突！

4. 事件流

　　事件流：描述页面中接受事件的顺序

　　事件冒泡：最具体的元素接收, 逐级向上传播至最不具体的元素节点

　　事件捕获：最不具体的节点先接收事件, 最具体的节点最后接受事件

　　eg. <div id="div"><button id="btn">按钮</button></div>

　　　　事件冒泡：点击按钮之后先是button接收事件, 再是div

　　eg. document.getElementById("xx").onclick = function(){ xxxx };

5. 事件对象

　　事件对象 event.xxx:

　　<1> type 事件类型

　　<2> target 事件目标

　　<3> stopPropagation 阻止事件冒泡

　　<4> preventDefault 阻止事件默认行为

6. JS内置对象

　　indexof() 存在则返回第几位, 不存在返回-1

　　match() 内容匹配则返回内容, 不匹配返回null

　　replace("a","b") 将a替换为b

　　toUpperCase() / toLowerCase()

　　...

　　Date() Array() Math()等

7. JS浏览器对象

　　<1>window对象 window.innerHeight()/.innerWidth 浏览器内部窗口的高/宽度(除去了菜单栏之类的)

　　<2>计时器对象 setInterval()/clearInterval() 间隔一段时间不停做某事

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p id="pTime"></p>
    <script>
        var timer = setInterval(function(){
　　　　　　  var date = new Date; 
            document.getElementById("pTime").innerHTML = date.toLocaleString();
　　　　 },1000);
　　　　//关闭计时器 clearInterval(timer);
    </script>
</body>
</html>

　　　　　　　setTimeout(function(){ xxxx }, 时间)/clearTimeOut 延迟多久后做一次某事

8. History对象

　　包含浏览器的历史url集合

　　history.back / history.forward / history.go(进入历史的某个页面)

9. Location对象

　　获得当前页面url, 并把浏览器重定向到新的页面

　　location.hostname 主机域名

　　location.pathname 当前页面路径和文件名

　　location.port 主机端口

　　location.protocol web协议(http或https)

　　location.href 当前页面href

　　location.assign 加载新文档

10. Screen对象

　　screen.availWidth/.availHeight 可用的屏幕宽度/高度

　　screen.Height/.Width 屏幕高度/宽度