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

头像
梁志芳
    阅读 11 分钟
    1

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

    图片描述

    1.window.open()

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

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

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

    参数 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>

    结果截图：

    点击之前：

    图片描述

    点击之后：

    图片描述

    参数 2 ?

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

    举例说明：

    <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>

    结果截图：

    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>
    javascriptcsshtml
    梁志芳
    159 声望58 粉丝

    正在学习CSS+HTML+JS

    « 上一篇
    JS基础入门篇（二十四）—DOM（下）
    下一篇 »
    JS基础入门篇（三十三）—正则表达式

    引用和评论

    推荐阅读
    头像
    git 基本命令

    梁志芳赞 3阅读 1.7k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    0 条评论
    得票最新