第五模块 WEB开发基础之BOM

1. BOM对象介绍

<!DOCTYPE html>
<html>
<head>
    <title>BOM对象介绍</title>
</head>
    <script type="text/javascript">
        1. window
            alert()
            confirm()
            prompt()
            setInterval()
            setTimeout()
        2. location
            href
            hash
            url
            reload()
            ...
        3. screen
        4. history
            go()
    </script>
</body>
</html>

2. window对象的alert,confirm,prompt

<!DOCTYPE html>
<html>
<head>
    <title>alert/confirm/prompt</title>
</head>
    <script type="text/javascript">
        alert('hello');
        var a = confirm('你确定要离开网站吗?');
        // 点击'确定'后会返回true, 点击'取消'后会返回false
        var content = prompt('请输入内容');//会显示输入框
        console.log(content);
        prompt('请输入内容','mjj'); //输入框中默认显示mjj.

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

3. 定时器方法

<!DOCTYPE html>
<html>
<head>
    <title>setTimeout()/setInterval()</title>
</head>
    <script type="text/javascript">
        // 延迟性的操作, 单位毫秒
        setTimeout(function(){
            console.log('mjj');
        },2000)
        console.log('xiongda');//先显示xiongda, 延迟时间为0, 依然先显示xiongda
        // 每隔多长时间执行一次函数, 单位毫秒
        var num = 0;
        var timer = null;
        var timer = setInterval(function(){
            num++;
            if(num>5){
                clearInterval(timer);
                return;
            }
            console.log('num:' + num);
        },1000);
    </script>
</body>
</html>

4. location对象的常用属性介绍

<!DOCTYPE html>
<html>
<head>
    <title>location对象的常用属性介绍</title>
</head>
<body>
    <form>
        <input type="text" name="user">
        <input type="password" name="password">
        <input type="submit" name="">
    </form>
    <script type="text/javascript">
        console.log(location.host);// 含端口号
        console.log(location.hostname); // 不含端口号
        console.log(location.href);// 获取完整的url
        // file:///F:/python%E5%85%A8%E6%A0%88%E5%BC%80%E5%8F%91/python/js_code/01_insert_type.html?user=alex&password=123
        console.log(location.pathname); // 端口号之后的目录
        // /F:/python%E5%85%A8%E6%A0%88%E5%BC%80%E5%8F%91/python/js_code/01_insert_type.html
        console.log(location.port); // 只获取端口号
        console.log(location.protocol); // http:
        console.log(location.search); // ?user=alex&password=123
    </script>
</body>
</html>

5. 如何访问每个查询字符串参数

<!DOCTYPE html>
<html>
<head>
    <title>如何访问每个查询字符串参数</title>
</head>
<body>
    <form>
        <input type="text" name="user">
        <input type="password" name="password">
        <input type="submit" name="">
    </form>
    <script type="text/javascript">
        function getQueryString(){
            var qs = location.search.length > 0 ? location.search.substring(1) : '';
            var items = qs.length ? qs.split('&') : [];
            var item = null, name = null, value = null, args = {};
            for(var i = 0; i < items.length; i++){
                item = items[i].split('=');
                name = decodeURIComponent(item[0]);
                value = decodeURIComponent(item[1]);
                if(name.length){
                    args[name] = value;
                }
            }
            return args;
        }
        var args = getQueryString();
        console.log(args.user);
        console.log(args.password);
    </script>
    // file:///F:/python%E5%85%A8%E6%A0%88%E5%BC%80%E5%8F%91/python/js_code/01_insert_type.html?user=mii&password=lll
    // mii
    // lll
</body>
</html>

6. 当前浏览器的位置操作

<!DOCTYPE html>
<html>
<head>
    <title>当前浏览器的位置操作</title>
</head>
<body>
    <script type="text/javascript">
        setTimeout(function(){
            // location.href = 'https://www.baidu.com/';// 点击后退按钮(左箭头)能回到原来的页面
            // location.replace('https://www.baidu.com/'); //点击后退按钮后不能回到原来的页面
            location.reload(); //重载网页, 相当于2秒后刷新页面
        },2000)
    </script>
</body>
</html>

7. 如何检测当前浏览器上的插件

<!DOCTYPE html>
<html>
<head>
    <title>navigator对象</title> //使用不多
</head>
<body>
    <script type="text/javascript">
        console.log(navigator.plugins);
        //navigator对象有很多属性和方法
        function hasPlugin(name){
            name = name.toLowerCase();
            for(var i = 0; i < navigator.plugins.length; i++){
                if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
                    return true;
                }else{
                    return false;
                }
            }
        }
        alert(hasPlugin('flash'));
        alert(hasPlugin('Content Decryption Module'));
    </script>
</body>
</html>

8. history对象

<!DOCTYPE html>
<html>
<head>
    <title>history对象</title>
</head>
<body>
    <script type="text/javascript">
        var count = 0;
        setTimeout(function(){
            count++;
            console.log(count);
            history.go(0); // 0表示刷新, 1表示前进(相当于前进按钮),-1表示后退,2表示前进两次.
        },2000)
    </script>
</body>
</html>

 

posted @ 2020-09-14 17:43  自由者妍  阅读(200)  评论(0)    收藏  举报