js基础篇（二）

认识对象

在JavaScript中，几乎所有的事物都是对象，对象也是一个变量，但对象可以包含多个值（多个变量），每个值以name：value对呈现。

定义对象的方法

1. 通过new运算符声明对象
2. 通过省略new
3. 对象常量赋值（使用大括号，代表对象）

		var obj1 = new Object();
       var obj2 = Object();
       var obj3 = {};

日期对象

日期对象用于处理日期和时间。

1. getFullYear（）获取年份
2. getTime（）返回从1970年1月1日至今的毫秒数
3. setFullYear（）设置具体的日期

 //自定义当前时间
       function showTime(){
           var d = new Date();
       }

定时器

定时器
格式：var timer = setInterval(函数，毫秒数)；
功能：每隔对应的毫秒数，执行一次传入的函数
返回值：启动定时器的，系统分配的编号

var i = 0;
      function show(){
          document.write(i++ + "<br/>");
      }
      setInterval(show,1000)

认识BOM

BOM:浏览器对象模型 browser object model

  系统对话框
    window 方法（一般情况下window可以省略）
    alert（）弹出警告框
    confirm() 弹出一个带确定和取消的提示框
        返回值：如果点击确定，返回true
                如果点击取消，返回false
    prompt（）弹出一个带输入框的提示框
        参数：
            第一个参数：面板显示的内容
            第二个参数：输入框里面的默认（可以不传入）
        返回值：点击确定，返回输入框中的内容
                点击取消，返回null

 alert("hello");
     window.alert("hello");

     var res = prompt("请输入内容",100);
     alert(res);

open（）方法

open()
第一个参数：跳转的URL 打开一个新的窗口，加载URL
第二个参数：字符串，给打开的窗口起一个名字
第三个参数：一串特殊含义的字符串

function btnClick(){
        //window.open()
        open("https://www.baidu.com","XXX",'width=400,height=400,top=200,left=200');
    }

history对象

history 对象 window.history 掌管的是当前窗口（注意不是浏览器）历史记录（只要加载URL不一样就会产生历史记录）
属性：
history.length 输出当前窗口历史记录的条数
方法：
history.back() 返回上一条历史记录
history.forward() 前进到下一条历史记录
history.go()
参数：0 刷新当前页面
正整数 前进n条记录
负整数 后退n条记录

<button onclick="alert(history.length);">获取历史记录的条数</button>
    <button onclick="history.back();">back</button>
    <button onclick="history.forward();">forward</button>
    <button onclick="history.go(2)">go</button>

location对象

location的属性
URL：统一资源定位符
中文版本 协议：//IP（域名）/:端口号/路径/？查询字符串#锚点
英文版本 protocol://hostname:port/pathname/?seatch#hash

    location.protocol  file:本地磁盘文件访问
                       http：
                       https:证书认证协议
    location.hostname  主机名  IP（在全球范围内找到你当前网络的地址）
                                域名  就是IP的别称
    location.port  端口号（默认隐藏）
        【注】是当前电脑中使用网络的软件，随机给他分配一个编号  0-65535

    hostname:port  可以直接定位到当前使用网络的程序
    小细节：浏览器  8080
            http   80
            https  443

    location.pathname  路径
    location.search  查询字符串(前后端交互)
    ？name1 = value1&name2=value2

    location.hash  锚点，在当前页面进行跳转

  alert(location.protocol);//协议
        alert(location.hostname);
        alert(location.pathname);
        alert(location.search);
        alert(location.hash);

 alert(window.location ===window.document.location);
        location  地址栏
        属性：
        方法：
            location.assign(url)
            [注]在当前窗口跳转到这个URL
            location.replace(url)
            [注]在当前窗口替换成新的URL  不会产生历史记录
            location.reload()
            [注]刷新当前窗口
            location.reload(true)  不经过浏览器缓存强制从服务器重载

	<button onclick="location.assign('https://www.baidu.com')">assign</button>
    <button onclick="location.replace('https://www.baidu.com')">replace</button>
    <button onclick="location.reload()">reload</button>

认识DOM

DOM: document object model(文档对象模型)
节点类型：
元素节点
属性节点 id = ‘div1’
文本节点 div文本

        元素节点的获取
            document.getElementById(id)
            功能：通过id获取符合条件的元素，（id必须是唯一的）
            返回值：就是符合条件的一个节点

window.onload = function(){
                //写在这里的代码，是整个页面加载完成以后执行
                var oDiv = document.getElementById("div1")
                alert(oDiv);

                /* 
                    获取行间属性的值
                */
               alert(oDiv.id);
               alert(oDiv.title);
               alert(oDiv.className);
               //[注]如果css样式带-，将-去掉，从第二个单词开始首字母大写
               alert(oDiv.style.backgroundColor); 

获取元素节点的方法

获取元素节点的方法
document.getElementById(id);

        node.getElementsByTagName(标签名)；
        功能：从node节点开始，通过标签名获取符合条件的元素节点。
        返回值：伪数组/类数组

        node.getElementsByClassName(class名字)
        功能：通过class名字获取符合条件的元素节点。

        document.getElementsByName(name属性的值)
        功能：通过name属性的值获取符合条件的元素节点


        document.querySelctor()
        返回值：一个元素节点，找到符合条件的第一个元素节点

        document.querySelctorAll()
        返回值：返回值，是一个伪数组

        参数：字符串 css选择器格式字符串

获取当前有效样式

通过.style.xxx的方式只能访问内联的css样式。

 alert(oDiv.style.width);
            alert(oDiv.style.backgroundColor);
            alert(oDiv.style.height);

系统提供了两个方法（不同的浏览器）

alert(oDiv.currentStyle['height']);//IE兼容
            alert(getComputedStyle(oDiv)["height"]);//火狐，谷歌兼容
            //跨浏览器的兼容
        function getStyle(node,cssStyle){
            return node.currentStyle ? node.currentStyle[cssStyle] : getComputedStyle(oDiv)[cssStyle];
        }