JS基础入门篇（二十七）—BOM

时间  2020-01-06
标签 基础 入门 二十七 bom 栏目 JavaScript 繁體版
原文   原文链接

虽然上次写到js基础篇（二十四），此次直接写到（二十七）。是为了提醒本身中间有几篇没写。特此说明一下啊。php

图片描述

1.window.open()

使用a标签呢，点击一下a标签页面才会跳转，有时候咱们须要作的操做是，咱们不点击，页面就跳转了。虽然这种例子我还没想到，可是就是有。😂html

window.open()--- 打开一个新窗口

参数有一点多，先看看就好。知道总比不知道强。chrome

参数 1 👏

1.指定要打开的页面地址
        eg:window.open("http://www.baidu.com");
        若是不写http表明打开的是本地地址
        window.open("pleaseOpenMe.html");

举例说明：（window能够不加。加也能够）浏览器

<body>
<button style="width: 100px;height: 100px">点击</button>
<script>
    var btu=document.getElementsByTagName("button")[0];
    btu.onclick=function () {
        open("http://www.baidu.com");
    }
</script>
</body>

结果截图：this

点击以前：spa

图片描述

点击以后：code

图片描述

参数 2 👏

2.打开方式 : _blank , _self , ... iframeName
        window.open("pleaseOpenMe.html","_blank");//在新窗口中打开网址
        window.open("pleaseOpenMe.html","_self");//在在当前页面中打开网址
        window.open("pleaseOpenMe.html","f1");//在当前页面中打开网址

举例说明：htm

<button style="width: 100px;height: 100px">点击</button>
<iframe width="500px" height="500px" name="f"></iframe>
<script>
    var btu=document.getElementsByTagName("button")[0];
    btu.onclick=function () {
//        open("http://www.baidu.com","_self");
//        open("http://www.baidu.com","_blank");
          open("http://www.baidu.com","f");
    }
</script>
</body>

结果截图：blog

open("http://www.baidu.com","_self"); 在当前页面打开：事件

图片描述

open("http://www.baidu.com","_blank");会打开一个新页面

图片描述

open("http://www.baidu.com","f");在当前页面的iframe中显示

图片描述

参数3 👏

3.浏览器的窗口特征 （宽，高，窗口位置等）
        注意:当设置第三个参数的时候,第二个参数必需要是"_blank"
        window.open("pleaseOpenMe.html","_blank","width=300px,height=100px");//在新窗口中打开网址

举例说明：

<body>
<button style="width: 100px;height: 100px">点击</button>
<script>
    var btu=document.getElementsByTagName("button")[0];
    btu.onclick=function () {
        open("http://www.baidu.com","_blank","width=300px,height=400px");
    }
</script>

运行结果：出现的新页面的大小就是宽300px，高400px

图片描述

参数4 👏

4.不传入参数，
        默认打开新的空白页面
        window.open();

举例说明

<script>
    var btu=document.getElementsByTagName("button")[0];
    btu.onclick=function () {
        open();
    }
</script>

运行结果

图片描述

2.window.close( )

window.close():关闭打开的窗口

举例说明：

<body>
<button id="open">打开</button>
<button id="close">关闭</button>
<script>
    var openBtu=document.getElementById("open");
    var closeBtu=document.getElementById("close");
    openBtu.onclick=function () {
        newWindow=open("http://www.baidu.com");
        console.log(newWindow);// window.open(); 返回值是 打开的新窗口
    };
    closeBtu.onclick=function () {
        newWindow.close();//关闭打开的百度页面
//      window.close();//关闭本身，兼容性有问题。chrome能够关闭本身，Firefox不能够关闭本身。
    };
</script>
</body>

这个结果比较简单，就不截图了。😄

3.location.href

window.location.href;
    字符串版的地址栏信息
    可读可写

举例说明：

<script>
    console.log( "点击页面以前的地址栏信息  "+window.location.href );
    document.onclick = function(){
            location.href = "http://www.baidu.com";//页面会跳转到百度页面
    }
</script>

4.search

search
    地址栏查询信息 （问号到#号之间的全部内容）
        能够读，写
            可是 为search 赋值 的时候会刷新页面
    注意：设置search最好经过事件来实现（好比加在点击事件中）

举例说明，其中地址栏内容是

"http://bbs.miaov.com/forum.phpmod=forumdisplay#fid=7&page=5"
其中search为：?mod=forumdisplay

举例说明：

<body>
<button style="width: 100px;height: 50px;">点击</button>
<script>
//    console.log(1);
//    location.search = "abc"; // 此行代码会致使 无限刷新,下面代码可能会执行
//    console.log(2);
    
//--------------------------------------------------------------
      var btu=document.getElementsByTagName("button")[0];
      btu.onclick=function () {
          location.search = "abc";
      }
</script>
</body>

运行结果：

没点击button以前：

图片描述

点击button以后：

图片描述

以前写选项卡的方式 👏

对的，你没有看错，一点注释也没有写。由于我以前的文章就写过，不想在写注释了，在写就写吐了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            font-size: 30px;
            background: red;
            display: none;
            margin-top: 20px;
        }
        button{
            width: 100px;
            height: 50px;
            font: 18px/50px "微软雅黑";
        }
        .show{
            display:block;
        }
        .active{
            background: red;
        }
    </style>
</head>
<body>
    <button class="active">1</button>
    <button>2</button>
    <button>3</button>
    <div class="show">content 1</div>
    <div>content 2</div>
    <div>content 3</div>
    <script>
        var btu=document.getElementsByTagName("button");
        var divs=document.getElementsByTagName("div");
        for(var i=0;i<btu.length;i++){
            btu[i].index=i;
            btu[i].onclick=function () {
                for(var i=0;i<btu.length;i++){
                    btu[i].className="";
                    divs[i].className="";
                }

                this.className="active";
                divs[this.index].className="show";
            }
        }
    </script>
</body>
</html>

用search来写选项卡 👏

点击查看用search写选项卡的效果！！！！

如下为具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            font-size: 30px;
            background: red;
            display: none;
            margin-top: 20px;
        }
        button{
            width: 100px;
            height: 50px;
            font: 18px/50px "微软雅黑";
        }
        .show{
            display:block;
        }
        .active{
            background: red;
        }
    </style>
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<div>content 1</div>
<div>content 2</div>
<div>content 3</div>
<script>
    var btu=document.getElementsByTagName("button");
    var divs=document.getElementsByTagName("div");
    
    //截取search内容从？以后的内容
    //若是截取到的内容能转成数字，则将数字传给 s
    //不然将"0"传给s
    //因为设置search的值页面会刷新，故不须要清洗以前的内容
    // 其中substring()是字符串方法
    // a||b的意思是，a为真就返回a，a为假就返回b。相似的操做是 a&&b a为真就返回b，a为假就返回a。
    var s= Number(location.search.substring(1)) || "0";
    btu[s].className="active";
    divs[s].className="show";
    
    
    for(var i=0;i<btu.length;i++){
        btu[i].index=i;
        btu[i].onclick=function () {
            //点击button的时候，将地址栏search的内容，设置对应自定义属性值，则为0，1，2。
            location.search=this.index;
        }
    }
</script>
</body>
</html>

用search + a来写选项卡 👏

点击查看用search + a 写选项卡的效果！！！！

如下为具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            font-size: 30px;
            background: red;
            display: none;
            margin-top: 20px;
        }
        a{
            width: 100px;
            height: 50px;
            font: 18px/50px "微软雅黑";
            display: inline-block;
            text-align: center;
            text-decoration: none;
        }
        .show{
            display:block;
        }
        .active{
            background: red;
        }
    </style>
</head>
<body>
<!--设置a标签跳转的地址，会改变地址栏-->
<a href="?0">1</a>
<a href="?1">2</a>
<a href="?2">3</a>
<div>content 1</div>
<div>content 2</div>
<div>content 3</div>
<script>
    var as=document.getElementsByTagName("a");
    var divs=document.getElementsByTagName("div");
    
    var s= Number(location.search.substring(1)) || "0";
    as[s].className="active";
    divs[s].className="show";
    
</script>
</body>
</html>

5.hash

window.location.hash
    锚点信息（#号后面的全部内容）
    能够读写
        为hash赋值，不会刷新页面

举例说明：

<script>
        document.onclick=function () {
            location.hash="k";//设置地址栏#后的信息
        };
        
        //动态监控hash是否发生变化。
        window.onhashchange=function () {
            console.log("hashchange");
        }
</script>

运行结果：

没点击当前页面文档以前：

图片描述

点击当前页面文档以后：

图片描述

用hash写选项卡 👏

用hash写选项卡效果！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            font-size: 30px;
            background: red;
            display: none;
            margin-top: 20px;
        }
        button{
            width: 100px;
            height: 50px;
            font: 18px/50px "微软雅黑";
        }
        .show{
            display:block;
        }
        .active{
            background: red;
        }
    </style>
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<div>content 1</div>
<div>content 2</div>
<div>content 3</div>
<script>
    var btu=document.getElementsByTagName("button");
    var divs=document.getElementsByTagName("div");
    
    //页面打开的时候，默认第一个button和第一个div显示
    btu[0].className="active";
    divs[0].className="show";


    for(var i=0;i<btu.length;i++){
        btu[i].index=i;
        btu[i].onclick=function () {
            //点击button的时候，将地址栏hash的内容，设置对应自定义属性值，则为0，1，2。
            location.hash=this.index;
        }
    }

    window.onhashchange=function () {
        //清除全部，将其样式清空
        for(var i=0;i<btu.length;i++){
            btu[i].className="";
            divs[i].className="";
        }

        //截取hash内容从#以后的内容
        //若是截取到的内容能转成数字，则将数字传给 h
        //不然将"0"传给h
        //因为设置search的值页面会刷新，故不须要清洗以前的内容
        // 其中substring()是字符串方法
        // a||b的意思是，a为真就返回a，a为假就返回b。相似的操做是 a&&b a为真就返回b，a为假就返回a。
        var h= Number(location.hash.substring(1)) || "0";
        btu[h].className="active";
        divs[h].className="show";
    }
</script>
</body>
</html>

用hash + a 写选项卡 👏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            font-size: 30px;
            background: red;
            display: none;
            margin-top: 20px;
        }
        a{
            width: 100px;
            height: 50px;
            font: 18px/50px "微软雅黑";
            display: inline-block;
            text-align: center;
            text-decoration: none;
        }
        .show{
            display:block;
        }
        .active{
            background: red;
        }
    </style>
</head>
<body>
<a href="#0">1</a>
<a href="#1">2</a>
<a href="#2">3</a>
<div>content 1</div>
<div>content 2</div>
<div>content 3</div>
<script>
    var as=document.getElementsByTagName("a");
    var divs=document.getElementsByTagName("div");
    
    //页面打开给第一个添加样式
    as[0].className="active";
    divs[0].className="show";

    //当地址栏#后内容发生变化，触发该代码
    window.onhashchange = function(){
        //清空全部的显示
        for (var i = 0; i < as.length; i++) {
            as[i].className = "";
            divs[i].className = "";
        }
        //给当前button和div添加样式
        var h = location.hash.substring(1) || "0";
        as[h].className = "active";
        divs[h].className = "show";
    }

</script>
</body>
</html>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程