10-JS-BOM

最新推荐文章于 2024-07-15 14:11:16 发布
最新推荐文章于 2024-07-15 14:11:16 发布
阅读量183 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript html css 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hermione_m/article/details/124022783
版权

目录

BOM

​History

​Location

​定时器

练习1：自动切换图片

练习2：控制上下左右键移动DIV的练习（具体参考 事件对象-键盘事件）

​

延时调用

​定时器的应用

定时器的应用01版代码：

定时器的应用02版：

定时器的应用完成版 + 提取版（将编写在html文件的某些方法提取出来封装到一个js文件中）js工具代码：

​练习：轮播图页面

​类的操作

​练习：二级菜单的完成基本功能

​JSON

BOM

  1. 浏览器对象模型
  2. BOM可以使我们通过JS来操作浏览器
  3. 在BOM中为我们提供了一组对象用来完成对浏览器的操作
  4. BOM对象
    1. Window
      1. 代表的使整个浏览器的窗口，同时window也是网页中的全局对象
      2. 全局作用域中的那些变量都会作为它的属性保存，函数都会作为它的方法保存
    2. Navigator
      1. 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
    3. Location
      1. 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
    4. History
      1. 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
        1. 由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页而且该操作只在当此访问时有效
    5. Screen
      1. 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
    6. 这些BOM对象在浏览器中都是作为window对象的属性保存的
      1. 可以通过window对象来使用，也可以直接使用
      2. console.log(window.navigator) 或者 console.log(navigator)
  1. 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
  2. 由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
  3. 一般我们只会使用userAgent来判断浏览器的信息
  4. 如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象， 来判断浏览器的信息。 比如：ActiveXObject
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigator</title>
    <script>
        /*
            Navigator
                - 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
                - 由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
                - 一般我们只会使用userAgent来判断浏览器的信息
​
        */
        var ua = navigator.userAgent;
        // alert(navigator.appName);
        alert(ua);
        // 检查userAgent里面有没有Chrome
        if(/Chrome/i.test(ua)){
            alert("俺是谷歌浏览器呢~~~");
        }else if(/firefox/i.test(ua)){
            alert("俺是火狐！！");
        }else if(/msie/i.test(ua)){
            alert("俺是IE捏！！");
            // 在IE11中已经将微软和工E相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别-一个浏览器是否是IE了
        }else if("ActiveXObject" in window){
            alert("你是IE11，我抓到你了~");
        }
​
        /*
            如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象， 来判断浏览器的信息
            比如：ActiveXObject
        */
        // console.log(ActiveXObject)
        // if(window.ActiveXObject){//如果window.ActiveXObject存在，会自动转换成布尔值true
        //     alert("你是IE，我抓到你了~");
        // }else{
        //     alert("你不是IE~~~");
        // }
        // alert(!!window.ActiveXObject);//查看转换的布尔值
        //IE11存在window.ActiveXObject，但是，转换布尔值失败
​
        //我们可以检查该属性是否存在于window
        // alert("ActiveXObject" in window);
​
        // if("ActiveXObject" in window){
        //     alert("你是IE，我抓到你了~");
        // }else{
        //     alert("你不是IE~~~");
        // }
    </script>
</head>
<body>
    
</body>
</html>
​

​History

        对象可以用来操作浏览器向前或向后翻页

  1. length
    1. 属性，可以获取到当成访问的链接数量
  2. back( )
    1. 可以用来回退到上一个页面，作用和浏览器的回退按钮一样
  3. forward( )
    1. 可以跳转下一个页面，作用和浏览器的前进按钮一样
  4. go()
    1. 可以用来跳转到指定的页面
    2. 它需要一个整数作为参数
    3. 1: 表示向前跳转一个页面相当于forward())
    4. 2 : 表示向前跳转两个页面
    5. -1: 表示向后跳转一个责面 相当于back()
    6. - 2 : 表示向后跳转两个页面

练习：

history.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>History</title>
    <script>
        /*
            History
                对象可以用来操作浏览器向前或向后翻页
​
         */
        /*
            length
                属性，可以获取到当成访问的链接数量
         */
        // alert(history);
        // alert(history.length);
        window.onload = function(){
            //获取按钮对象
            var btn01 = document.getElementById("btn01");
            var btn02 = document.getElementById("btn02");
            var btn03 = document.getElementById("btn03");
            btn01.onclick = function(){
               /*
                back( )
                    可以用来回退到上一个页面，作用和浏览器的回退按钮一样
               */
              history.back();
            }
            btn02.onclick = function(){
                /*
                forward( )
                    可以跳转下一个页面，作用和浏览器的前进按钮一样
                */
                history.forward();
            }
            btn03.onclick = function(){
                /*
                go()
                    可以用来跳转到指定的页面
                    它需要一个整数作为参数
                    1:表示向前跳转一个页面相当于forward())
                    2 :表示向前跳转两个页面
                    -1:表示向后跳转一个责面 相当于back()
                    - 2 :表示向后跳转两个页面
​
                 */
                history.go(-2);
            }
        }
    </script>
</head>
<body>
    <button id="btn01">退回</button>
    <button id="btn02">前进</button><br>
    <button id="btn03">往后跳转两个页面</button><br>
​
    <a href="./test02.html">去TEXT02</a>
</body>
</html>

text01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>TEXT01</h1>
    <a href="./test02.html">去TEXT02</a>
</body>
</html>

text02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>TEXT02</h1>
    <a href="./02-History.html">去02-History.html</a>
</body>
</html>

​Location

  1. Location
    1. 该对象中封装了浏览器的地址栏的信息
  2. 如果直接打印location,则可以获取到地址栏的信息(当前页面的完整的路径)
    1. 例：alert(location);
  3. 直接修改location与超链接有相似的作用
    1. 如果直接将location属性修改为一个完整的路径，或相对路径
    2. 则我们页面会自动跳转到该路径,并且会生成相应的历史记录
    3. 例如：location = "http://www.baidu.com";
  4. assign()
    1. 用来跳转到其他的页面，作用和直接修改location一样
    2. 例如：location.assign("http://www.baidu.com");
  5. reload( )
    1. 用于重新加载当前页面，作用和刷新按钮一样
    2. 由于个别浏览器使用这个方法刷新之后会缓存文本框的内容
      1. 如果在方法中传递一个true, 作为参数，则会强制清空缓存刷新页面
    3. 例：location.reload();
  6. replace()
    1. 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
    2. 不会生成历史记录，不能使用回退按钮回退
    3. location.replace("https://www.baidu.com");（没有要跳转的网址时，也得写引号）

练习代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>History</title>
    <script>
        /**
         * -1-
         * Location
         *  该对象中封装了浏览器的地址栏的信息
        */
        window.onload = function(){
            //获取按钮对象
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){
                // -2- 如果直接打印location,则可以获取到地址栏的信息(当前页面的完整的路径)
                // alert(location);
                
                // -3- 直接修改location与超链接有相似的作用
                /**
                 * 如果直接将location属性修改为一个完整的路径，或相对路径
                 *  则我们页面会自动跳转到该路径,并且会生成相应的历史记录
                */
                // location = "http://www.baidu.com";
​
                /**
                 * -4-
                 *  assign()
                 *      用来跳转到其他的页面，作用和直接修改location-样
                */
                // location.assign("http://www.baidu.com");
​
                /**
                 * -5-
                 *  reload( )
                 *      - 用于重新加载当前页面，作用和刷新按钮一样
                 *      - 由于个别浏览器使用这个方法刷新之后会缓存文本框的内容
                 *          - 如果在方法中传递一个true, 作为参数，则会强制清空缓存刷新页面
                */
                // location.reload();
​
                /**
                 * -6-
                 *  replace()
                 *      - 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
                 *      - 不会生成历史记录，不能使用回退按钮回退
                */
                // location.replace("");
                location.replace("https://www.baidu.com");
            }
        }
    </script>
</head>
<body>
    <button id="btn01">点我一下</button>
    <h1>Location</h1>
    <input type="text">
    <a href="./01-Navigator.html">去01-Navigator.html</a>
</body>
</html>

​定时器

  • JS的程序的执行速度是非常非常快的
  • 如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
  1. setInterval( )
    1. 定时调用
    2. 可以将一个函数，每隔一段时间执行一-次
    3. 参数:
      1. 回调函数，该函数会每隔一段时间被调用一 次
      2. 每次调用间隔的时间，单位是毫秒
    4. 返回值：
      1. 返回一个Number类型的数据
      2. 这个数字用来作为定时器的唯一 标识
  2. clearInterval( )
    1. ​​​​​​​可以用来关闭一个定时器
    2. 方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
    3. 如果参数是一个有效的定时器的标识，则停止对应的定时器
    4. 如果参数不是一个有效的标识，则什么也不做
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时调用</title>
    <script>
        window.onload = function(){
            //获取count
            var count = document.getElementById("count");
​
           // 使count中的内容自动切换,希望看见其的变化过程
            /**
             *  JS的程序的执行速度是非常非常快的
             *  如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
            */
            // for( var i= 0;i<10;i++){
            //     count.innerHTML = i;
            // }            
​
            /*
                setInterval( )
                    - 定时调用
                    - 可以将一个函数，每隔一段时间执行一-次
                    - 参数:
                        1.回调函数，该函数会每隔一段时间被调用一 次
                        2.每次调用间隔的时间，单位是毫秒
                    - 返回值：
                        返回一个Number类型的数据
                        这个数字用来作为定时器的唯一标识
            */
           var num = 1;
           var temer = setInterval(function(){
                count.innerHTML = num++;
                if(num == 11){
                    clearInterval(temer);
                }
           },100);
​
           /*
            clearInterval( )可以用来关闭一个定时器
                方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
           */
        //    clearInterval(temer);
        }
    </script>
</head>
<body>
    <h1 id="count"></h1>
</body>
</html>

练习1：自动切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #dv {
            width: 400px;
            height: 300px;
            /* background-color: #fff; */
        }
        #img1 {
            width: 400px;
        }
    </style>
    <script>
        window.onload = function(){
            /*
                使图片可以自动切换
            */
            var img1 = document.getElementById("img1");
            var btn01 = document.getElementById("btn01");
            var btn02 = document.getElementById("btn02");
            
            //创建一个数组用来保存图片的路径
            var imgArr = ["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.jpg","./img/5.jpg","./img/6.jpg","./img/7.jpg","./img/8.jpg"]
            //创建一个变量用来保存当前图片的索引
            var index = 0;
​
            //定义一个变量用来保存定时器的标识
            var timer;
​
            btn01.onclick = function(){
                /*
                    目前，我们每点击一次按钮，就会开启一个定时器
                */
                //在开启定时器之前，需要将当前元素上的其他定时器关闭
                clearInterval(timer);
​
​
                //开启一个定时器来自动切换图片
                timer = setInterval(function(){
                    //使索引自增
                    index++;
​
                    //判断索引是否超过最大索引
                    // if(index>=(imgArr.length)){ 
                    //     //则将index设置为0
                    //     index = 0; 
                    // }
​
                    // index = index % imgArr.length;
                    index %= imgArr.length;     
​
                    //修改img1的路径
                    img1.src = imgArr[index];
                
                },1000);
            }
            btn02.onclick = function(){
                /*
​
                clearInterval( )可以接收任意参数，
                    如果参数是一个有效的定时器的标识，则停止对应的定时器
                    如果参数不是一个有效的标识，则什么也不做
                */
                clearInterval(timer);
            }
           
        }
    </script>
</head>
<body>
    <div id="dv">
        <img id="img1" src="./img/1.jpg" alt=""><br>
    </div>
  
    <button id="btn01">开始</button>
    <button id="btn02">停一下</button>
</body>
</html>

练习2：控制上下左右键移动DIV的练习（具体参考 事件对象-键盘事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: #bfc;
            position: absolute;
        }
    </style>
    <script>
        //使div可以根据方向键向不同的方向移动
        window.onload = function(){
​
            //定义一个变量，来表示移动的速度
            var speed = 10;
​
            //创建一个变量表示方向
            //通过修改dir来影响移动的方向
            var dir = 0;
​
            //开启一个定时器，来控制div的移动
            setInterval(function(){
                // console.log(event.keyCode);
                //左：37， 上：38， 右：39， 下：40
                switch(dir){
                    case 37:
                        // alert("向左"); left值减小
                        box1.style.left = box1.offsetLeft-speed+"px";
                        break;
                    case 38:
                        // alert("向上"); top值减小
                        box1.style.top = box1.offsetTop-speed+"px";
                        break;
                    case 39:
                        // alert("向右"); left值增大
                        box1.style.left = box1.offsetLeft+speed+"px";
                        break;
                    case 40:
                        // alert("向下"); top值增大
                        box1.style.top = box1.offsetTop+speed+"px";
                        break; 
                }
            },30);
​
            //获取id为box1的元素
            var box1 = document.getElementById("box1");
                            
            //为document绑定一个按键按下的事件
            document.onkeydown = function(event){
                event = event || window.event;
                //当用户按了ctrl以后，速度加快
                if(event.ctrlKey){
                    speed = 50;
                }else{
                    speed = 10;
                }
                //使dir等于按键的值
                dir = event.keyCode;
            }
​
            //当按键松开时，div不再移动
            document.onkeyup = function(){
                //设置方向为0
                dir = 0;
            }
        }
    </script>
</head>
<body>
    <div id="box1"></div>
</body>
</html>

​

延时调用

  1. 延时调用
    1. 延时调用指的是，一个函数不马上执行，隔一段时间之后才运行，而且只会执行一次
    2. 延时调用和定时调用的区别在于：定时调用会执行多次，而延时调用只会执行一次
    3. 延时调用和定时调用实际上是可以互相代替的，可以自己选择
  2. 语法：
    1. 开启延时调用：setTimeout()
    2. 关闭延时调用：clearTimeout()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>延时调用</title>
    <script>
        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>
​

​定时器的应用

定时器的应用01版代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器的应用01版</title>
    <style>
        * {
            margin:0;
            padding: 0;
        }
        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
        }
    </style>
    <script>
        window.onload = function(){
            //-1- 获取box1
            var box1 = document.getElementById("box1");
            //-2- 获取btn01
            var btn01 = document.getElementById("btn01"); 
            //-3- 点击按钮之后，使box1向右移动（left值增大）
            var timer;
            btn01.onclick = function(){
                //-5- 获取box1的left值
                //为了之后修改不同样式方便，我们使用getStyle方法来获取样式
                // var oldValue = getStyle(box1,"left");
​
                
​
                //在IE浏览器中如果如果没有指定或者说没有写这个值时，会显示auto
                // alert(oldValue);
                
                clearInterval(timer);
​
                //-4- 开启一个定时器，用来执行动画效果
                timer = setInterval(function(){
                    //-5- 获取box1的left值
                    //从取出来的属性值提取数字，使可计算
                    var oldValue = parseInt(getStyle(box1,"left"));
​
                    //-6- 在旧值上进行增加
                    var newValue = oldValue+10;
​
                    //-9- 判断newValue是否大于800px
                    if(newValue > 800){
                        newValue=800;
                    }
​
                    //-7- 将新值设置给box1
                    box1.style.left = newValue+"px";
​
                    //-8- 当元素移动到800px时，使其停止执行动画
                    if(newValue == 800){
                        //停止定时器
                        clearInterval(timer);
                    }
                },30);
            };
        };
​
        /*
          getStyle方法
​
            定义一个函数，用来获取指定元素的当前样式
            参数：
                obj 要获取样式的元素
                name 要获取的样式名
        */
        function getStyle(obj,name){
            //变量没找到直接报错,而对象的属性没找到则返回undefined;
​
            // if(getComputedStyle){
            if(window.getComputedStyle){
​
                //对象["属性名"] = 属性值;
                //正常浏览器的方式
                return  getComputedStyle(obj , null)[name];     
            }else{
                //IE8及以下的浏览器的方式
                return obj.currentStyle[name];
            }
            //与上面作用相同的代码还有
            return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
​
            //还有两一种方法，但这种方法不推荐常用，对于两中方式都适配的浏览器来说，更推荐有优先考虑getComputedStyle()方法
            // if(obj.currentStyle){
            //     return obj.currentStyle[name];
            // }else{
            //     return  getComputedStyle(obj , null)[name];     
            // }
        }
    </script>
</head>
<body>
    <button id="btn01">点击按钮之后box1向右移动</button>
    <br><br>
    <div id="box1"></div>
    <div  style="width: 0px; height:1000px ; border-left: 1px #000 solid;position: absolute; left: 800px;top: 0px;"></div>
</body>
</html>

定时器的应用02版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器的应用02版</title>
    <style>
        * {
            margin:0;
            padding: 0;
        }
        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
        }
    </style>
    <script>
        window.onload = function(){
​
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01"); 
            var btn02 = document.getElementById("btn02"); 
​
            //点击按钮之后，使box1向右移动（left值增大）
            btn01.onclick = function(){
                donghua(box1,800,30);
            };
​
            //点击按钮之后，使box1向左移动（left值减小）
            btn02.onclick = function(){
                donghua(box1,0,20);
​
            };
​
        };
        //定义一个变量记录定时器的标识
        var timer;
​
        //尝试创建一个函数用来执行这个简单动画
        /*
          参数：
            1.obj :要执行动画的对象
            2.target :执行动画的目标位置
            3.speed :移动的速度 （包含方向（正反：正右负左））(一般不直接写正负，因为无法判断目前位置)
           
        */
        function donghua(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是否大于800px
                // 丛800向0移动
                //向左移动时，需要判断newValue是否小于target
                //向右移动时，需要判断newValue是否大于target
                if(speed<0 && newValue < target||speed>0 && newValue >target){
                    newValue=target;
                }
                //-7- 将新值设置给box1
                obj.style.left = newValue+"px";
​
                //-8- 当元素移动到0px时，使其停止执行动画
                if(newValue == 0){
                    //停止定时器
                    clearInterval(timer);
                }
            },30);
        }
​
        /*
          getStyle方法
​
            定义一个函数，用来获取指定元素的当前样式
            参数：
                obj 要获取样式的元素
                name 要获取的样式名
        */
        function getStyle(obj,name){
            //变量没找到直接报错,而对象的属性没找到则返回undefined;
​
            // if(getComputedStyle){
            if(window.getComputedStyle){
​
                //对象["属性名"] = 属性值;
                //正常浏览器的方式
                return  getComputedStyle(obj , null)[name];     
            }else{
                //IE8及以下的浏览器的方式
                return obj.currentStyle[name];
            }
            //与上面作用相同的代码还有
            return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
​
            //还有两一种方法，但这种方法不推荐常用，对于两中方式都适配的浏览器来说，更推荐有优先考虑getComputedStyle()方法
            // if(obj.currentStyle){
            //     return obj.currentStyle[name];
            // }else{
            //     return  getComputedStyle(obj , null)[name];     
            // }
        }
    </script>
</head>
<body>
    <button id="btn01">box1向右移动</button>
    <button id="btn02">box1向左移动</button>
    <br><br>
    <div id="box1"></div>
    <div  style="width: 0px; height:1000px ; border-left: 1px #000 solid;position: absolute; left: 800px;top: 0px;"></div>
</body>
</html>

定时器的应用完成版 + 提取版（将编写在html文件的某些方法提取出来封装到一个js文件中）js工具代码：

03.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器的应用03版</title>
    <style>
        * {
            margin:0;
            padding: 0;
        }
        #box1 {
            background-color: red;
            left: 0px;
        }
        #box2 {
            background-color: #bfc;
            top: 200px;
        }
        #box1,
        #box2 {
            width: 100px;
            height: 100px;
            position: absolute;
        }
    </style>

    <!--引入自己外部封装的工具代码-->
    <script src="./tools.js"></script>

    <script>
        //定义一个变量记录定时器的标识
        /*
            目前我们的定时器的标识由全局变量timer保存，
                所有正在执行的定时器都在这个变量中保存
        */
        // var timer;
        //将创建的定时器函数和获取样式的函数放在一个外部文件中
        window.onload = function(){

            //获取box1,btn01,btn02
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01"); 
            var btn02 = document.getElementById("btn02"); 

            //点击按钮之后，使box1向右移动（left值增大）
            btn01.onclick = function(){
                donghua(box1,"left",800,10);
            };

            //点击按钮之后，使box1向左移动（left值减小）
            btn02.onclick = function(){
                donghua(box1,"left",0,10);
            };

            //获取box2,btn03,btn04
            var box2 = document.getElementById("box2");
            var btn03 = document.getElementById("btn03"); 
            var btn04 = document.getElementById("btn04"); 
            //点击按钮之后，使box1向右移动（left值增大）
            btn03.onclick = function(){
                donghua(box2,"left",800,20);
            };

            //点击按钮之后，使box1向左移动（left值减小）
            btn04.onclick = function(){
                donghua(box2,"left",0,20);
            };

            //测试按钮btn05
            var btn05 = document.getElementById("btn05");
            btn05.onclick = function(){
                // donghua(box2,"width",800,10);
                // donghua(box2,"top",800,10);
                // donghua(box2,"width",800,10,function(){
                //     alert("我执行完了~~~");
                // });
                donghua(box2,"width",800,10,function(){
                    donghua(box2,"height",400,10,function(){
                        donghua(box2,"top",0,10);
                    });
                });
            };
        };
    </script>
</head>
<body>
    <button id="btn01">box1向右移动</button>
    <button id="btn02">box1向左移动</button>
    <button id="btn03">box2向右移动</button>
    <button id="btn04">box2向左移动</button>
    <button id="btn05">测试按钮</button>
    <br><br>
    <div id="box1"></div>
    <div id="box2"></div>
    <div  style="width: 0px; height:1000px ; border-left: 1px #000 solid;position: absolute; left: 800px;top: 0px;"></div>
</body>
</html>

tools.js

//尝试创建一个函数用来执行这个简单动画
/*
参数：
1.obj :要执行动画的对象
2.attr :要执行动画的样式,比如：left top width height 
3.target :执行动画的目标位置
4.speed :移动的速度 （包含方向（正反：正右负左））(一般不直接写正负，因为无法判断目前位置)
5.callback  :回调函数,这个函数将会在动画执行完毕之后再执行
​
*/
function donghua(obj,attr,target,speed,callback){
    //关闭上一个定时器
    clearInterval(obj.timer);
​
    //获取元素目前的位置
    var current = parseInt(getStyle(obj,attr));
​
    //判断速度的正负值
    //如果从0->800,则speed为正
    //如果从800->0，则speed为负
    if(current > target){
        //此时速度应为负值
        speed = -speed;
    };
​
    // 开启一个定时器，用来执行动画效果
    // 向执行动画的对象中添加一个timer属性，用来保存
    obj.timer = setInterval(function(){
        // 获取box1的left值
        //从取出来的属性值提取数字，使可计算
        var oldValue = parseInt(getStyle(obj,attr));
​
        //在旧值上进行增加
        var newValue = oldValue + speed;
​
        //判断newValue是否大于800px
        // 丛800向0移动
        //向左移动时，需要判断newValue是否小于target
        //向右移动时，需要判断newValue是否大于target
        if(speed<0 && newValue < target||speed>0 && newValue >target){
            newValue=target;
        }
        //-7- 将新值设置给box1
        // obj.style.left = newValue+"px";
        obj.style[attr] = newValue+"px";
​
        //-8- 当元素移动到0px时，使其停止执行动画
        if(newValue == target){
            //停止定时器
            clearInterval(obj.timer);
            //动画执行完毕之后，调用回调函数
            //有回调函数就执行，没有就不执行
            callback && callback();
        }
    },30);
}
​
/*
    getStyle方法
​
    定义一个函数，用来获取指定元素的当前样式
    参数：
        obj 要获取样式的元素
        name 要获取的样式名
*/
function getStyle(obj,name){
    //变量没找到直接报错,而对象的属性没找到则返回undefined;
​
    // if(getComputedStyle){
    if(window.getComputedStyle){
​
        //对象["属性名"] = 属性值;
        //正常浏览器的方式
        return  getComputedStyle(obj , null)[name];     
    }else{
        //IE8及以下的浏览器的方式
        return obj.currentStyle[name];
    }
    //与上面作用相同的代码还有
    return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
​
    //还有两一种方法，但这种方法不推荐常用，对于两中方式都适配的浏览器来说，更推荐有优先考虑getComputedStyle()方法
    // if(obj.currentStyle){
    //     return obj.currentStyle[name];
    // }else{
    //     return  getComputedStyle(obj , null)[name];     
    // }
}
​
​
​
​
​
​
//定义一个函数，用来向一个元素中添加指定的class属性值
/*
    -1-
    参数：
        1. obj 要添加class属性的元素
        2. cn 要添加的class值
*/
function addClass(obj,cn){
    // 检查obj中是否含有cn
    if(!hasClass(obj,cn)){
        obj.className += " "+cn;   
    } 
};
​
/*
    -2-
    判断一个元素中是否含有指定的class属性值
        如果有该class，则返回true，没有则返回false
*/
function hasClass(obj,cn){
    //判断obj中又没有cn class
    //创建一个正则表达式
    // return obj.className == cn;
    // var reg = /\bb2\b/;
    var reg = new RegExp("\\b"+cn+"\\b");
    // alert(reg);
​
    return reg.test(obj.className);
}
​
/*
    -3-
    删除一个元素中的指定的class属性
*/
function removeClass(obj,cn){
    //思路：将cn替换成空字符串
    // 创建一个正则表达式
    var reg = new RegExp("\\b"+cn+"\\b");
​
    // 删除class
    obj.className = obj.className.replace(reg,"");
​
}
​
/*
    -4-
    toggleClass可以用来切换一个类，
        如果元素中具有该类，则删除
        如果元素中没有该类，则添加
*/
function toggleClass(obj,cn){
    // 判断obj中是否含有cn
    if(hasClass(obj,cn)){
        // 有，则删除
        removeClass(obj,cn);
    }else{
        // 没有，则添加
        addClass(obj,cn);
    }
}

​练习：轮播图页面

（取代码时记得添加自己的图片哦！）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器的应用02版</title>
    <style>
        * {
            margin:0;
            padding: 0;
        }
        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
        }
    </style>
    <script>
        window.onload = function(){
​
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01"); 
            var btn02 = document.getElementById("btn02"); 
​
            //点击按钮之后，使box1向右移动（left值增大）
            btn01.onclick = function(){
                donghua(box1,800,30);
            };
​
            //点击按钮之后，使box1向左移动（left值减小）
            btn02.onclick = function(){
                donghua(box1,0,20);
​
            };
​
        };
        //定义一个变量记录定时器的标识
        var timer;
​
        //尝试创建一个函数用来执行这个简单动画
        /*
          参数：
            1.obj :要执行动画的对象
            2.target :执行动画的目标位置
            3.speed :移动的速度 （包含方向（正反：正右负左））(一般不直接写正负，因为无法判断目前位置)
           
        */
        function donghua(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是否大于800px
                // 丛800向0移动
                //向左移动时，需要判断newValue是否小于target
                //向右移动时，需要判断newValue是否大于target
                if(speed<0 && newValue < target||speed>0 && newValue >target){
                    newValue=target;
                }
                //-7- 将新值设置给box1
                obj.style.left = newValue+"px";
​
                //-8- 当元素移动到0px时，使其停止执行动画
                if(newValue == 0){
                    //停止定时器
                    clearInterval(timer);
                }
            },30);
        }
​
        /*
          getStyle方法
​
            定义一个函数，用来获取指定元素的当前样式
            参数：
                obj 要获取样式的元素
                name 要获取的样式名
        */
        function getStyle(obj,name){
            //变量没找到直接报错,而对象的属性没找到则返回undefined;
​
            // if(getComputedStyle){
            if(window.getComputedStyle){
​
                //对象["属性名"] = 属性值;
                //正常浏览器的方式
                return  getComputedStyle(obj , null)[name];     
            }else{
                //IE8及以下的浏览器的方式
                return obj.currentStyle[name];
            }
            //与上面作用相同的代码还有
            return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
​
            //还有两一种方法，但这种方法不推荐常用，对于两中方式都适配的浏览器来说，更推荐有优先考虑getComputedStyle()方法
            // if(obj.currentStyle){
            //     return obj.currentStyle[name];
            // }else{
            //     return  getComputedStyle(obj , null)[name];     
            // }
        }
    </script>
</head>
<body>
    <button id="btn01">box1向右移动</button>
    <button id="btn02">box1向左移动</button>
    <br><br>
    <div id="box1"></div>
    <div  style="width: 0px; height:1000px ; border-left: 1px #000 solid;position: absolute; left: 800px;top: 0px;"></div>
</body>
</html>
​

​类的操作

  1. 我们可以通过修改元素的class属性来间接的修改样式
  2. 这样一来，我们只需要修改一次，即可同时修改多个样式，
    1. 浏览器只需要重新渲染页面一次，性能比较好，
    2. 并且这种方式，可以使表现和行为进一步的分离

小练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类的操作</title>
    <style>
        .b1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .b2 {
            height: 200px;
            background-color: yellow;
        }
    </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 = "yellow";
​
                /*
                    我希望一行代码能同时修改多个样式
                */
                
                //修改box的class属性
                /*
                我们可以通过修改元素的class属性来间接的修改样式
                这样一来，我们只需要修改一次，即可同时修改多个样式，
                    浏览器只需要重新渲染页面一次，性能比较好，
                    并且这种方式，可以使表现和行为进一步的分离
​
                */
                // box.className = "b2";
                // box.className += " "+ "b2";  //加等于空格和b2,否则b2的值将b1完全覆盖或者直接产生错误
                //也可以写成
                // box.className += " b2";  
​
                // 添加class
                // addClass(box,"b2");
​
                // alert(hasClass(box,"b2"));
​
                //移除class值
                // removeClass(box,"b2");
                toggleClass(box,"b2");
            };
        };
        //定义一个函数，用来向一个元素中添加指定的class属性值
        /*
         -1-
            参数：
                1. obj 要添加class属性的元素
                2. cn 要添加的class值
        */
        function addClass(obj,cn){
            // 检查obj中是否含有cn
            if(!hasClass(obj,cn)){
                obj.className += " "+cn;   
            } 
        };
​
        /*
          -2-
            判断一个元素中是否含有指定的class属性值
                如果有该class，则返回true，没有则返回false
        */
        function hasClass(obj,cn){
            //判断obj中又没有cn class
            //创建一个正则表达式
            // return obj.className == cn;
            // var reg = /\bb2\b/;
            var reg = new RegExp("\\b"+cn+"\\b");
            // alert(reg);
​
            return reg.test(obj.className);
        }
​
        /*
          -3-
            删除一个元素中的指定的class属性
        */
        function removeClass(obj,cn){
            //思路：将cn替换成空字符串
            // 创建一个正则表达式
            var reg = new RegExp("\\b"+cn+"\\b");
​
            // 删除class
            obj.className = obj.className.replace(reg,"");
​
        }
​
        /*
          -4-
            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>
    <br><br>
    <div id="box" class = "b1 b2"></div>
</body>
</html>
​

​练习：二级菜单的完成基本功能

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级菜单</title>
    <link rel="stylesheet" href="./13.css">
    <script src="./tools.js"></script>
    <script>
        window.onload = function(){
            //获取menuSpan
            var menuS = document.getElementsByClassName("menuSpan");
            var my_menu = document.getElementById("my_menu");
            var openDiv = menuS[0].parentNode;
            for(var i=0;i<menuS.length;i++){
                menuS[i].onclick = function(){
                    var parentDiv = this.parentNode;
                    // 切换菜单的显示状态
                    toggleMenu(parentDiv);
                   
                    if(openDiv!=parentDiv && !hasClass(openDiv,"collapsed")){
                        //打开菜单之后，关闭之前的菜单
                        //为了可以统一处理动画过渡效果，我们希望在这将addClass改位toggleClass
                        // addClass(openDiv,"collapsed");
                        //此处的toggleClass不需要有移除的功能
                        // toggleClass(openDiv,"collapsed");
                        toggleMenu(openDiv);
​
                    }
                    //修改当前openDiv为当前打开菜单
                    openDiv = parentDiv;
​
                }
            }
            /*
                用来切换菜单的折叠和显示状态
            */
            function toggleMenu(obj){
                //切换类之前，获取元素的高度
                var begin = obj.offsetHeight;
​
                //切换parentDiv 的显示
                toggleClass(obj,"collapsed");
​
                //切换类之后，获取元素的高度
                var end = obj.offsetHeight;
                // console.log("b="+begin+";e="+end);
                /*动画效果，就是将高度从begin向end过渡
                由于也米娜跳转的极快，我们可能还没来得及执行动画，页面就已经跳转成功。
                我们需要先将高度重新置回begin
                */
                obj.style.height = begin + "px";
​
                // 执行动画，从begin向end过渡
                donghua(obj,"height",end,10,function(){
                    //动画执行完毕，删除内联样式
                    obj.style.height = "";
                });
​
​
            }
        }
    </script>
</head>
​
<body>
    <div id="my_menu" class="sdmenu">
        <div>
            <span class="menuSpan">在线工具</span>
            <span>
                <a href="#">图像优化</a>
                <a href="#">收藏夹图标生成器</a>
                <a href="#">邮件</a>
                <a href="#">htaccess密码</a>
                <a href="#">梯度图像</a>
                <a href="#">按钮生成器</a> 
            </span>
           
        </div>
        <div class="collapsed">
            <span class="menuSpan">支持我们</span>
            <span>
                <a href="#">推荐我们</a>
                <a href="#">链接我们</a>
                <a href="#">网络资源</a>
            </span>
            
        </div>
        <div class="collapsed">
            <span class="menuSpan">合作伙伴</span>
            <span>
                <a href="#">JavaScript工具包</a>
                <a href="#">CSS驱动</a>
                <a href="#">CodingForums</a>
                <a href="#">CSS例子</a>   
            </span>
           
        </div>
        <div class="collapsed">
            <span class="menuSpan">测试电流</span>
            <span>
                <a href="#">Current or not</a>
                <a href="#">Current or not</a>
                <a href="#">Current or not</a>
                <a href="#">Current or not</a>
            </span>
        </div>
​
    </div>
</body>
</html>

13.css

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
​
body {
    font: 12px/180% Arial,Helvetica,sans-serif,"新宋体";
}
a {
    text-decoration: none;
    display: block;
}
​
#my_menu div{
    position: relative;   
    width: 150px;
    background-color: red;
    text-align: center;
    border: 1px #ccc solid;
    margin-top: 2px;
    display: block;
}
#my_menu div a:first-child {
    margin-top: 25px;
}
.menuSpan {
    width: 100%;
    height: 25px;
    position: absolute;
    background-color: yellow;
    display: block;
}
a {
    display: block;
    border: 1px #ccc solid;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: green;
}
.collapsed {
    height: 25px;
    overflow: hidden;
}
tools.js
//尝试创建一个函数用来执行这个简单动画
/*
参数：
1.obj :要执行动画的对象
2.attr :要执行动画的样式,比如：left top width height 
3.target :执行动画的目标位置
4.speed :移动的速度 （包含方向（正反：正右负左））(一般不直接写正负，因为无法判断目前位置)
5.callback  :回调函数,这个函数将会在动画执行完毕之后再执行
​
*/
function donghua(obj,attr,target,speed,callback){
    //关闭上一个定时器
    clearInterval(obj.timer);
​
    //获取元素目前的位置
    var current = parseInt(getStyle(obj,attr));
​
    //判断速度的正负值
    //如果从0->800,则speed为正
    //如果从800->0，则speed为负
    if(current > target){
        //此时速度应为负值
        speed = -speed;
    };
​
    // 开启一个定时器，用来执行动画效果
    // 向执行动画的对象中添加一个timer属性，用来保存
    obj.timer = setInterval(function(){
        // 获取box1的left值
        //从取出来的属性值提取数字，使可计算
        var oldValue = parseInt(getStyle(obj,attr));
​
        //在旧值上进行增加
        var newValue = oldValue + speed;
​
        //判断newValue是否大于800px
        // 丛800向0移动
        //向左移动时，需要判断newValue是否小于target
        //向右移动时，需要判断newValue是否大于target
        if(speed<0 && newValue < target||speed>0 && newValue >target){
            newValue=target;
        }
        //-7- 将新值设置给box1
        // obj.style.left = newValue+"px";
        obj.style[attr] = newValue+"px";
​
        //-8- 当元素移动到0px时，使其停止执行动画
        if(newValue == target){
            //停止定时器
            clearInterval(obj.timer);
            //动画执行完毕之后，调用回调函数
            //有回调函数就执行，没有就不执行
            callback && callback();
        }
    },30);
}
​
/*
    getStyle方法
​
    定义一个函数，用来获取指定元素的当前样式
    参数：
        obj 要获取样式的元素
        name 要获取的样式名
*/
function getStyle(obj,name){
    //变量没找到直接报错,而对象的属性没找到则返回undefined;
​
    // if(getComputedStyle){
    if(window.getComputedStyle){
​
        //对象["属性名"] = 属性值;
        //正常浏览器的方式
        return  getComputedStyle(obj , null)[name];     
    }else{
        //IE8及以下的浏览器的方式
        return obj.currentStyle[name];
    }
    //与上面作用相同的代码还有
    return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
​
    //还有两一种方法，但这种方法不推荐常用，对于两中方式都适配的浏览器来说，更推荐有优先考虑getComputedStyle()方法
    // if(obj.currentStyle){
    //     return obj.currentStyle[name];
    // }else{
    //     return  getComputedStyle(obj , null)[name];     
    // }
}
​
//定义一个函数，用来向一个元素中添加指定的class属性值
/*
    -1-
    参数：
        1. obj 要添加class属性的元素
        2. cn 要添加的class值
*/
function addClass(obj,cn){
    // 检查obj中是否含有cn
    if(!hasClass(obj,cn)){
        obj.className += " "+cn;   
    } 
};
​
/*
    -2-
    判断一个元素中是否含有指定的class属性值
        如果有该class，则返回true，没有则返回false
*/
function hasClass(obj,cn){
    //判断obj中又没有cn class
    //创建一个正则表达式
    // return obj.className == cn;
    // var reg = /\bb2\b/;
    var reg = new RegExp("\\b"+cn+"\\b");
    // alert(reg);
​
    return reg.test(obj.className);
}
​
/*
    -3-
    删除一个元素中的指定的class属性
*/
function removeClass(obj,cn){
    //思路：将cn替换成空字符串
    // 创建一个正则表达式
    var reg = new RegExp("\\b"+cn+"\\b");
​
    // 删除class
    obj.className = obj.className.replace(reg,"");
​
}
​
/*
    -4-
    toggleClass可以用来切换一个类，
        如果元素中具有该类，则删除
        如果元素中没有该类，则添加
*/
function toggleClass(obj,cn){
    // 判断obj中是否含有cn
    if(hasClass(obj,cn)){
        // 有，则删除
        removeClass(obj,cn);
    }else{
        // 没有，则添加
        addClass(obj,cn);
    }
}

​JSON

  1. JSON
    1. JS中的对象只有JS自己认识，其他语言都不认识
    2. JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别
      1. 并且可以转换为任意语言中的对象，JSON在开发中主要用来做数据的交互
  2. JSON
    1. JavaScript Object Notation JS对象表示法
    2. JSON和JS对象的格式一样，只不过除了JSON字符串中的属性名必须加双引号其余与JS语法一致
  3. JSON分类：

    • 对象 {}

    • 数组 []

  4. JSON中允许的值，

    1. 字符串
    2. 数值
    3. 布尔值
    4. null
    5. 对象（普通对象，不包括函数）
    6. 数组
  5. JSON数据--->JS对象
    1. JSON.parse();
      1. 可以将JSON字符串转换为JS对象
      2. 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回
  6. JS对象---->JSON数据
    1. JSON.stringify();
      1. 可以将一个JS对象转换为JSON字符串
      2. 需要一个JS对象作为参数，会返回一个JSON字符串
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>json</title>
    <!-- 
        如果需要兼容IE7及以下的JSON操作，则可以通过引入一个外部的j s文件来处理
​
     -->
    <script>
      
        // 创建一个对象
        // var obj = {"name":"马嘉琪","age":19,"gender":"男"};
        var obj = '{"name":"马嘉琪","age":19,"gender":"男"}';
        // console.log(obj);
        var arr = '[1,2,3,"hello"]';
        console.log(obj);
        console.log(arr);
​
​
​
        /*
            将JSON字符串转换为JS中的对象
                在JS中，为我们提供了一个工具类，就叫JSON
                这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON
        */
        console.log(JSON);
        var obj = '{"name":"马嘉琪","age":19,"gender":"男"}';
        var arr = '[1,2,3,"hello"]';
​
        // 将JSON--->JS对象
        /* 
            JSON.parse();
                - 可以将JSON字符串转换为JS对象
                - 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回
        */
        var result = JSON.parse(obj);
        var result2 = JSON.parse(arr);
​
        console.log(result);
        console.log(result2);
​
​
        var obj2 = '{"name":"马嘉琪","age":19,"gender":"男"}';
        var arr2 = '[1,2,3,"hello"]';
        // 将JS对象--->JSON
        /*
            JSON.stringify()
                - 可以将一个JS对象转换为JSON字符串
                - 需要一个JS对象作为参数，会返回一个JSON字符串
        */
        var result = JSON.stringify(obj2);
        var result2 = JSON.stringify(arr2);
​
        console.log(result);
        console.log(result2);
​
        /*
        JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中不支持，所以在这些浏览器中调用时会报错
        */
    </script>
</head>
<body>
    
</body>
</html>
@1932
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML----JavaScript操作对象BOM对象
zhoutong2323的博客
01-02 833
BOM（浏览器对象模型）是JavaScript中的一个重要概念，它提供了一组用于控制浏览器窗口和页面内容的对象和方法。弹出新的浏览器窗口 移动、关闭浏览器窗口以及调整窗口的大小页面的前进、后退。
gulp-bom:将UTF-8 BOM添加到文件
05-26
口香糖将添加到文件从维基百科： Unicode标准允许使用UTF-8中的BOM，但既不需要也不建议使用它。 字节顺序在UTF-8中没有意义。... src ( 'app.js' ). pipe ( bom ( ) ). pipe ( gulp . dest ( 'dist' ) )) ;
js中的BOM操作(一)
linglingzi001的博客
03-22 318
JavaScript中的BOM操作 BOM：浏览器对象模型（Browser Object Model，简称 BOM）提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作 一、Window对象 浏览器窗口 特点 1.对于全局变量或全局方法，在取值或调用时可以省略 var a = 10; console.log(a); //10 consol...
JS中的BOM 详解
m0_63574519的博客
06-14 6262
BOM：Browser Object Model，浏览器对象模型，提供一系列与浏览器相关的信息。BOM对象：分为window对象和window子对象（screen对象，location对象，navigator对象，history对象）。1.window对象window对象是BOM顶层对象。window对象是JS访问浏览器窗口的一个接口window对象是一个全局对象,声明的所有的全局变量，全局方法函数最终都是window对象的属性或者方法。其他window方法：window.open() ：打开一个新的浏览器
js---javascript BOM
weixin_46218101的博客
11-14 447
事件通常与函数配合使用，这样我们可以通过发生的事件来驱动函数执行. 常见事件: 事件绑定 在javascript中事件经常与函数一起使用，那么我们介绍一下怎样将一个事件与函数绑定到一起，简单说，就是某个事件被触发后，函数如果被调用。 事件的三要素：事件、事件源、响应行为 onclick事件 ...
2020.0510--BOM
weixin_46579829的博客
05-10 138
BOM： 一：什么是BOM 1：概念： BOM：浏览器对象模型，是个模型，这个模型由一个对象window来体现（具象） - 作用： - 提供了ES和页面的运行环境 - 浏览器的一些规定，首先需要在ES的基础之上设置，但是最终生效时，以浏览器的标准为主 - 浏览器的规范没有涉及到的范围，使用ES的规范 - 宪法：ES，地方法规：浏览器的规定 - 浏览器 > ES × - 兼容: - alert(1)：功能一致，没有兼容 - 但每个浏览器显示的样式都不一样 2：window的具体使用和功能 wind
js BOM --＞history
weixin_44154094的博客
01-24 102
historyHistory1.1 length1.2 back()1.3 forward()1.4 go() History History * - 对象可以用来操作浏览器向前或向后翻页 * 1.1 length * length * - 属性，可以获取到当成访问的链接数量 1.2 back() * back() * - 可以用来回退到上一个页面，作用和浏览器的回退按钮一样 1.3 forward() * forward() * - 可以跳
JS -- BOM
XWenXiang的博客
04-28 907
文章目录BOMBOM 简介window对象打开与关闭窗口弹框计时事件setInterval() 方法setTimeout() 方法window.clearIntervalNavigator 对象Location 对象History 对象Screen 对象 BOM BOM 简介 BOM 指的是浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。BOM由多个对象构成，其中window对象是BOM的顶层对象，也是JavaScript最高层对象之一，其他对象都是该对象的子对象。 BOM对
javaScript里面的BOM-DOM
达帮主
01-21 326
BOM和Document对象常见属性和方法 消息框/输入框/确认框 打开新窗口/关闭窗口 窗口大小位置设置 浏览器位置(IE兼容性) 访问历史 浏览器相关信息 访问页面的url 定时器 DOM和获取元素的三种方式 Node对象的属性和方法 属性操作 插入/追加/删除/替换节点
js---bom---history对象
2301_80310942的博客
07-11 553
window对象给我们提供了一个history对象,与浏览器历史进行交互,该对象包含用户(在浏览器窗口中)访问过的url。go(参数)---前进后退功能 参数如果是1 前进 如果是-1 后退一个页面。back()---可以实现后退功能。forward()---前进功能。history对象方法。
【JavaScript】10-js操作bom
JeffHan^_^的博客
08-05 142
bom-Browser Object Model(浏览器对象模型)
jhipster-bom-main_jhipster-bom-main_linux_backup_
09-29
《JHipster-BOM-Main：Linux备份与恢复的关键知识点详解》 JHipster-BOM-Main（JHipster Bill of Materials Main）是Java开发领域中的一个重要组件，它为基于JHipster框架的项目提供了版本管理和依赖管理。在这个...
Js-Bom-refrence:Js Bom Refrence
04-04
在"Js-Bom-refrence"这个资源中，我们可以期待找到关于JavaScript BOM的详细参考指南。 1. **窗口对象（Window Object）** 窗口对象是所有JavaScript全局变量和函数的容器，包括`document`、`location`、`history`...
JavaScript bom操作 window-event 示例代码
06-27
JavaScript bom操作 window_event 示例代码JavaScript bom操作 window_event 示例代码JavaScript bom操作 window_event 示例代码JavaScript bom操作 window_event 示例代码JavaScript bom操作 window_event 示例代码...
批量utf文件转utf8-bom
01-15
3. 编写脚本：如果你熟悉编程，可以用Python、JavaScript或其他语言编写脚本，遍历指定目录下的所有文件，读取、转换后再写入，这样可以自动化整个过程。 4. 第三方工具：网络上也有一些专门的文件编码转换工具，如...
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 397
原生WebSocket： new WebSocket。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 185
vue 自定义滚动条同步拖动（移动端）
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
huanghm88的专栏
07-11 700
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
最新发布
weixin_73582152的博客
07-15 248
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
JavaScript高级基础-2
12-20
在JavaScript的高级基础知识中，我们将学习BOM操作、正则表达式和ES6。这些主题都是非常重要且实用的，可以帮助我们更好地进行前端开发。 BOM操作是指通过JavaScript来操作浏览器对象模型，它可以实现各种与浏览器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值