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