注册
『笔记』JavaScript基础学习笔记 6
Brains - 灵感乌托邦

『笔记』JavaScript基础学习笔记 6

六六丶
2021-11-17 / 0 评论 / 8,969 阅读 / 收录检测中...
广告
温馨提示:
本文最后更新于2022年06月17日,已超过649天没有更新,若内容或图片失效,请留言反馈。

DOM(文本对象模型)

(20)鼠标拖拽的事件

拖拽(一、二)

<html>
  <head>
    <style>
      #box1{
        width:100px;
        height:100px;
        background-color:red;
        position:absolute;
      }
      #box2{
        width:100px;
        height:100px;
        background-color:yellow;
        position:absolute;
        left:200px;
        top:200px;
      }
    </style>
    <script>
      window.onload = function(){
        // 拖拽box1
        /* 拖拽的流程:
        1.当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
        2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
        3.当鼠标松开时,被拖拽元素国定在当前位置 onmouseup
        */
        // 获取box1
        var box1 = document.getElementById("box1");
        // 当鼠标在被拖拽元素上按下时,开始拖拽
        box1.onmousedown = function(event){
          // 设置box1捕获所有鼠标按下的事件
          // setCapture()只有IE支持,Chrome不支持会报错
          // 当调用一个元素的setCapture()方法后,这个元素将会把下一次所有的鼠标按下的事件捕获到自身上
          /*if(box1.setCapture){
            box1.setCapture();
          }*/
          box1.setCapture && box1.setCapture();
          event = event || window.event;
          // div的水平偏移量:鼠标.clientX - 元素.offsetLeft
          // div的垂直偏移量:鼠标.clientY - 元素.offsetTop
          var ol = event.clientX - box1.offsetLeft;
          var ot = event.clientY - box1.offsetTop;
          // 为document绑定一个onmousemove事件
          document.onmousemove = function(event){
            event = event || window.event;
            // =当鼠标移动时被拖拽元素跟随鼠标移动
            // 获取鼠标的坐标
            var left = event.clientX - ol;
            var top = event.clientY - ot;
            // 修改box1的位置
            box1.style.left = left+"px";
            box1.style.top = top+"px";
          };
          // 为元素绑定一个鼠标松开事件
          document.onmouseup = function(){
            // 当鼠标松开时,被拖拽元素国定在当前位置
            // 取消document的onmousemove事件
            document.onmousemove = null;
            // alert("鼠标松开了");
            // 取消document的onmouseup事件
            document.onmouseup = null;
            // 当鼠标松开时,取消对事件的捕获
            box1.releaseCapture && box1.releaseCapture();
          };
          // 当拖拽一个网页中的内容,浏览器会默认去搜索页面,会导致拖拽功能的异常,这是浏览器的默认行为
          // 如果不希望这个行为发生,则可以通过return false来取消默认行为
          // 但是不支持IE8及以下浏览器
          return false;
        };
      };
    </script>
  </head>
  <body>
    我是一段文字
    <div id="box1"></div>
    <div id="box2"></div>
  </body>
</html>

box的偏移量=鼠标的偏移量-元素的偏移量

kw4zgpnw.png

捕获测试

<html>
  <head>
    <script>
      window.onload = function(){
        // 分别为两个按钮绑定单击响应函数
        var btn01 = document.getElementById("btn01");
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function(){
          alert(1);
        };
        btn02.onclick = function(){
          alert(2);
        };
        // 设置btn01对鼠标按下相关的事件进行捕获
        // 当调用一个元素的setCapture()方法后,这个元素将会把下一次所有的鼠标按下的事件捕获到自身上
        btn01.setCapture();
      };
    </script>
  </head>
  <body>
    <button id="btn01">按钮01</button>
    <button id="btn02">按钮02</button>
  </body>
</html>

拖拽(三)

<html>
  <head>
    <style>
      #box1{
        width:100px;
        height:100px;
        background-color:red;
        position:absolute;
      }
      #box2{
        width:100px;
        height:100px;
        background-color:yellow;
        position:absolute;
        left:200px;
        top:200px;
      }
    </style>
    <script>
      window.onload = function(){
        // 拖拽box1
        /* 拖拽的流程:
        1.当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
        2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
        3.当鼠标松开时,被拖拽元素国定在当前位置 onmouseup
        */
        // 获取box1
        var box1 = document.getElementById("box1");
        // 获取box1
        var box1 = document.getElementById("box1");
        // 获取imh1
        var img1 = document.getElementById("img1");
        // 开启box1的拖拽
        drag(box1);
        // 开启box2的拖拽
        drag(box2);
        // 开启img1的拖拽
        drag(img1);
      };
      // 提取一个专门用来设置拖拽的函数
      // 参数:开启拖拽的元素
      function drag(obj){
        // 当鼠标在被拖拽元素上按下时,开始拖拽
        obj.onmousedown = function(event){
          // 设置box1捕获所有鼠标按下的事件
          // setCapture()只有IE支持,Chrome不支持会报错
          // 当调用一个元素的setCapture()方法后,这个元素将会把下一次所有的鼠标按下的事件捕获到自身上
          /*if(box1.setCapture){
            box1.setCapture();
          }*/
          obj.setCapture && obj.setCapture();
          event = event || window.event;
          // div的水平偏移量:鼠标.clientX - 元素.offsetLeft
          // div的垂直偏移量:鼠标.clientY - 元素.offsetTop
          var ol = event.clientX - obj.offsetLeft;
          var ot = event.clientY - obj.offsetTop;
          // 为document绑定一个onmousemove事件
          document.onmousemove = function(event){
            event = event || window.event;
            // =当鼠标移动时被拖拽元素跟随鼠标移动
            // 获取鼠标的坐标
            var left = event.clientX - ol;
            var top = event.clientY - ot;
            // 修改box1的位置
            obj.style.left = left+"px";
            obj.style.top = top+"px";
          };
          // 为元素绑定一个鼠标松开事件
          document.onmouseup = function(){
            // 当鼠标松开时,被拖拽元素国定在当前位置
            // 取消document的onmousemove事件
            document.onmousemove = null;
            // alert("鼠标松开了");
            // 取消document的onmouseup事件
            document.onmouseup = null;
            // 当鼠标松开时,取消对事件的捕获
            obj.releaseCapture && obj.releaseCapture();
          };
          // 当拖拽一个网页中的内容,浏览器会默认去搜索页面,会导致拖拽功能的异常,这是浏览器的默认行为
          // 如果不希望这个行为发生,则可以通过return false来取消默认行为
          // 但是不支持IE8及以下浏览器
          return false;
        };
      };
    </script>
  </head>
  <body>
    我是一段文字
    <div id="box1"></div>
    <div id="box2"></div>
    <img src="https://cdn.jsdelivr.net/gh/aill66/cdn@latest/usr/uploads/2021/08/809131067.png" id="img1" style="width:100px; position:absolute;"
  </body>
</html>
(21)滚轮的事件
<html>
  <head>
    <style>
      #box1{
        width:100px;
        height:100px;
        background-color:red;
      }
    </style>
    <script>
      window.onload = function(){
        // 当鼠标滚轮向下滚动时box1变长,当滚轮向上滚动时box1变短
        var box1 = document.getElementById("box1");
        // 为box1绑定一个鼠标滚动事件
        /*onmousewheel鼠标滚轮滚动事件,会在鼠标滚轮滚动时触发,火狐不支持
        *
        **在火狐中需要使用DOMMouseScroll来绑定滚轮滚动事件
        **该事件需要通过addEventListener()函数来绑定
        */
        /*function fun(){
          alert("我滚了");
        };
        box1.onmousewheel = fun;
        bind(box1,"DOMMouseScroll",fun);
        */
        box1.onmousewheel = function(event){
          event = event || window.event;
          // alert("我滚了");
          // 判断鼠标滚轮的滚动方向
          // event.wheelDelta 可以获取鼠标滚轮滚动的方向
          // 向上滚动为正值,向下滚动为负值
          // alert(event.wheelDelta);
          // 火狐中不支持wheelDelta
          /*火狐中使用event.detail来获取滚轮滚动的方向
          **向上滚动为负值,向下滚动为正值
          */
          // alert(event.detail);
          // 当鼠标滚轮向下滚动时box1变长,当滚轮向上滚动时box1变短
          if(event.wheelDelta > 0 || event.detail < 0){
            // alert("向上滚");
            // 向上滚box1变短
            box1.style.height = box1.clientHeight - 10 + "px";
          }else{
            // alert("向下滚");
            // 向下滚box1变长
            box1.style.height = box1.clientHeight + 10 + "px";
          }
          // 使用addEventListener()方法绑定的响应函数,取消默认行为时不能使用return false;
          // 需要使用event.preventDefault();来取消,不支持IE8及以下浏览器
          event.preventDefault && event.preventDefault();//取消火狐的默认行为
          // 当滚轮滚动时,如果浏览器有滚动条,浏览器的滚动条会随着滚动
          // 这是浏览器默认行为,可以使用return false;取消默认行为
          return false;
        };
        // 为火狐绑定滚轮事件
        bind(box1,"DOMMouseScroll",box1.onmousewheel)
      };
      function bind(obj,eventStr,callback){
        if(obj.addEventListener){
          // 大部分浏览器兼容的方式
          obj.addEventListener(eventStr,callback,flase);
        }else{
          // this是由调用方式决定
          // 可以使用匿名函数调用回调函数,这样就可以指定this
          // IE8及以下浏览器,加一个on
          // obj.attachEvent("on"+eventStr,callback);
          obj.attachEvent("on"+eventStr,function(){
            // 在匿名函数中调用回调函数
            callback.call(obj);
          });
        }
      };
    </script>
  </head>
  <body style="height:2000px">
    <div id="box1"></div>
  </body>
</html>
(22)键盘的事件
<html>
  <head>
    <script>
      window.onload = function(){
        /* 键盘事件
        onkeydown 按键被按下,如果一直按着某个按键不松手,事件会一直触发
        当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,其他的会非常快触发,是为了防止误操作的发生
        onkeyup 按键被松开,松开一次触发一次
        键盘事件一般都会绑定给一些可以获取到焦点的对象或者document
        */
        document.onkeydown = function(event){
          event = event || window.event;
          // 可以通过keyCode来获取按键的编码,通过它可以判断哪个按键被按下
          // 除了keyCode,事件对象中还提供了几个固定属性
          /*altKey 按键Alt是否被按下
          **ctrlKy 按键Ctrl是否被按下
          **shiftKey 按键Shift是否被按下
          如果被按下则返回true否则返回false
            */
          // 判断y键是否被按下
          // 判断y键和Ctrl键是否被同时按下
          if(event.keyCode == 89 && event.ctrlKey){
            console.log("按键y和Ctrl都被按下了");
          }
        };
        document.onkeyup = function(){
          console.log("按键被松开了");
        };
        // 获取input
        var input = document.getElementsByTagName("input")[0];
        input.onkeydown = function(event){
          event = event || window.event;
          console.log("按键被按下");
          // 数字的keycode为48-57
          // 使文本框中不能输入数字
          if(event.keyCode >= 48 && event.keyCode <= 57){
            // 在文本框中输入内容属于onkeydown的默认行为
            // 如果在onkeydown中取消了默认行为,则输入的内容不会出现在文本框中
            return false;
          }
        };
      };
    </script>
  </head>
  <body>
    <!-- <div style="width:100px;height:100px;background-color:red;" id="box1"></div> -->
    <input type="text" />
  </body>
</html>

键盘移动vid

<html>
  <head>
    <style>
      #box1{
        width:100px;
        height:100px;
        background-color:red;
        position:absolute;
      }
    </style>
    <script>
      // 使div可以根据不同的方向键向不同的方向移动
      var box1 = document.getElementById("box1");
      document.onkeydown = function(event){
        event = event || window.event;
        // 定义一个变量来表示移动的速度
        var speed = 20;
        // 当用户按了Ctrl以后速度加快
        if(event.ctrlKey){
          spend = 200;
        }
        // keyCode 37左  38上  39右  40下
        switch(event.keyCode){
          case 37:
            // alert("向左");
            box1.style.left = box1.offsetLeft -speed +"px";
            break;
          case 39:
            // alert("向右");
            box1.style.left = box1.offsetLeft +speed +"px";
            break;
          case 38:
            // alert("向上");
            box1.style.top = box1.offsetTop -speed +"px";
            break;
          case 40:
            // alert("向下");
            box1.style.top = box1.offsetTop +speed +"px";
            break;
        }
      };
    </script>
  </head>
  <body>
    <div id="box1"></div>
  </body>
</html>

{nextPage/}

BOM(浏览器对象模型)

  • BOM可以通过JS来操作浏览器
  • 在BOM中提供了一组对象,用来完成对浏览器的操作
  • BOM对象

// console.log(window.navigator);
console.log(navigator);
console.log(location);
console.log(history);

一、Navigator(浏览器信息)

代表当前浏览器的信息,通过该对象可以识别不同的浏览器

  • 由于历史原因(网景公司倒闭了),Navigator对象中的大部分属性都已经不能识别浏览器了
  • 一般只会使用userAgent来判断浏览器的信息
  • userAgent是一个字符串,这个字符串包含有用来描述浏览器信息的内容,不同的浏览器会有不同的userAgent
// appCodeName 返回浏览器名称的代码
// appName 返回浏览器的名称
// userAgent 返回一个字符串来描述浏览器的信息
// alert(navigator.appName);
// 在IE11中已经将微软和IE相关的标识都去除了,所以基本不能通过userAgent来识别浏览器是不是IE了
var ua = navigator.userAgent;
console.log(ua);
if(/firefox/i.test(ua)){
  alert("我是火狐");
}else if(/chrome/i.test(ua)){
  alert("我是Chrome");
}else if(/msie/i.test(ua)){
  alert("我是IE浏览器");
}else if("ActiveXObject" in window){
  alert("你是IE11,我已经抓住你了");
}
// 如果不能通过userAgent来判断浏览器信息,还可以通过一些浏览器中特有的对象来判断浏览器的信息
// 比如:ActiveXObject
// alert("ActiveXObject" in window);
if("ActiveXObject" in window){
  alert("你是IE,我已经抓住你了");
}else{
  alert("你不是IE");
}

二、History(历史记录)

代表浏览器的历史记录,可以通过该对象来操作浏览器向前或向后翻页

<html>
  <head>
    <script>
      // 可以通过History来操作浏览器向前或向后翻页
      // length属性可以获取到当次访问的连接数量
      // alert(history.length);
      window.onload = function(){
        var btn = document.getElementById("btn");
        btn.onclick = function(){
          // alert(history.length);
          // back()方法可以用来回退到上一个页面,作用和浏览器的返回按钮一样
          // history.back();
          // forward()方法可以用来跳转到下一个页面,作用和浏览器的返回按钮一样
          // history.forward();
          // go()方法可以跳转到指定页面,需要一个整数作为参数
          // 1:表示向前跳转一个页面,相当于forward()
          // 2:表示向前跳转两个页面
          // -1:表示向后跳转一个页面,相当于back()
          // -2:表示向后跳转两个页面
          history.go(1);
        };
      };
    </script>
  </head>
  <body>
    <button id="btn">点我一下</button>
    <h1>History</h1>
    <a href="">去下一个页面</a>
  </body>
</html>

三、Location(浏览器地址栏)

该对象中封装了浏览器的地址栏的信息

<html>
  <head>
    <script>
      window.onload = function(){
        var btn = document.getElementById("btn");
        btn.onclick = function(){
          // 如果直接打印Location则可以获取到地址栏的信息(当前页面的完整路径)
          // alert("location");
          // 如果直接将location修改为一个完整的路径(或相对路径),则页面会自动跳转到该路径,并且会生成相应的历史记录
          // location = "https://www.baidu.com";
          // assign()用来跳转到其他页面,作用和直接修改location一样
           // location.assign("https://www.baidu.com");
          // reload()重新加载当前页面,作用和刷新按钮一样
          // 在方法中传递一个true作为参数,则会强制清空缓存刷新
          // location.reload(true);
          // replace()可以使用一个新的页面替换当前页面,调用完毕也会跳转到新的页面,但是不会生成历史记录(不能使用回退功能)
          location.replace("https://www.baidu.com");
        };
      };
    </script>
  </head>
  <body>
    <button id="btn">点我一下</button>
  </body>
</html>

四、Window(浏览器的窗口)

window的方法

1、 定时调用
<html>
  <head>
    <script>
      window.onload = function(){
        var count = document.getElementById("count");
        // 使count中的内容自动切换
        // js的程序执行速度是非常快的
        // 如果希望一段程序可以每间隔一段时间执行一次,可以使用定时调用
        /*for(var i=0; i<100; i++){
          count.innerHTML = i;
          alert("点我");
        }*/
        // setInterval()定时调用:可以将一个函数每隔一段时间执行一次
        // 参数:1.回调函数,该函数会每隔一段时间被调用一次,2.每次调用回调函数的时间单位为毫秒
        // 返回值:返回一个Number类型的数据,这个数字用来作为定时器的唯一标识
        var num = 1;
        var timer = setInterval(function(){
          count.innerHTML = num++;
          if(num == 11){
            // 关闭定时器
            clearIntervol(timer);
          }
        },100);
        // console.log(timer);
        // clearIntervol()可以用来关闭一个定时器
        // 方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器
        // clearIntervol(timer);
      };
    </script>
  </head>
  <body>
    <h1 id="count"></h1>
  </body>
</html>
(1)切换图片练习
<html>
  <head>
    <script>
      window.onload = function(){
        // 使图片可以自动切换
        // 获取img标签
        var img1 = document.getElementById("img1");
        // 创建一个数组来保存图片的路径
        var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
        // 创建一个变量来保存当前图片的索引
        var index = 0;
        // 定义一个变量,用来保存定时器的标识
        var timer;
        // 为btn01绑定一个单击响应函数
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function(){
          // 每点击一次按钮就会开启一个定时器,点击多次就会开启多个定时器,会导致切换速度加快,并且只能关闭最后一次开启的定时器
          // 在开启定时器之前,需要将当前元素上的其他定时器关闭,避免开启多个定时器
          clearInterval(timer);
          // 开启定时器来切换图片
          timer = setInterval(function(){
            // 使索引自增
            index++;
            // 判断索引是否超过最大索引
            /*if(index >= imgArr.length){
              // 则将index设置为0,使其循环切换
              index = 0;
            }*/
            // index = index % imgArr.length;
            index %= imgArr.length; //与上面for循环功能一样
            // 修改img1的src属性
            img1.src = imgArr[index];
          },1000);
        };
        // 为btn02绑定一个单机响应函数
        var btn02 = document.getElementById("btn01");
        btn02.onclick = function(){
          // 点击按钮以后停止图片的自动切换,关闭定时器
          // clearInterval()可以接收任意参数,如果参数是一个有效的定时器标识则停止对应的定时器,如果参数不是有效的标识则什么也不做
          clearInterval(timer);
        };
      };
    </script>
  </head>
  <body>
    <img id="img1" src="img/1.jpg" />
    <br/><br/>
    <button id="btn01">开始</button>
    <button id="btn02">停止</button>
  </body>
</html>
(2)修改div移动练习
<html>
    <head>
        <style type="text/css">
            #box1{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
            }
        </style>
        <script type="text/javascript">
            //使div可以根据不同的方向键向不同的方向移动
            /*
             * 按左键,div向左移
             * 按右键,div向右移
             * 。。。
             */
            window.onload = function(){
                //定义一个变量,来表示移动的速度
                var speed = 10;
                //创建一个变量表示方向
                //通过修改dir来影响移动的方向
                var dir = 0;
                //开启一个定时器,来控制div的移动
                setInterval(function(){
                    /*
                     * 37 左
                     * 38 上
                     * 39 右
                     * 40 下
                     */
                    switch(dir){
                        case 37:
                            //alert("向左"); left值减小
                            box1.style.left = box1.offsetLeft - speed + "px";
                            break;
                        case 39:
                            //alert("向右");
                            box1.style.left = box1.offsetLeft + speed + "px";
                            break;
                        case 38:
                            //alert("向上");
                            box1.style.top = box1.offsetTop - speed + "px";
                            break;
                        case 40:
                            //alert("向下");
                            box1.style.top = box1.offsetTop + speed + "px";
                            break;
                    }
                },30);
                //为document绑定一个按键按下的事件
                document.onkeydown = function(event){
                    event = event || window.event;
                    //当用户按了ctrl以后,速度加快
                    if(event.ctrlKey){
                        speed = 500;
                    }else{
                        speed = 10;
                    }
                    //使dir等于按键的值
                    dir = event.keyCode;
                };
                //当按键松开时,div不再移动
                document.onkeyup = function(){
                    //设置方向为0
                    dir = 0;
                };
            };
        </script>
    </head>
    <body>
        <div id="box1"></div>
    </body>
</html>
2、 延时调用
<html>
    <head>
        <script type="text/javascript">
            var num = 1;
            //开启一个定时器
            /*setInterval(function(){
                console.log(num++);
            },3000);*/
            /*延时调用,
             *     延时调用一个函数不马上执行,而是隔一段时间以后在执行,而且只会执行一次
             * 延时调用和定时调用的区别,定时调用会执行多次,而延时调用只会执行一次
             * 延时调用和定时调用实际上是可以互相代替的,在开发中可以根据自己需要去选择*/
            var timer = setTimeout(function(){
                console.log(num++);
            },3000);
            //使用clearTimeout()来关闭一个延时调用
            clearTimeout(timer);
        </script>
    </head>
    <body>
    </body>
</html>
(1)定时器的应用一
<html>
    <head>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box1{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                //获取box1
                var box1 = document.getElementById("box1");
                //获取btn01
                var btn01 = document.getElementById("btn01");
                //定义一个变量,用来保存定时器的标识
                var timer;
                //点击按钮以后,使box1向右移动(left值增大)
                btn01.onclick = function(){
                    //关闭上一个定时器
                    clearInterval(timer);
                    //开启一个定时器,用来执行动画效果
                    timer = setInterval(function(){
                        //获取box1的原来的left值
                        var oldValue = parseInt(getStyle(box1,"left"));
                        //在旧值的基础上增加
                        var newValue = oldValue + 1;
                        //判断newValue是否大于800
                        if(newValue > 800){
                            newValue = 800;
                        }
                        //将新值设置给box1
                        box1.style.left = newValue + "px";
                        //当元素移动到800px时,使其停止执行动画
                        if(newValue == 800){
                            //达到目标,关闭定时器
                            clearInterval(timer);
                        }
                    },30);
                };
            };
            /*定义一个函数,用来获取指定元素的当前的样式
             * 参数:
             *         obj 要获取样式的元素
             *         name 要获取的样式名 */
            function getStyle(obj , name){
                if(window.getComputedStyle){
                    //正常浏览器的方式,具有getComputedStyle()方法
                    return getComputedStyle(obj , null)[name];
                }else{
                    //IE8的方式,没有getComputedStyle()方法
                    return obj.currentStyle[name];
                }
            };
        </script>
    </head>
    <body>
        <button id="btn01">点击按钮以后box1向右移动</button>
        <br /><br />
        <div id="box1"></div>
        <div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
    </body>
</html>

{nextPage/}

(2)定时器的应用二
<html>
    <head>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box1{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                //获取box1
                var box1 = document.getElementById("box1");
                //获取btn01
                var btn01 = document.getElementById("btn01");
                //获取btn02
                var btn02 = document.getElementById("btn02");
                //点击按钮以后,使box1向右移动(left值增大)
                btn01.onclick = function(){
                    move(box1 , 800 , 10);
                };
                //点击按钮以后,使box1向左移动(left值减小)
                btn02.onclick = function(){
                    move(box1 , 0 , 10);
                };
            };
            //定义一个变量,用来保存定时器的标识
            var timer;
            //尝试创建一个可以执行简单动画的函数
            /*参数:
             *     obj:要执行动画的对象
             *     target:执行动画的目标位置
             *     speed:移动的速度(正数向右移动,负数向左移动) */
            function move(obj , target ,speed){
                //关闭上一个定时器
                clearInterval(timer);
                //获取元素目前的位置
                var current = parseInt(getStyle(obj,"left"));
                //判断速度的正负值
                //如果从0 向 800移动,则speed为正
                //如果从800向0移动,则speed为负
                if(current > target){
                    //此时速度应为负值
                    speed = -speed;
                }
                //开启一个定时器,用来执行动画效果
                timer = setInterval(function(){
                    //获取box1的原来的left值
                    var oldValue = parseInt(getStyle(obj,"left"));
                    //在旧值的基础上增加
                    var newValue = oldValue + speed;
                    //判断newValue是否大于800
                    //从800 向 0移动
                    //向左移动时,需要判断newValue是否小于target
                    //向右移动时,需要判断newValue是否大于target
                    if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
                        newValue = target;
                    }
                    //将新值设置给box1
                    obj.style.left = newValue + "px";
                    //当元素移动到0px时,使其停止执行动画
                    if(newValue == target){
                        //达到目标,关闭定时器
                        clearInterval(timer);
                    }
                },30);
            }
            /*定义一个函数,用来获取指定元素的当前的样式
             * 参数:
             *         obj 要获取样式的元素
             *         name 要获取的样式名 */
            function getStyle(obj , name){
                if(window.getComputedStyle){
                    //正常浏览器的方式,具有getComputedStyle()方法
                    return getComputedStyle(obj , null)[name];
                }else{
                    //IE8的方式,没有getComputedStyle()方法
                    return obj.currentStyle[name];
                }
            };
        </script>
    </head>
    <body>
        <button id="btn01">点击按钮以后box1向右移动</button>
        <button id="btn02">点击按钮以后box1向左移动</button>
        <br /><br />
        <div id="box1"></div>
        <div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
    </body>
</html>
(3)定时器的应用三
<html>
  <head>
    <style>
      *{
        margin:0;
        padding:0;
      }
      #box1{
        width:100px;
        height:100px;
        background:red;
        position:absolute;
        left:0;
      }
      #box2{
        width:100px;
        height:100px;
        background:blue;
        position:absolute;
        left:0;
        top:200px;
      }
    </style>
    <!-- 引入tools工具,调用切换动画函数 -->
    <script src="js/tools.js"></script>
    <script>
      window.onload = function(){
        var box1 = document.getElementById("box1");
        var btn01 = document.getElementById("btn01");
        var btn02 = document.getElementById("btn02");
        // 点击按钮后使box1向右移动(left增大)
        btn01.onclick = function(){
          move(box1,"left",800,20);
        };
        // 点击按钮后使box1向左移动(left减小)
        btn02.onclick = function(){
          move(box1,"left",0,10);
        };
        // 获取btn03
        var btn03 = document.getElementById("btn03");
        var box2 = document.getElementById("box2");
        btn03.onclick = function(){
          move(box2,"left",800,10);
        };
        // 获取btn04
        var btn04 = document.getElementById("btn04");
        var box2 = document.getElementById("box2");
        btn04.onclick = function(){
          // move(box2,"top",800,10);
          // move(box2,"height",800,10);
          move(box2,"width",800,10,function(){
            // alert("动画执行完了");
            move(box2,"height",400,10,function(){
              move(box2,"top",0,10,function(){
                move(box2,"width",100,10,function(){
                  move(box2,"height",100,10,function(){
                
                  });
                });
              });
            });
          });
        };
      };
      // 定义一个变量用来保存定时器的标识
      // 目前定时器由全局变量timer保存,所有正在执行的定时器都在timer变量中保存
      // var timer
    </script>
  </head>
  <body>
    <button id="btn01">点击按钮以后box1向右移动</button>
    <button id="btn02">点击按钮以后box1向左移动</button>
    <button id="btn03">点击按钮以后box2向右移动</button>
    <button id="btn04">测试按钮</button>
    <br/><br/>
    <div id="box1"></div>
    <div id="box2"></div>
    <div style="position:absolute;left:800px;top:0;width:0;height:1000px;border-left:1px black solid;"></div>
  </body>
</html>

tools.js(用于存放工具程序)

      // 尝试创建一个可以执行简单动画的函数
      // 参数:obj:要执行动画的对象
      //      attr:要执行动画的样式,比如left height top
      //      target:执行动画的目标位置
      //      speed:移动的速度(正数向右移动,负数向左移动)
      //      callback:回调函数,将会在动画执行完毕以后执行
      function move(obj,attr,target,speed,callback){
        // 关闭上一个定时器
        clearInterval(obj.timer);
        // 获取box1目前的位置
        var current = parseInt(getStyle(obj,attr));
        // 判断速度speed的正负值
        // 如果从0向800移动则speed为正,如果从800向0移动则speed为负
        if(current > target){
          // 此时速度应为负值
          speed = -speed;
        }
        // 开启一个定时器用来执行动画效果
        // 向执行动画的对象中添加一个timer属性,用来保存它自己的定时器的标识
        obj.timer = setInterval(function(){
          // 获取box1原来的left值
          var oldValue = parseInt(getStyle(obj,attr));
          // 在旧值的基础上增加,给box添加移动速度
          var newValue = oldValue + speed;
          // 向左移动时需要判断newValue是否小于target
          // 向右移动时需要判断newValue是否大于于target
          if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
            newValue = target;
          }
          // 将新值设置给obj
          obj.style[attr] = newValue + "px";
          // 当box1移动到了0px时,使其停止执行动画
          if(newValue == target){
            // 达到目标关闭定时器
            clearInterval(obj.timer);
            // 动画执行完毕,调用回调函数
            callback && callback();
          }
        },30);
      };
      /* 定义一个函数,用来获取指定元素的当前的样式
       * 参数:
       * obj 要获取样式的元素
       * name 要获取的样式名*/
      function getStyle(obj,name){
        if(window.getComputedStyle){
          //正常浏览器的方式,具有getComputedStyle()方法
          return getComputedStyle(obj,null)[name];
        }else{
          //IE8的方式,没有getComputedStyle()方法
          return obj.currentStyle[name];
        }
      };

{nextPage/}

3、 轮播图的改进
<html>
  <head>
    <style>
      *{
        margin:0;
        padding:0;
      }
      #outer{
        width:520px;
        height:333px;
        margin:50px auto;
        background-color:greenyellow;
        padding:10px 0;
        /* 开启相对定位 */
        position:relative;
        /* 裁剪溢出的内容 */
        overflow:hidden;
      }
      /* 设置imgList */
      #imgList{
        /* 去除ul的项目符号 */
        list-style:none;
        /* width:2600px; */
        /* 开启绝对定位 */
        position:absolute;
        /* 设置偏移量,默认为0 */
        /* 每向左移动520px可以切换下一张图片 */
        left:0;
      }
      /* 设置列表中li */
      #imgList li{
        /* 设置浮动 */
        float:left;
        /* 设置左右外边距 */
        margin:0 10px;
      }
      /* 设置导航按钮 */
      #navDiv{
        /* 开启绝对定位 */
        position:absolute;
        /* 设置位置 */
        bottom:15px;
        /* 设置居中显示 */
        /* left:197px; */
      }
      #navDiv a{
        /* 设置超链接的浮动 */
        float:left;
        width:15px;
        height:15px;
        background-color:red;
        /* 设置左右外边距 */
        margin:0 5px;
        /* 设置透明 */
        opacity:0.5;
        /* 兼容IE8透明 */
        filter:alpha(opacity=50);
      }
      /* 设置鼠标移入的效果 */
      #imgDiv a:hover{
        background-color:black;
      }
    </style>
    <!-- 引入tools工具,调用切换动画函数 -->
    <script src="js/tools.js"></script>
    <script>
      window.onload = function(){
        // 获取imgList
        var imgList = document.getElementById("imgList");
        // 获取页面中所有的img标签
        var imgArr = document.getElementsByTagName("img");
        // 设置imgList的宽度
        imgList.style.width = 520*imgArr.length + "px";
        // 设置导航按钮居中
        // 获取navDiv
        var navDiv = document.getElementById("navDiv");
        // 获取outher
        var outer = document.getElementById("outer");
        // 设置navDiv的left值
        navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 +"px";
        // 默认显示图片的索引
        var index = 0;
        // 获取所有的a
        var allA = document.getElementsByTagName("a");
        // 设置默认选中的效果
        allA[index].style.backgroundColor = "black";
        // 点击超链接切换到指定的图片
        // 为所有的超链接都绑定一个单击响应函数
        for(var i=0; i<allA.length; i++){
          // 为每一个超链接都添加一个num属性
          allA[i].num = i;
          // 为超链接绑定单击响应函数
          allA[i].onclick = function(){
            // 关闭自动切换的定时器
            clearInterval(timer);
            // 获取点击的超链接的索引
            // alert(this.num);
            index = this.num;
            // 切换图片
            // imgList.style.laft = -520*index + "px";
            // 设置选中的a
            setA();
            // 使用move函数来切换图片
            move(imgList,"left",-520*index,20,function(){
              // 点击切换动画执行完毕,开启自动切换动画
              autoChange();
            });
          };
        }
        // 开启自动切换图片,调用autoChange函数
        autoChange();
        // 创建一个方法来设置选中的a
        function setA(){
          // 判断当前索引是否为最后一张图片
          if(index >= imgArr.length - 1){
            // 则将index设置为0
            index = 0;
            // 此时显示的是最后一张,而最后一张和第一张是一模一样的
            // 通过CSS将最后一张切换为第一张
            imgList.style.left = 0;
          }
          for(var i=0; i<allA.length; i++){
            // 遍历所有的a并将背景颜色设为空,去掉内联样式,显示外部样式
            allA[i].style.backgroundColor = "";
          }
          // 将选中的a设置为黑色
          allA[index].style.backgroundColor = "black";
        };
        // 定义一个自动切换的定时器的标识
        var timer;
        // 创建一个函数来开启自动切换图片
        function autoChange(){
          // 开启一个定时器用来定时切换图片
          timer = setInterval(function(){
            // 使索引自增
            index++;
            // 判断index的值并改变index的值,形成循环
            index %= imgArr.length;
            // 执行动画切换
            move(imgList,"left",-520*index,20,function(){
              // 修改导航按钮
              setA();
            });
          },3000);
        };
      };
    </script>
  </head>
  <body>
    <!-- 创建一个外部div来作为大容器 -->
    <div id="outer">
      <!-- 创建一个ul放置图片 -->
      <ul id="imgList">
        <li><img src="img/1.jpg"/></li>
        <li><img src="img/2.jpg"/></li>
        <li><img src="img/3.jpg"/></li>
        <li><img src="img/4.jpg"/></li>
        <li><img src="img/5.jpg"/></li>
        <li><img src="img/1.jpg"/></li>
      </ul>
      <!-- 创建导航按钮 -->
      <div id="navDiv">
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
      </div>
    </div>
  </body>
</html>

{nextPage/}

4、类的操作
<html>
  <head>
    <style>
      .b1{
        width:100px;
        height:100px;
        background-color:yellowgreen;
      }
      .b2{
        height:200px;
        background-color:red;
      }
    </style>
    <script>
      window.onload = function(){
        // 获取box
        var box = document.getElementById("box");
        // 获取btn01
        var btn01 = document.getElementById("btn01");
        // 为btn01绑定单击响应函数
        btn01.onclick = function(){
          // 修改box的样式
          // 通过style属性来修改元素的样式,每修改一个样式浏览器就需要重新渲染一次
          // 这样执行的性能是比较差的,而且这种方式当需要修改多个样式时也比较麻烦
          /*box.style.width = "200px";
          box.style.height = "200px";
          box.style.backgroundColor:"red";*/
          // 一行代码可以修改多个样式
          // 修改box的class属性
          // 可以通过修改元素的class属性来间接修改样式
          // 这样只需修改一次即可同时修改多个样式,同时浏览器只需重新渲染一次,性能会提高一些
          // 这种方式可以使表现(css)和行为(js)进一步分离
          // b2会替换b1的样式
          // box.className = "b2";
          // 在b1的基础上加上b2的样式(添加一个空格防止b1和b2拼串为b1b2,应为b1 b2)
          // box.className += " b2"
          // addClass(box,"b2");
          // alert(hasClass(box,"heelo"));
          // removeClass(box,"b2");
          toggleClass(box,"b2");
        };
      };
      // 定义一个函数来向一个元素添加指定的class属性值
      /*参数:
        obj 要添加class属性的元素
        cn 要添加的class值*/
      function addClass(obj,cn){
        // 检查obj中是否含有cn
        if(!hasClass(obj,cn)){
          // 如果没有cn则添加cn(添加一个空格防止直接拼串)
          obj.className += " "+cn;
        }
      };
      // 判断一个元素中是否含有指定的class属性值
      /*参数
        obj 要添加class属性的元素
        cn 要添加的class值
        如果有该class值则返回true,否则返回false*/
      function hasClass(obj,cn){
        // 判断obj中是否有cn这个class值
        // 创建一个正则表达式
        // var reg = /\bb2\b/;
        var reg = new RegExp("\\b"+cn+"\\b");
        return reg.test(obj.className);
      };
      // 删除一个元素中指定的class属性
      function removeClass(obj,cn){
        // 创建一个正则表达式
        var reg = new RegExp("\\b"+cn+"\\b");
        // 删除class
        obj.className = obj.className.replace(reg,"");
      };
      // toggleClass用来切换一个类
      // 如果元素中有指定类则删除,没有则添加
      function toggleClass(obj,cn){
        // 判断obj中是否含有cn
        if(hasClass(obj,cn)){
          // 有则删除
          removeClass(obj,cn);
        }else{
          // 没有则添加
          addClass(obj,cn);
        }
      };
    </script>
  </head>
  <body>
    <button id="btn01">点击按钮修改box的样式</button>
    <div id="box" class="b1"></div>
  </body>
</html>

tools.js(工具函数)

// 尝试创建一个可以执行简单动画的函数
// 参数:obj:要执行动画的对象
//      attr:要执行动画的样式,比如left height top
//      target:执行动画的目标位置
//      speed:移动的速度(正数向右移动,负数向左移动)
//      callback:回调函数,将会在动画执行完毕以后执行
function move(obj, attr, target, speed, callback) {
    // 关闭上一个定时器
    clearInterval(obj.timer);
    // 获取box1目前的位置
    var current = parseInt(getStyle(obj, attr));
    // 判断速度speed的正负值
    // 如果从0向800移动则speed为正,如果从800向0移动则speed为负
    if (current > target) {
        // 此时速度应为负值
        speed = -speed;
    }
    // 开启一个定时器用来执行动画效果
    // 向执行动画的对象中添加一个timer属性,用来保存它自己的定时器的标识
    obj.timer = setInterval(function () {
        // 获取box1原来的left值
        var oldValue = parseInt(getStyle(obj, attr));
        // 在旧值的基础上增加,给box添加移动速度
        var newValue = oldValue + speed;
        // 向左移动时需要判断newValue是否小于target
        // 向右移动时需要判断newValue是否大于于target
        if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
            newValue = target;
        }
        // 将新值设置给obj
        obj.style[attr] = newValue + "px";
        // 当box1移动到了0px时,使其停止执行动画
        if (newValue == target) {
            // 达到目标关闭定时器
            clearInterval(obj.timer);
            // 动画执行完毕,调用回调函数
            callback && callback();
        }
    }, 30);
};
/* 定义一个函数,用来获取指定元素的当前的样式
 * 参数:
 * obj 要获取样式的元素
 * name 要获取的样式名*/
function getStyle(obj, name) {
    if (window.getComputedStyle) {
        //正常浏览器的方式,具有getComputedStyle()方法
        return getComputedStyle(obj, null)[name];
    } else {
        //IE8的方式,没有getComputedStyle()方法
        return obj.currentStyle[name];
    }
};

// 定义一个函数来向一个元素添加指定的class属性值
/*参数:
  obj 要添加class属性的元素
  cn 要添加的class值*/
function addClass(obj, cn) {
    // 检查obj中是否含有cn
    if (!hasClass(obj, cn)) {
        // 如果没有cn则添加cn(添加一个空格防止直接拼串)
        obj.className += " " + cn;
    }
};
// 判断一个元素中是否含有指定的class属性值
/*参数
  obj 要添加class属性的元素
  cn 要添加的class值
  如果有该class值则返回true,否则返回false*/
function hasClass(obj, cn) {
    // 判断obj中是否有cn这个class值
    // 创建一个正则表达式
    // var reg = /\bb2\b/;
    var reg = new RegExp("\\b" + cn + "\\b");
    return reg.test(obj.className);
};
// 删除一个元素中指定的class属性
function removeClass(obj, cn) {
    // 创建一个正则表达式
    var reg = new RegExp("\\b" + cn + "\\b");
    // 删除class
    obj.className = obj.className.replace(reg, "");
};
// toggleClass用来切换一个类
// 如果元素中有指定类则删除,没有则添加
function toggleClass(obj, cn) {
    // 判断obj中是否含有cn
    if (hasClass(obj, cn)) {
        // 有则删除
        removeClass(obj, cn);
    } else {
        // 没有则添加
        addClass(obj, cn);
    }
};
5、二级菜单完善
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <link rel="stylesheet" href="css/sdmenu.css">
    <script src="js/tools.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        a,img {
            border: 0;
            text-decoration: none;
        }
        body {
            font: 12px/180%;
        }
    </style>
    <script>
        window.onload = function () {
            //   每个菜单都是一个div,当div具有collapsed这个类时,div就是折叠状态,没有则为展开状态
            // 点击菜单切换菜单的显示状态
            // 获取所以class为menuSpan的元素
            var menuSpan = document.querySelectorAll(".menuSpan");
            // 定义一个变量来保存当前打开的菜单
            var openDiv = menuSpan[0].parentNode;
            // 为span绑定单击响应函数
            for (var i = 0; i < menuSpan.length; i++) {
                menuSpan[i].onclick = function () {
                    // this代表当前点击的span
                    // 获取span的父元素
                    var parentDiv = this.parentNode;
                    // 关闭parenDiv,给div添加collapsed值,toggleClass判断div中是否有collapsed,有则删除,无则添加
                    toggleClass(parentDiv, "collapsed");
                    // 判断openDiv和parentDiv是否相同
                    if (openDiv != parentDiv && !hasClass(openDiv,"collapsed")) {
                        // 不相等才添加
                        // 打开菜单后给之前的菜单添加collapsed来关闭该菜单
                        // addClass(openDiv, "collapsed");
                        // 为了统一处理过渡动画,将addClass改为toggleClass
                        // 此处toggleClass()不需要有移除功能
                        toggleClass(openDiv, "collapsed");
                    }
                    // 修改openDiv为当前打开的菜单
                    openDiv = parentDiv;
                };
            }
        };
    </script>
</head>
<body>
    <div id="my_menu" class="sdmenu">
        <div>
            <span class="menuSpan">在线工具</span>
            <a href="#">图像优化</a>
            <a href="#">收藏夹图标生成器</a>
            <a href="#">邮件</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">支持我们</span>
            <a href="#">图像优化</a>
            <a href="#">收藏夹图标生成器</a>
            <a href="#">邮件</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">合作伙伴</span>
            <a href="#">图像优化</a>
            <a href="#">邮件</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">支持我们</span>
            <a href="#">图像优化</a>
            <a href="#">邮件</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
    </div>
</body>
</html>

二级菜单动画过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <link rel="stylesheet" href="css/sdmenu.css">
    <script src="js/tools.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        a,img {
            border: 0;
            text-decoration: none;
        }
        body {
            font: 12px/180%;
        }
    </style>
    <script>
        window.onload = function () {
            //   每个菜单都是一个div,当div具有collapsed这个类时,div就是折叠状态,没有则为展开状态
            // 点击菜单切换菜单的显示状态
            // 获取所以class为menuSpan的元素
            var menuSpan = document.querySelectorAll(".menuSpan");
            // 定义一个变量来保存当前打开的菜单
            var openDiv = menuSpan[0].parentNode;
            // 为span绑定单击响应函数
            for (var i = 0; i < menuSpan.length; i++) {
                menuSpan[i].onclick = function () {
                    // this代表当前点击的span
                    // 获取span的父元素
                    var parentDiv = this.parentNode;
                    // 切换菜单的显示状态
                    toggleMenu(parentDiv);
                    // 判断openDiv和parentDiv是否相同
                    if (openDiv != parentDiv && !hasClass(openDiv, "collapsed")) {
                        // 不相等才添加
                        // 打开菜单后给之前的菜单添加collapsed来关闭该菜单
                        // addClass(openDiv, "collapsed");
                        // 为了统一处理过渡动画,将addClass改为toggleClass
                        // 此处toggleClass()不需要有移除功能
                        // toggleClass(openDiv, "collapsed");
                        // 切换菜单的显示状态
                        toggleMenu(openDiv);
                    }
                    // 修改openDiv为当前打开的菜单
                    openDiv = parentDiv;
                };
            }
            // 用来切换菜单折叠和显示状态
            function toggleMenu(obj) {
                // 在切换类之前获取元素的高度
                var begin = obj.offsetHeight;
                // 切换parenDiv的显示,给div添加collapsed值,toggleClass判断div中是否有collapsed,有则删除,无则添加
                toggleClass(obj, "collapsed");
                // 在切换类之后获取一个高度
                var end = obj.offsetHeight;
                // console.log("begin=" + begin + ",end" + end);
                // 动画效果就是从begin向end过渡
                // 将元素的高度充值为begin
                obj.style.height = begin + "px";
                // 执行动画,从begin向end过渡
                move(obj, "height", end, 10, function () {
                    // 动画执行完毕,内联样式没有存在的意义,需要删除
                    obj.style.height = "";
                });
            };
        };
    </script>
</head>
<body>
    <div id="my_menu" class="sdmenu">
        <div>
            <span class="menuSpan">在线工具</span>
            <a href="#">图像优化</a>
            <a href="#">收藏夹图标生成器</a>
            <a href="#">邮件</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">支持我们</span>
            <a href="#">图像优化</a>
            <a href="#">收藏夹图标生成器</a>
            <a href="#">邮件</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">合作伙伴</span>
            <a href="#">图像优化</a>
            <a href="#">邮件</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">支持我们</span>
            <a href="#">图像优化</a>
            <a href="#">邮件</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
    </div>
</body>
</html>

五、JSON

<script>
        // - JS中的对象只有JS认识,其他的语言都不认识
        // JSON就是一个特殊格式的字符串,这个字符串可以被任何语言所识别
        //   并可以转换为任意语言中的对象,JSON在开发中主要用来进行数据的交互
        // JSON
        //   - JavaScript Object Notation   JS对象表示法
        //   - JSON和JS对象的格式一样,只不过JSON字符串中的属性名必须加双引号,其他的和JS语法一样
        /* 
        JSON分类:
            1、对象{}
            2、数组[]
        JSON中允许的值:
            1、字符串
            2、数值
            3、布尔值
            4、null
            5、对象
            6、数组
        */
        // 创建一个对象
        var obj = '{ "name": "孙悟空", "age": 18, "gender": "男" }';
        // 创建一个数组
        var arr = '[1,2,3,"hello",true]';
        // console.log(obj);
        var onj2 = '{"arr":[1,2,3]}';
        var arr2 = '[{ "name": "孙悟空", "age": 18},{ "name": "孙悟空", "age": 18}]'
        /*
        将JSON字符串转换为JS中的对象
            在JS中提供了一个工具类叫做JSON
            这个对象可以将JSON转为JS对象,也可以将JS对象转换为JSON
        */
        var json = '{ "name": "孙悟空", "age": 18, "gender": "男" }';
        //JSON -->  js对象
            // JSON.parse()可以将JSON字符串转为JS对象
            // 它需要一个JSON字符串作为参数,会将该字符串转换为JS对象
        var o = JSON.parse(json);
        var o2 = JSON.parse(arr);
        // console.log(o.gender);
        // console.log(02[1]);
        var obj3 = {name:"猪八戒",age:28,gender:"男"};
        // JS对象 -->JSON
            // JSON.stringify()可以将一个JS对象转换为JSON字符串
            // 需要一个JS对象作为参数,会返回一个JSON字符串
        var str = JSON.stringify(obj3);
        console.log(str);
        // JSON这个对象在IE7及以下不支持,会报错
        // 必须加"",不然会报错
        var str3 = '{"name":"孙悟空","age":18,"gender":"男"}';
        JSON.parse(str3);
    </script>

JSON的兼容性

<!-- 如果需要兼容IE7及以下,则可以通过一个外部JS文件来处理 -->
    <script src="js/json2.js"></script>
    <script>
        var str = '{ "name": "孙悟空", "age": 18, "gender": "男" }';
        // eval()可以用来执行一段字符串形式的JS代码,并返回执行结果
        // 如果使用eval()执行的字符串中含有{},它会将{}当成是代码块
        //   如果不希望将其当成代码块解析,则需在字符串前后各加一个()
        // eval()这个功能很强大,可以直接执行一个字符串中的JS代码
        //   但是在开发中尽量不要使用,性能较差,且具有安全隐患(用户也可以传入JS代码)
        var str2 = "alert('hello')";
        // eval(str2);
        var obj = eval("("+str+")");
        // console.log(obj);
    </script>
12
打赏
gzh

评论 (0)

图片
私语
取消
文章目录