JavaScript高级

一、Window对象。

1，windos对象概述：

windos对象是javascript中的顶层对象。

2，window对象的三种弹窗：

2.1：警告提示框：alert("警告提示消息");

2.2；确认取消框：confirm("确认删除吗?"); 有一个boolean类型的返回值

2.3：消息对话框：prompt("提示信息","默认值");

3，其他对象：

history：表示的是浏览器的历史记录对象。
    三个方法：
        back()：   后退
        forward()：前进
        go(参数)： 参数可以是url也可以是历史记录列表的索引。前往指定的url，url必须在历史记录中存在。
              go(1) 就相当于前进
              go(-1)就相当于后退
              go(0) 就相当于刷新当前页面

location：与地址栏相关的对象
    属性：
        href：设置或返回当前完整的url。 location.href

    注意：location的href和超链接都是get方式提交。

二、DOM概述及分类。

1，什么是DOM？

Dom是：Document Object Model 文档对象模型

它是W3C组织制定的一套用于访问XML和HTML文档的标准。允许脚本动态地访问和更新文档内容、结构和样式。

2，DOM有什么作用？

它的作用是将一个xml/html转化成文档对象。从而可以用对象的属性或方法操作html/xml标签。

3，DOM的分类：

DOM Core： 针对任何结构化文档的标准模型

HTML DOM： 针对操作HTML的

XML DOM：  针对操作XML的

XML简单介绍：
    eXtensible Markup Language 可扩展标记语言。
    它用来标记数据、定义数据类型，允许用户自己定义标签结构的源语言，非常适合万维网传输，提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。

什么是 XML DOM？
   XML DOM 是：
    用于 XML 的标准对象模型和标准编程接口可跨平台和语言。XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。
    换句话说：XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。什么是 HTML DOM？
   HTML DOM 是：
    HTML 的标准对象模型和标准编程接口。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

HTML有内置标签，它的标签全是预定于的。(由w3c定义的) 主要作用是显示内容和样式。
XML没有内置标签，是由用户自己定义的。主要作用是描述数据。
HTML是一个特殊的XML。


XML DOM 和 HTML DOM 关系？
    XML DOM 不仅可以操作XML，还可以操作TML。
    HTML DOM 只能操作HTML，不能操作XML。

三、DOM详解(HTML和XML)

1，DOM树概念：

Dom是将一个文档(HTML/XML)解析成一个document对象，该document是一个倒置的树形结构。

2，DOM树节点分类：

元素节点 ----- 1

文本节点 ----- 2

属性节点 ----- 3

节点的信息：
   nodeName 标签名，属性名 #text # document
   nodeType 节点类型
   nodeValue    属性值，文本值，元素不可用

3，Dom树节点属性：

取当前节点的父节点：parentNode

取所有子节点：     childNodes （注意：文本节点和属性节点有其他的方法获取）

取第一个子节点：    firstChild

取下一个子节点：    nextSibling

取上一个子节点：    previousSibling

取最后一个子节点：  lastChild

4，DOM树的CRUD操作：

4.1：添加节点：C

    //创建元素节点，并给元素节点添加属性

    Var ele = document.createElement(“input”);//<input />

    //设置元素节点的属性

    ele.setAttribute(“type”,”file”);<input type="file" />

    //创建文本节点

    Var textnode = document.createTextNode(“”);

    //为元素节点添加文本内容

    Ele.appendChild(textnode);

4.2：更新节点：U

    oldNode.replaceNode(newNode);//自己干

    parentNode.replaceChild(newNode,oldNode);//找父节点干

4.3：删除节点：D

    parentNode.removeChild(childNode);//不能自杀，只能找父节点删除

4.4：查找节点：R

    document.getElementById(“id”);// 根据元素id属性的值获取元素节点对象。          返回的是对象
    document.getElementsByName(“name”);// 根据元素的name属性值获取元素节点的数组。 返回的是对象数组
    document.getElementsByTagName(“tagname”);// 根据元素名称获取元素节点的数组。   返回的是对象数组

在html中不是所遇的标签的value都形式在浏览器中例如：div，spantd等等。
对于value属性不现实的，我们可以使用innerHtml或者innerText让它显示出来。
区别是：innerHTML可以解析HTML标签，而innerText是原样输显示。

四、常用事件介绍。

1，鼠标事件：

鼠标移入事件：onMouseOver()
例：<input type="text" onMouseOver="alert('鼠标移入了')" />

鼠标移出事件：onMouseOut()
例：<input type="text" onMouseOut="alert('鼠标移出了')" />

鼠标移动事件：onMouseMove()
例：<input type="text" onMouseMove="alert('鼠标移动了')" />

鼠标点击事件：onClick()
例：<input type"button" value"鼠标点击" onclick="alert('鼠标点击了')" />

2，键盘事件：

按键按下：onKeyDown()
例：<div id="div1" onKeyDown="myKeyDown()"> </div>
    <script type="text/javascript">"
    function myKeyDown(){
        var mydiv = document.getElementById("div1");
        mydiv.innerHTML += "onKeyDown<br/>";
    }
    </script>

按键按住：onKeyPress()
    同时会触发onKeyDown()

按键弹起：onKeyUp()

3，聚焦/离焦事件：

聚焦事件：onFocus()

离焦事件：onBlur()

4，提交/重置事件：

提交事件：onSubmit()

重置事件：onReset()

注意事项：
A：提交和重置事件都是针对表单的，注册事件都是注册在表单上。
B：提交和重置事件是有固定的写法：
a：在验证表单的function中，必须有一个boolean类型的返回值。
b：在表单元素中注册事件时，必须return方法名。

5，加载/卸载事件：

加载事件：onLoad()
    A：直接写在scrip标签中
    B：在指定的元素上注册和加载事件
    C：使用windos.onLoad 来注册加载事件。
        在使用windos.onLoad来注册加载事件时，不要写方法后面的括号。

卸载事件；onunLoad()

6，选择改变事件：

选择改变：onChange()

    获取所有option的数组：options

    获取选中的索引：selectedIndex

五、json对象和格式。

1，什么是json？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(网络传输速率)。

2，json的定义：

Var 对象名 = [
        {属性名称:属性值,属性名称:属性值,属性名称:属性值},
        {属性名称:属性值,属性名称:属性值,属性名称:属性值}
         ];

3，json对象的获取：

属性名称.属性值

六、DOM案例练习。

1，读取h1标签内文本的内容：

<h1>读取内部的值</h1>

代码：

<html lang="en">
<meta charset="utf-8" />
 <head>
  <title>DOM练习1</title>
 </head>
 <body>
 <!--1：读取h1标签内文本的内容-->
 <h1>读取文本的值</h1>
    <script type="text/javascript">
        // 1，获取h1的字节对象
        var h = document.getElementsByTagName("h1")[0];
        // 2，获取文本内容 (6种)
        // alert(h.firstChild.nodeValue); // 第一种
        // alert(h.lastChild.nodeValue); // 第二种
        // alert(h.childNodes[0].nodeValue); // 第三种
        // alert(h.innerText); // 第四种
           alert(h.innerHTML); // 第五种
        // alert(h.textContent); // 第六种 注意：该方法兼容性不好，IE用不了
    </script>
 </body>
</html>

2，对checkBox全选，全不选，反选的操作：

代码：

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>全选/全不选</title>
 </head>
 <body>
   <h1>请选择你的爱好：</h1>
    全选/全不选<input type="checkbox" name="hobbys" onclick="chkSelectAll(this.checked)" /><br/>
    <input type="checkbox" name="hobby" value="football"/>足球
    <input type="checkbox" name="hobby" value="basketball" />篮球
    <input type="checkbox" name="hobby" value="swim" />游泳
    <input type="checkbox" name="hobby" value="singing" />唱歌<br/>
    <input type="button" value="全选" onclick="chkSelectAll(true)"/> <input type="button" value="全不选" 

onclick="chkSelectAll(false)"/>
    <input type="button" value="反选" onclick="reverseChecked()"/> 

    <script type="text/javascript">
        // 全选思路 
        function chkSelectAll(ischk){
            // 1.获取所有爱好节点的数组
            var hobbyarr = document.getElementsByName("hobby");
            // 2.遍历爱好的数组
            for(var x=0; x<hobbyarr.length; x++){
                // 3.让当前的爱好的选中状态等于参数
                hobbyarr[x].checked = ischk;
            }
            // 4.把全选/全不选的复选框的选中状态和参数同步
            var hobbys = document.getElementsByName("hobbys")[0];
            hobbys.checked = ischk;
        }

        // 全不选思路
        function reverseChecked(ischk){
            // 1.定义一个选中的状态
            ischk = true;
            // 2.获取所有爱好节点的数组
            var hobbyarr = document.getElementsByName("hobby");
            // 3.遍历爱好的数组
            for(var x=0; x<hobbyarr.length; x++){
                // 4.让每个爱好的选中状态，取反
                hobbyarr[x].checked = !hobbyarr[x].checked;
                // 5.判断每个复选框，只要有一个是没有选中状态，就被ischk置为false
                if(!hobbyarr[x].checked){
                    ischk = false;
                }
            }
            // 6.把全选/全不选的复选框的选中状态和参数同步
            var hobbys = document.getElementsByName("hobbys")[0];
            hobbys.checked = ischk;
        }

    </script>
 </body>
</html>

3，城市级联：

代码：

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>城市级联</title>
<script type="text/javascript">
    // 定义一个二维数组，定义好省份及城市
    var cityList = new Array();
        cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山'];
        cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'];
        cityList['广州省'] = ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'];
        cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];
        cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];
        cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];
        cityList['江苏省'] = ['南京市','苏州市','无锡市'];
        cityList['浙江省'] = ['杭州市','宁波市','温州市'];
        cityList['四川省'] = ['四川省','成都市'];
        cityList['海南省'] = ['海口市'];
        cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市'];
        cityList['山东省'] = ['济南市','青岛市','烟台市'];
        cityList['江西省'] = ['江西省','南昌市'];
        cityList['广西省'] = ['柳州市','南宁市'];
        cityList['安徽省'] = ['安徽省','合肥市'];
        cityList['河北省'] = ['邯郸市','石家庄市'];
        cityList['河南省'] = ['郑州市','洛阳市'];
        cityList['湖北省'] = ['武汉市','宜昌市'];
        cityList['湖南省'] = ['湖南省','长沙市'];
        cityList['陕西省'] = ['陕西省','西安市'];
        cityList['山西省'] = ['山西省','太原市'];
        cityList['黑龙江省'] = ['黑龙江省','哈尔滨市'];
        cityList['其他'] = ['其他'];

        // 窗口一加载就添加进下拉列表中
        window.onload = function(){
            var province = document.getElementById("province");
            for(var i in cityList){
                province.add(new Option(i,i));
            }
        }


        function changeCity(){
            //获取city下拉列表对象
            var city = document.getElementById("city");
            //1.获取被选中的下拉列表项
            var provincevalue = document.getElementById("province").value;
            //判断provinceValue是不是_NaN'
            if(provincevalue == "_NaN"){
                city.length = 1;
                return;
            }

            //2.获取指定省份下所包含的城市数组
            var cityarr = cityList[provincevalue];

            //3.在每次发生改变的时候，需要清除下拉列表中城市的选项
            city.length = 1;

            //4.遍历cityArr,添加到city的下拉列表中
            for(var i=0; i<cityarr.length; i++){
                city.add(new Option(cityarr[i],cityarr[i]));
            }
        }
</script>

 </head>
 <body>
    <select id="province" onchange="changeCity()">
        <option value="_NaN">--选择省份--</option>
    </select>
    <select id="city">
        <option>--选择城市--</option>
    </select>
 </body>
</html>