day30-JavaScript(2)

死不悔改奇男子發表於2024-05-02
JavaScript

1、BOM物件

BOM:Broswer object model,即瀏覽器提供我們開發者在javascript用於操作瀏覽器的物件。

1.1、window物件

  • 視窗方法
// BOM  Browser object model 瀏覽器物件模型

// js中最大的一個物件.整個瀏覽器視窗出現的所有東西都是window物件的內容.
console.log( window );

// alert()  彈出一個警告框
window.alert("hello");

//confirm  彈出一個確認框,點選確認,返回true, 點選取消,返回false
var ret = confirm("您確認要刪除當前檔案麼?");
console.log( ret  );

// 彈出一個訊息輸入框,當點選確認以後,則返回可以接收到使用者在輸入框填寫的內容.如果點選取消,則返回null
var ret = prompt("請輸入一個內容","預設值");
console.log( ret );

// close() 關閉當前瀏覽器視窗
window.close();

//開啟一個新的瀏覽器視窗
window.open("http://www.baidu.com","_blank","width=800px,height=500px,left=200px,top=200px";
  • 定時方法

setInterval() 方法會不停地呼叫函式，直到 clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的引數。而setTimeout是在指定的毫秒數後呼叫code一次。

// 設定迴圈定時器
var ID = window.setInterval(code,millisec)   // 每millisec毫秒執行一次code
// 取消迴圈定時器
window.clearInterval(ID);

// 設定單次定時器
var ID = window.setTimeout(code,millisec) // millisec毫秒後執行code一次
// 取消單次定時器
window.clearTimeout(ID);

其中，code為要呼叫的函式或要執行的程式碼串。millisec週期性執行或呼叫 code 之間的時間間隔，以毫秒計。

顯示時間案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input id="ID1" type="text" >
<button onclick="begin()">開始</button>
<button onclick="end()">停止</button>

<script>
    function showTime(){
           var nowd2=new Date().toLocaleString();
           var temp=document.getElementById("ID1");
           temp.value=nowd2;

    }
    var ID;
    function begin(){
        if (ID==undefined){
             showTime();
             ID=setInterval(showTime,1000);
        }
    }
    function end(){
        clearInterval(ID);
        ID=undefined;
    }

</script>

</body>
</html>

1.2、Location (位址列)物件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="func1()">檢視Location物件</button>
<button onclick="func2()">跳轉到百度</button>
<button onclick="func3()">F5</button>
<script>
    function func1(){
        console.log( location );
    }
    // 位址列物件控制和操作位址列
    // 所謂的地址就是當前頁面所在地址
    // 地址結構:
    // 協議://域名:埠/路徑/檔名?查詢字串#錨點
    console.log( `協議=>${location.protocol}` );
    console.log( `埠=>${location.port}` );
    console.log( `域名=>${location.hostname}` );
    console.log( `域名:埠=>${location.host}` );
    console.log( `路徑=>${location.pathname}` );
    console.log( `查詢字串=>${location.search}` );
    console.log(`完整的地址資訊=>${location.href}`);

    function func2(){
        // location.href="http://www.baidu.com"; // 頁面跳轉
        location.assign("http://www.baidu.com"); // 頁面跳轉
    }

    function func3(){
        location.reload(); // 重新整理頁面
    }
</script>
</body>
</html>

1.3、本地儲存物件

使用儲存物件的過程中, 物件資料會根據域名埠進行儲存的,所以 js不能獲取當前頁面以外其他域名埠儲存到本地的資料。也就是說,我們儲存物件獲取資料只能是自己當前埠或者域名下曾經設定過的資料,一旦埠或者域名改變,則無法獲取原來的資料。

localStorage    本地永久儲存
  localStorage.setItem("變數名","變數值");   儲存一個資料到儲存物件
  localStorage.變數名 = 變數值               儲存一個資料到儲存物件

  localStorage.getItem("變數名")   獲取儲存物件中儲存的指定變數對應的資料
  localStorage.變數名              獲取儲存物件中儲存的指定變數對應的資料

  localStorage.removeItem("變數名")   從儲存物件中刪除一個指定變數對應的資料
  localStorage.clear()               從儲存物件中刪除所有資料

sessionStorage  本地會話儲存
  sessionStorage.setItem("變數名","變數值");   儲存一個資料到儲存物件
  sessionStorage.變數名 = 變數值               儲存一個資料到儲存物件

  sessionStorage.getItem("變數名")   獲取儲存物件中儲存的指定變數對應的資料
  sessionStorage.變數名              獲取儲存物件中儲存的指定變數對應的資料

  sessionStorage.removeItem("變數名")   從儲存物件中刪除一個指定變數對應的資料
  sessionStorage.clear()               從儲存物件中刪除所有資料

練習：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="func1()">設定一個資料</button>
<button onclick="func2()">檢視一個資料</button>
<script>
    function func1(){
        localStorage.setItem("name","yuan");
    }

    function func2(){
        var ret = localStorage.getItem("name");
        console.log(ret);
    }
</script>
</body>
</html>

localStorage和sessionStorage的區別：

1、localStorage和sessionStorage一樣都是用來儲存客戶端臨時資訊的物件。

2、他們均只能儲存字串型別的物件（雖然規範中可以儲存其他原生型別的物件，但是目前為止沒有瀏覽器對其進行實現）。

3、localStorage生命週期是永久，這意味著除非使用者顯示在瀏覽器提供的UI上清除localStorage資訊，否則這些資訊將永遠存在。sessionStorage生命週期為當前視窗或標籤頁，一旦視窗或標籤頁被永久關閉了，那麼所有透過sessionStorage儲存的資料也就被清空了。

4、不同瀏覽器無法共享localStorage或sessionStorage中的資訊。相同瀏覽器的不同頁面間可以共享相同的 localStorage（頁面屬於相同域名和埠），但是不同頁面或標籤頁間無法共享sessionStorage的資訊。這裡需要注意的是，頁面及標 籤頁僅指頂級視窗，如果一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是可以共享sessionStorage的。

2、DOM物件(JS核心)

DOM document Object Model 文件物件模型

// 整個html文件,會儲存一個文件物件document
// console.log( document ); // 獲取當前文件的物件

2.1、查詢標籤

  • 直接查詢標籤
document.getElementsByTagName("標籤名")
document.getElementById("id值")
document.getElementsByClassName("類名")

1、方法的返回值是dom物件還是陣列

2、document物件可以是任意dom物件，將查詢範圍限制在當前dom物件

  • 導航查詢標籤
elementNode.parentElement           // 父節點標籤元素
elementNode.children                // 所有子標籤
elementNode.firstElementChild       // 第一個子標籤元素
elementNode.lastElementChild        // 最後一個子標籤元素
elementNode.nextElementSibling     // 下一個兄弟標籤元素
elementNode.previousElementSibling  // 上一個兄弟標籤元素
  • CSS選擇器查詢
document.querySelector("css選擇器")  //根據css選擇符來獲取查詢到的第一個元素，返回標籤物件（dom物件）
document.querySelectorAll("css選擇器"); // 根據css選擇符來獲取查詢到的所有元素,返回陣列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="i1">DIV1</div>

<div class="c1">DIV</div>
<div class="c1">DIV</div>
<div class="c1">DIV</div>


<div class="outer">
    <div class="c1">item</div>
</div>


<div class="c2">
    <div class="c3">
        <ul class="c4">
            <li class="c5" id="i2">111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>
</div>

<script>

   // 直接查詢

   var ele = document.getElementById("i1");  // ele就是一個dom物件
   console.log(ele);

   var eles = document.getElementsByClassName("c1"); // eles是一個陣列 [dom1,dom2,...]
   console.log(eles);

   var eles2 = document.getElementsByTagName("div"); // eles2是一個陣列 [dom1,dom2,...]
   console.log(eles2);

   var outer = document.getElementsByClassName("outer")[0];
   var te = outer.getElementsByClassName("c1");
   console.log(te);

   // 導航查詢

    var c5 = document.getElementsByClassName("c5")[0];
    console.log(c5);  // c5是一個DOM物件

    console.log(c5.parentElement.lastElementChild);  // 返回值是dom物件
    console.log(c5.parentElement.children);  // 返回值是dom物件陣列
    console.log(c5.nextElementSibling.nextElementSibling);
    console.log(c5.parentElement.children);

    // css選擇器

    var dom = document.querySelector(".c2 .c3 .c5");
    console.log(":::",dom);

    var doms = document.querySelectorAll("ul li");
    console.log(":::",doms);
    
</script>

</body>
</html>

2.2、繫結事件

  • 靜態繫結 ：直接把事件寫在標籤元素中。

<div id="div" onclick="foo(this)">click</div>

<script>
    function foo(self){           // 形參不能是this;
        console.log("foo函式");
        console.log(self);
    }
</script>
  • 動態繫結：在js中透過程式碼獲取元素物件,然後給這個物件進行後續繫結。

<p id="i1">試一試!</p>

<script>

    var ele=document.getElementById("i1");

    ele.onclick=function(){
        console.log("ok");
        console.log(this);    // this直接用
    };

</script>

一個元素本身可以繫結多個不同的事件, 但是如果多次繫結同一個事件,則後面的事件程式碼會覆蓋前面的事件程式碼

多個標籤繫結事件

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>


<script>

    var eles = document.querySelectorAll("ul li");
    for(var i=0;i<eles.length;i++){
        eles[i].onclick = function (){
            console.log(this.innerHTML)
            // console.log(eles[i].innerHTML)  // 結果？
        }
    }

</script>

2.3、操作標籤

<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”……>文字</標籤名>
  • 文字操作
<div class="c1"><span>click</span></div>

<script>

    var ele =document.querySelector(".c1");

    ele.onclick = function (){
        // 檢視標籤文字
        console.log(this.innerHTML)
        console.log(this.innerText)
    }

    ele.ondblclick = function (){
        // 設定標籤文字
        this.innerHTML = "<a href='#'>yuan</a>"
        //this.innerText = "<a href='#'>yuan</a>"
    }

</script>
  • value操作

像input標籤，select標籤以及textarea標籤是沒有文字的，但是顯示內容由value屬性決定

    <input type="text" id="i1" value="yuan">
    <textarea name="" id="i2" cols="30" rows="10">123</textarea>
    <select  id="i3">
        <option value="hebei">河北省</option>
        <option value="hubei">湖北省</option>
        <option value="guangdong">廣東省</option>
    </select>

<script>

    // input標籤
    var ele1 =document.getElementById("i1");
    console.log(ele1.value);
    ele1.onmouseover = function (){
        this.value = "alvin"
    }

    // textarea標籤
    var ele2 =document.getElementById("i2");
    console.log(ele2.value);
    ele2.onmouseover = function (){
        this.innerText = "welcome to JS world！"
        this.value = "welcome to JS world！"
    }
    // select標籤
    var ele3 =document.getElementById("i3");
    console.log(ele3.value);
    ele3.value= "hubei"

</script>
  • css樣式操作
<p id="i1">Hello world!</p>

<script>
    var ele = document.getElementById("i1");
    ele.onclick = function (){
        this.style.color = "red"
    }
</script>

屬性操作

elementNode.setAttribute("屬性名","屬性值")    
elementNode.getAttribute("屬性名")       
elementNode.removeAttribute("屬性名");

並不是所有屬性都可以像value那樣操作。

  • class屬性操作**
elementNode.className
elementNode.classList.add
elementNode.classList.remove

案例：tab切換

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .tab{
            width: 800px;
            height: 300px;
            /*border: 1px solid red;*/
            margin: 200px auto;
        }

        .tab ul{
            list-style: none;
        }

        .tab-title{
            background-color: #f7f7f7;
            border: 1px solid #eee;
            border-bottom: 1px solid #e4393c;
        }

        .tab .tab-title li{
            display: inline-block;
            padding: 10px 25px;
            font-size: 14px;
        }

        li.current {
            background-color: #e4393c;
            color: #fff;
            cursor: default;
        }

        .hide{
            display: none;
        }


    </style>
</head>
<body>


<div class="tab">
    <ul class="tab-title">
        <li class="current" index="0">商品介紹</li>
        <li class="" index="1">規格與包裝</li>
        <li class="" index="2">售後保障</li>
        <li class="" index="3">商品評價</li>
    </ul>

    <ul class="tab-content">
        <li>商品介紹...</li>
        <li class="hide">規格與包裝...</li>
        <li class="hide">售後保障...</li>
        <li class="hide">商品評價...</li>
    </ul>
</div>


<script>
     var titles = document.querySelectorAll(".tab-title li");
     var contents = document.querySelectorAll(".tab-content li");
     
     for (var i = 0;i<titles.length;i++){
         
         titles[i].onclick = function () {
             // (1) 觸發事件標籤擁有current樣式
             for (var j = 0;j<titles.length;j++){
                 titles[j].classList.remove("current")
             }

             console.log(this);
             this.classList.add("current");

             // (2) 顯示點選title對應的詳情內容
             var index = this.getAttribute("index");
             // console.log(this.getAttribute("index"));
             // console.log(contents[index]);


             for (var z = 0;z<contents.length;z++){
                 contents[z].classList.add("hide");
             }

             contents[index].classList.remove("hide");
             
         }
         
     } 

</script>

</body>
</html>
  • 節點操作
// 建立節點：
document.createElement("標籤名")
// 插入節點
somenode.appendChild(newnode)             // 追加一個子節點（作為最後的子節點）
somenode.insertBefore(newnode,某個節點)   // 把增加的節點放到某個節點的前邊
// 刪除節點
somenode.removeChild()：獲得要刪除的元素，透過父元素呼叫刪除
//替換節點
somenode.replaceChild(newnode, 某個節點);

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<button class="add_btn">新增節點</button>
<button class="del_btn">刪除節點</button>
<button class="replace_btn">替換節點</button>
<div class="c1">
    <h3>hello JS!</h3>
    <h3 class="c2">hello world</h3>
</div>


<script>

    var add_btn = document.querySelector(".add_btn");
    var del_btn = document.querySelector(".del_btn");
    var replace_btn = document.querySelector(".replace_btn");

    var c1 = document.querySelector(".c1");
    var c2 = document.querySelector(".c2");
    
    add_btn.onclick = function () {
        // 建立節點

        var ele = document.createElement("img");  // <img>
        ele.src = "https://img2.baidu.com/it/u=1613029778,1507777131&fm=26&fmt=auto&gp=0.jpg"
        console.log(ele);


        // 新增節點
        // c1.appendChild(ele);

        c1.insertBefore(ele, c2)

    };


    del_btn.onclick = function () {
        // 刪除子節點
        c1.removeChild(c2);
    };


    replace_btn.onclick = function () {

        // 建立替換節點

        var ele = document.createElement("img");  // <img>
        ele.src = "https://img2.baidu.com/it/u=1613029778,1507777131&fm=26&fmt=auto&gp=0.jpg"
        console.log(ele);

        // 替換節點
        c1.replaceChild(ele, c2);

    }
</script>

</body>
</html>

2.4、常用事件

  • onload事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script>
       window.onload = function (){
            ele = document.getElementById("i1")
            console.log(ele.innerHTML);
       }
    </script>
    
</head>
<body>

<div id="i1">yuan</div>

</body>
</html>
  • onsubmit事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<form action="" id="i1">
     使用者名稱：<input type="text">
     密碼：  <input type="password">
    <input type="submit">
</form>


<script>

     var ele = document.getElementById("i1");
     var user = document.querySelector("#i1 [type=text]")
     var pwd = document.querySelector("#i1 [type=password]")
     ele.onsubmit = function (e){
           console.log(user.value);
           console.log(pwd.value);

            return false;    // 終止事件執行
           // e.preventDefault() // 阻止元素預設行為
     }

</script>
</body>
</html>
  • onchange事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<select name="provonce" id="s1">
    <option value="hebei">請選擇省份</option>
    <option value="hubei">湖北省</option>
    <option value="hunan">湖南省</option>
    <option value="hebei">河北省</option>
</select>

<select name="provonce" id="s2">
    <option value="hebei">請選擇城市</option>

</select>

<script>

   var  data={"hunan":["長沙","岳陽","張家界"],"hubei":["武漢","襄陽","荊州"],"hebei":["石家莊","保定","張家口"]};
   console.log(data);
   var ele =  document.getElementById("s1");
   var ele2 =  document.getElementById("s2");
   ele.onchange=function () {
       console.log(this.value);
       var citys = data[this.value];
       console.log(citys);
       // 清空操作
       ele2.options.length=1;
       // 建立標籤
       for (var i=0;i<citys.length;i++){
           var option =  document.createElement("option"); // </option></option>
           option.innerHTML=citys[i];
           ele2.appendChild(option)
       }
   }

</script>


</body>
</html>
  • onmouse事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container{
            width: 300px;
        }
        #title{
            cursor: pointer;
            background: #ccc;
        }
       #list{
           display: none;
           background:#fff;
       }

        #list div{
            line-height: 50px;
        }
        #list  .item1{
            background-color: green;
        }

         #list  .item2{
            background-color: rebeccapurple;
        }

         #list  .item3{
            background-color: lemonchiffon;
        }


    </style>
</head>
<body>
<div id="container">
        <div id="title">使用了mouseout事件↓</div>
        <div id="list">
                <div class="item1">第一行</div>
                <div class="item2">第二行</div>
                <div class="item3">第三行</div>
        </div>
</div>
<script>

// 1.不論滑鼠指標離開被選元素還是任何子元素，都會觸發 mouseout 事件。

// 2.只有在滑鼠指標離開被選元素時，才會觸發 mouseleave 事件。

   var container=document.getElementById("container");
   var title=document.getElementById("title");
   var list=document.getElementById("list");
   title.onmouseover=function(){
       list.style.display="block";
   };

   container.onmouseleave=function(){  // 改為onmouseout試一下
       list.style.display="none";
   };

/*

因為mouseout事件是會冒泡的，也就是onmouseout事件可能被同時繫結到了container的子元素title和list
上，所以滑鼠移出每個子元素時也都會觸發我們的list.style.display="none";

*/
</script>
</body>
</html>
  • onkey事件
<input type="text" id="t1"/>

<script type="text/javascript">

    var ele=document.getElementById("t1");

     ele.onkeydown=function(e){
        console.log("onkeydown",e.key)
    };

     ele.onkeyup=function(e){
        console.log("onkeyup",e.key)
    };
</script>
  • onblur和onfocus事件
<input type="text" class="c1">


<script>

    var ele = document.querySelector(".c1");

    // 獲取焦點事件
    ele.onfocus = function () {
        console.log("in")
    };

    // 失去焦點事件
    ele.onblur = function () {
        console.log("out")
    }

</script>
  • 冒泡事件
<div class="c1">
    <div class="c2"></div>
</div>


<script>

    var ele1 = document.querySelector(".c1");
    ele1.onclick = function () {
        alert("c1區域")
    };

    var ele2 = document.querySelector(".c2");
    ele2.onclick = function (event) {
        alert("c2區域");
        
        // 如何阻止事件冒泡
        event.stopPropagation();
    }

</script>

3、總結與作業

  • 總結
    image

  • 作業
    image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .box {
            width: 80%;
            height: 270px;
            margin: 20px auto;
        }

        .box td{
            width: 180px;
            text-align: center;
        }

        .box input{

            padding: 5px 5px;
            height: 20px;
        }
    </style>
</head>
<body>

<h3>員工管理系統</h3>

<div class="box">
    <table border="1" cellpadding="5px" >
        <thead>
        <tr>
            <th>姓名</th>
            <th>年齡</th>
            <th>部門</th>
            <th>刪除</th>
            <th>編輯</th>
        </tr>
        </thead>

        <tbody class="tbody">
        <tr>
            <td>張三</td>
            <td>23</td>
            <td>銷售</td>
            <td>
                <button onclick="del_tr(this)">刪除</button>
            </td>
            <td>
                <button onclick="edit_tr(this)">編輯</button>
            </td>
        </tr>
        <tr>
            <td>李四</td>
            <td>21</td>
            <td>銷售</td>
            <td>
                <button onclick="del_tr(this)">刪除</button>
            </td>
            <td>
                <button onclick="edit_tr(this)">編輯</button>
            </td>
        </tr>
        <tr>
            <td>王五</td>
            <td>23</td>
            <td>運營</td>
            <td>
                <button onclick="del_tr(this)">刪除</button>
            </td>
            <td>
                <button onclick="edit_tr(this)">編輯</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>


<fieldset class="add-box">
    <legend>新增員工</legend>
    <p>姓名：<input type="text" class="name"></p>
    <p>年齡：<input type="text" class="age"></p>
    <p>部門：
        <select name="" id="i1">
            <option value="銷售">銷售部</option>
            <option value="運營">運營部</option>
            <option value="財務">財務部</option>
        </select>
    </p>
    <button class="add">新增</button>
</fieldset>


<script>

    var add = document.querySelector(".add");
    var tbody = document.querySelector(".tbody");
    add.onclick = function () {

        var inputs = document.querySelectorAll(".add-box input");
        var tr = document.createElement("tr");
        for (var i = 0; i < inputs.length; i++) {
            var td = document.createElement("td"); // <td></td>
            td.innerHTML = inputs[i].value;
            tr.appendChild(td);
            // 清空
            inputs[i].value = ""
        }

        var s = document.querySelector("#i1");
        td = document.createElement("td");
        td.innerHTML = s.value;
        tr.appendChild(td);


        // 新增刪除按鈕
        var button = document.createElement("button");
        button.innerHTML = "刪除";
        button.setAttribute("onclick", "del_tr(this)");
        td = document.createElement("td");
        td.appendChild(button);
        tr.appendChild(td);
        // 新增編輯按鈕
        button = document.createElement("button");
        button.innerHTML = "編輯";
        button.setAttribute("onclick", "edit_tr(this)");
        td = document.createElement("td");
        td.appendChild(button);
        tr.appendChild(td);


        tbody.appendChild(tr);
    };

    function del_tr(self) {
        var tr = self.parentElement.parentElement;
        tbody.removeChild(tr);
    }
    
    function edit_tr(self) {
        self.innerHTML = "儲存";
        self.setAttribute("onclick","save(this)");


        console.log(self.parentElement.parentElement.children);
        var children_td = self.parentElement.parentElement.children;

        for(var i=0;i<children_td.length-2;i++){

            var inp = document.createElement("input");
            inp.setAttribute("type","text");
            // inp.value = children_td[i].innerHTML;
            inp.setAttribute("value",children_td[i].innerHTML);
            console.log("::",inp);
            children_td[i].innerHTML = "";
            children_td[i].appendChild(inp);
        }

    }

    function save(self) {
        self.innerHTML = "編輯";
        self.setAttribute("onclick","edit_tr(this)");
        var children_td = self.parentElement.parentElement.children;
        for(var i=0;i<children_td.length-2;i++){
            children_td[i].innerHTML = children_td[i].firstElementChild.value
        }
    }

</script>

</body>
</html>

相關文章