10-JS-BOM

最新推荐文章于 2024-07-20 10:36:53 发布
最新推荐文章于 2024-07-20 10:36:53 发布
阅读量190 收藏
点赞数
分类专栏： 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 837
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 320
JavaScript中的BOM操作 BOM：浏览器对象模型（Browser Object Model，简称 BOM）提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作 一、Window对象 浏览器窗口 特点 1.对于全局变量或全局方法，在取值或调用时可以省略 var a = 10; console.log(a); //10 consol...
JS中的BOM 详解
m0_63574519的博客
06-14 6267
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 449
事件通常与函数配合使用，这样我们可以通过发生的事件来驱动函数执行. 常见事件: 事件绑定 在javascript中事件经常与函数一起使用，那么我们介绍一下怎样将一个事件与函数绑定到一起，简单说，就是某个事件被触发后，函数如果被调用。 事件的三要素：事件、事件源、响应行为 onclick事件 ...
2020.0510--BOM
weixin_46579829的博客
05-10 139
BOM： 一：什么是BOM 1：概念： BOM：浏览器对象模型，是个模型，这个模型由一个对象window来体现（具象） - 作用： - 提供了ES和页面的运行环境 - 浏览器的一些规定，首先需要在ES的基础之上设置，但是最终生效时，以浏览器的标准为主 - 浏览器的规范没有涉及到的范围，使用ES的规范 - 宪法：ES，地方法规：浏览器的规定 - 浏览器 > ES × - 兼容: - alert(1)：功能一致，没有兼容 - 但每个浏览器显示的样式都不一样 2：window的具体使用和功能 wind
js BOM --＞history
weixin_44154094的博客
01-24 104
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 908
文章目录BOMBOM 简介window对象打开与关闭窗口弹框计时事件setInterval() 方法setTimeout() 方法window.clearIntervalNavigator 对象Location 对象History 对象Screen 对象 BOM BOM 简介 BOM 指的是浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。BOM由多个对象构成，其中window对象是BOM的顶层对象，也是JavaScript最高层对象之一，其他对象都是该对象的子对象。 BOM对
javaScript里面的BOM-DOM
达帮主
01-21 327
BOM和Document对象常见属性和方法 消息框/输入框/确认框 打开新窗口/关闭窗口 窗口大小位置设置 浏览器位置(IE兼容性) 访问历史 浏览器相关信息 访问页面的url 定时器 DOM和获取元素的三种方式 Node对象的属性和方法 属性操作 插入/追加/删除/替换节点
js---bom---history对象
2301_80310942的博客
07-11 556
window对象给我们提供了一个history对象,与浏览器历史进行交互,该对象包含用户(在浏览器窗口中)访问过的url。go(参数)---前进后退功能 参数如果是1 前进 如果是-1 后退一个页面。back()---可以实现后退功能。forward()---前进功能。history对象方法。
【JavaScript】10-js操作bom
JeffHan^_^的博客
08-05 143
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. 第三方工具：网络上也有一些专门的文件编码转换工具，如...
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1244
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
react 快速入门思维导图
weixin_44565776的博客
07-18 334
只要掌握了这些react技能，基本就可以熟练使用react了
Vue3企业级项目开发实战课-笔记记录
最新发布
tuku0801的专栏
07-20 822
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
vue3前端开发-如何让自己的网站适合SEO排名规则
yrldjsbk的博客
07-17 256
我们大家都知道，原始出生的vue3项目，原始代码层面，是没有meta标签的，也就是说，不适合SEO排名规则。SEO排名规则，蜘蛛爬虫抓取网站页面的内容，就会把这种meta标签内容进行采集，匹配。但是，这个技术要求大家还是应该知道的。黑马教育，课程，前端课程案例项目：小兔鲜儿超市，vue3前端项目案例。想学习vue3前端开发，拿来练习，实战的朋友们，值得一看哦。这个代码，就是我自己手工录入的。录入后，再次在浏览器界面刷新请求服务器。返回的代码模块就可以看见了。自己刚刚手工录入的meta信息出现了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值