天天看點
傳回

JS筆記之第七天

API的概念

API（Application Programming Interface,應用程式程式設計接口）是一些預先定義的函數，目的是提供應用程式與開發人員基于某軟體或硬體得以通路一組例程的能力，而又無需通路源碼，或了解内部工作機制的細節。

  • 任何開發語言都有自己的API
  • API的特征輸入和輸出(I/O)
  • API的使用方法(console.log())

Web API的概念

浏覽器提供的一套操作浏覽器功能和頁面元素的API(BOM和DOM)

此處的Web API特指浏覽器提供的API(一組方法)，Web API在後面的教程中有其它含義

常見的浏覽器提供的API的調用方式

https://developer.mozilla.org/zh-CN/docs/Web/API

JavaScript的組成

ECMAScript - JavaScript的核心

定義了javascript的文法規範

JavaScript的核心，描述了語言的基本文法和資料類型，ECMAScript是一套标準，定義了一種語言的标準與具體實作無關

BOM - 浏覽器對象模型

一套操作浏覽器功能的API

通過BOM可以操作浏覽器視窗，比如：彈出框、控制浏覽器跳轉、擷取分辨率等

DOM - 文檔對象模型

一套操作頁面元素的API

DOM可以把HTML看做是文檔樹，通過DOM提供的API可以對樹上的節點進行操作

DOM

DOM的概念

文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴充标志語言的标準程式設計接口。在網頁上，組織頁面（或文檔）的對象被組織在一個樹形結構中，用來表示文檔中對象的标準模型就稱為DOM。Document Object Model的曆史可以追溯至1990年代後期微軟與Netscape的“浏覽器大戰”，雙方為了在JavaScript與JScript一決生死，于是大規模的賦予浏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，既有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網頁使用非微軟平台及浏覽器無法正常顯示。DOM即是當時蘊釀出來的傑作。

DOM又稱為文檔樹模型

  • 文檔（document）：一個頁面可以稱為文檔（把一個HTML檔案看成是一個文檔，由于萬物皆對象，是以把這個文檔看成是一個對象。XML檔案也可以看成是一個文檔）
  • 根元素：HTML頁面中都有一個根标簽---HTML，又叫根元素
  • 節點（node）：頁面中所有内容都是節點（标簽、屬性、文本、注釋等）
  • 元素（element）：網頁中的标簽（頁面中的每個标簽都是一個元素，每個元素都可以看成是一個對象，标簽可以嵌套，标簽中有标簽，又叫元素中有元素，）
  • 屬性：标簽的屬性
  • 根（root）

可以這麼了解：頁面中有一個根元素（HTML），裡面有很多元素（有很多的标簽，有很多的對象））

文檔>節點>元素>屬性

（學習DOM就是在操作文檔裡面的标簽、屬性等）

由文檔及文檔中的所有的元素（标簽）組成的一個樹形結構圖，叫樹狀圖（DOM樹）

模拟文檔樹結構

DOM經常進行的操作（作用）

  • 擷取元素
  • 動态建立元素
  • 對元素進行操作(設定其屬性或調用其方法)
  • 事件(什麼時機做相應的操作)

用案例的方式進入DOM世界

小案例：點選按鈕彈出對話框

可以把下面的案例複制到編輯器打開先體驗體驗

<body>
<input type="button" value="按鈕" id="btn" />
<script>
//點選按鈕彈出對話框
var btnObj=document.getElementById("btn");
btnObj.onclick=function () {
    alert("彈框");
};
</script>
</body>

點選按鈕彈出對話框

點選是一個行為，是一個操作。在HTML它是一個事件。

事件是什麼呢？事件指的是一件事。

事件應該有事件源、觸發和響應

按鈕被點選彈出對話框

在操作的過程中，按鈕是被點了才會彈出對話框。

按鈕指的是：事件源

點選指的是：事件（可以叫做事件的名字）

被點選：指的是觸發了

彈框：指的是響應

<input type="button" value="按鈕" id="btn" />這是一個按鈕，裡面應該要有事件，事件裡面寫的代碼就是響應之後的内容

onclick 點選事件。凡是看到on開頭的，都可以把它當成是一個事件。

推論:

第一種方式：

<input type="button" value="顯示效果" onclick="alert('第一個彈框')" />

在HTML代碼裡面嵌入了js的代碼。缺陷：不友善後期的修改和維護

第二種方式：

<script>
    function f1() {
        alert("彈框");
    }
</script>
<input type="button" value="顯示效果" onclick="f1()" />

（函數裡面可以寫很多的代碼）在script裡面調用函數，給HTML代碼onclick這個變量調用此時并未做到真正的html和JS代碼的分離

<input type="button" value="顯示效果" onclick="f1()" />

onclick="f1()";f1()函數的調用，頁面加載完之後不會出現彈框，需要點選之後才出現彈框

"f1()"；這裡的雙引号是把它當成字元串了，相當于頁面加載完之後給onclick這個變量賦了一個值，裡面存的是一個函數，它是在雙引号裡面的，當我去點選按鈕的時候，從script裡面找到f1這個函數直接調用。雖然"f1()"；是函數的調用，但是它是不會執行的，隻會在點選的時候執行。

第三種方式：

HTML和JS代碼分離

<script>
function f1() {
    alert("點選之後出現彈框")
}
<script>
<input type="button" value="顯示效果" id="btn" />

id="btn"；id是屬性的名字，btn是值

HTML标簽中的id屬性中存儲的值是唯一的，id屬性就像人的身份證号碼一樣，不能重複，它是頁面中的唯一的辨別

（雖然在html裡面可以寫兩個一樣的id名，在頁面中有時也會執行，但是請不要這樣寫，id是唯一的，這樣寫不規範的，有時也會出錯，頁面可以有很多個id屬性，但是值（名字）要不同。）

從文檔中找到id值為btn的這個标簽（元素）

document.getElementById("btn");（在文檔中擷取元素根據id名）

document 文檔   get 擷取   Element 元素   By 根據    Id("")；雙引号寫入id的值

document.getElementById("id屬性的值")；===>傳回的是一個元素對象

定義變量接收，根據id擷取這個标簽（元素）：

var btnObj=document.getElementById("btn");

為按鈕注冊點選事件：btnObj.onclick=f1;不加括号

為按鈕注冊點選事件：btnObj.onclick=f1();

f1()調用了，打開頁面直接彈框，如果這麼寫，那麼頁面加載完，f1()這個函數就直接調用了，

f1裡面的函數代碼直接就執行了，我們需要的是點選的時候才調用f1函數裡面的代碼，是以onclick裡面需要的是函數的代碼，點選的時候才執行函數裡面的代碼，才調用f1裡面的代碼。最終需要把f1的括号去掉，使得onclick點選的時候才調用f1裡面的代碼。

缺陷：btnObj.onclick=f1；btnObj.onclick給它的是一個函數，這個函數有名字（f1）；如果要是不小心在f1這個函數的下面

有些了一個和函數名為f1的，或者從其他的script調用的時候出現了函數重名，重名的時候會發生前面的代碼被後面的重名的代碼

給覆寫執行了（為什麼會覆寫呢？代碼是從上到下執行的，名字一樣則執行後面的重名的代碼）

是以這種寫法也是不推薦不建議使用的

最終的方式：

<body>
<input type="button" value="顯示效果" id="btn" />

<script>
//根據id屬性的值從整個文檔中擷取這個元素（标簽）
var btnObj=document.getElementById("btn");
//為該元素注冊點選事件
obj.onclick=function () {
    //響應做的事情
    alert("最終版本");
};
匿名函數也是函數，這樣就不會出現重名的函數了
var btnObj等于 btnObj.onclick,是以也可以這麼寫：
document.getElementById("btn").onclick=function (){
    alert("最終版本");
};
</script>
</body>

var btnObj=document.getElementById("btn");btnObj.onclick=function (){alert("第一個在頁面顯示的教程操作");};

document.getElementById("btn").onclick=function () {alert("第一個在頁面顯示的教程操作");};

這個兩種寫法唯一的差别是：

用變量的方式，雖然有兩段代碼，但是看起來更清晰；一段代碼雖然看起來簡單，但是看起來不清晰。具體看自己的選擇

最終的方式會出現一個問題：如果script代碼寫在head裡面，那麼打開頁面會出現報錯，也不能說是報錯，隻能說它報的錯誤是錯的，報錯的資訊不準确。代碼在執行的時候沒有找到這個按鈕或者是沒有這個id名，沒有還要給他加上屬性，是以就會出現報錯。

解決方式：1.把script放在input标簽的下面，這樣就會執行

          2.學BOM的時候可以解決，後面涉及

這個案例做出來的步驟或者是思路：

先有按鈕，才能擷取，擷取之後才能注冊這個事件

根據id屬性的值從文檔中擷取這個元素

為目前的這個按鈕元素（對象），注冊點選事件，添加事件處理函數（匿名函數），響應做的事情

 案例

1-案例點選按鈕顯示圖檔

2-案例點選按鈕修改p标簽的内容

3-案例點選按鈕修改a标簽的位址和熱點文字

4-案例點選按鈕修改多個p标簽的文字内容

5-案例點選按鈕修改圖檔的alt和title屬性

6-案例點選按鈕修改所有文本框的值

7-案例點選每個圖檔彈出對話框

8-案例點選按鈕修改按鈕的value的屬性

9-案例點選圖檔修改自身的寬和高

10-案例排它功能

11-案例點選超連結切換圖檔

12-案例點選按鈕修改圖檔

13-點選按鈕修改性别和興趣

14-案例點選按鈕選擇菜單

15-案例點選按鈕設定div的寬和高和背景顔色

16-案例點選按鈕設定div的樣式

17-案例點選按鈕顯示和隐藏div

18-案例網頁開關燈

案例1：點選按鈕顯示圖檔

點選按鈕顯示圖檔：點選按鈕的時候設定img标簽的src屬性裡有一個圖檔的路徑

思路：根據id擷取按鈕，為按鈕注冊點選事件，添加事件處理函數，在事件處理函數裡面根據id擷取圖檔的标簽，設定圖檔的src(圖檔的位址)屬性值，

    點屬性，設定圖檔的位址（也可以點出寬和高，但是需要注意的是，點出來的寬和高不需要加px，直接寫數字就行了）

<body>
<input type="button" value="點選" id="btn" />
<img src="" alt="" id="im" />
<script>
/*如果想顯示圖檔，需要用img标簽。<img src="" alt="" id="im" />如果想要顯示圖檔，需要src=""裡面的值。
案例就是點選按鈕的時候設定img标簽的src屬性裡有一個圖檔的路徑*/


//根據id擷取按鈕
var btnObj=document.getElementById("btn");
//為按鈕注冊點選事件，添加事件處理函數
btnObj.onclick=function () {
    //根據id擷取圖檔的标簽，設定圖檔的src(圖檔的位址)屬性值
    var imObj=document.getElementById("im");
    //設定圖檔的大小
    imObj.src="images/1.jpg";//設定圖檔的src(圖檔的位址)屬性值
    imObj.width="200";
    imObj.height="200";
};
/*注意：<img src="" alt="" id="im" />src=""和alt=""是這個标簽（img）的屬性，img标簽可以看成是一個對象，對象可以點屬性，
是以imObj可以點出src，width和height在img标簽中是有的，也是可以通過點對象出來的。
*/
</script>
</body>

案例2：點選按鈕修改p标簽的内容

<body>

<input type="button" value="修改p标簽的内容" id="btn" />
<p id="p1">這是個p标簽，點選按鈕要修改這個p标簽的内容</p>

<script>
//案例：點選按鈕，修改p标簽的内容
//凡是成對的标簽，中間的文本内容，設定的時候，都使用innerText這個屬性的方式


//根據id擷取按鈕，為按鈕注冊點選事件，添加事件處理函數
var btnObj=document.getElementById("btn");
btnObj.onclick=function () {
    //擷取id擷取p标簽，設定内容
    document.getElementById("p1").innerText="這段文字是替代p标簽的文字";
};
</script>
</body>

案例3：點選按鈕修改a标簽裡面的位址和熱點文字

<body>
<input type="button" value="按鈕" id="btn" />
<a id="ak" href="http://www.baidu.com">百度</a>
<!--a标簽裡面的文字就是熱點文字-->
<script>
//點選按鈕修改a标簽裡面的位址和熱點文字
// 根據id擷取按鈕，注冊點選事件，添加事件處理函數

/*這個寫法有缺陷：
       document.getElementById("btn").onclick=function () {
           //根據id擷取超連結
           document.getElementById("ak").href="http://www.itcast.cn";
           //根據id擷取超連結，設定文字内容
           document.getElementById("ak").innerText="已改";
       };
   原因： document.getElementById("ak").href="http://www.itcast.cn";擷取了一次
   document.getElementById("ak").innerText="已改";擷取了一次
   一個元素在頁面操作過程中操作了兩次，等于為浏覽器增加了負擔
   */


//優化後的代碼
document.getElementById("btn").onclick=function () {
    var akObj=document.getElementById("ak");
    //根據id擷取超連結
    akObj.href="http://www.itcast.cn";
    //根據id擷取超連結，設定文字内容
    akObj.innerText="已改";
};//擷取一次，操作兩次。
</script>
</body>

案例4：點選按鈕設定多個p标簽的文字内容

<body>

<input type="button" value="按鈕" id="btn" /><br />

<div id="dv1">
    <p>要被修改的文字</p>
    <p>要被修改的文字</p>
    <p>要被修改的文字</p>
    <p>要被修改的文字</p>
    <p>要被修改的文字</p>
    <p>要被修改的文字</p>
    <p>要被修改的文字</p>
    <p>要被修改的文字</p>
</div>

<div id="dv2">
    <p>不允許修改</p>
    <p>不允許修改</p>
    <p>不允許修改</p>
    <p>不允許修改</p>
    <p>不允許修改</p>
    <p>不允許修改</p>
    <p>不允許修改</p>
    <p>不允許修改</p>
</div>

<script>
    //案例：點選按鈕設定多個p标簽的文字内容
    //document.getElementsByTagName("标簽的名字")，傳回的是一個僞數組
    // Elements多個元素，Tag 标簽，Name名字。
    //無論擷取的是一個标簽，還是多個标簽，最終都是在數組中存儲的，這行代碼的傳回值就是一個數組



    //根據id擷取按鈕，注冊點選事件，添加事件處理函數
    document.getElementById("btn").onclick=function (){
        //根據标簽文字擷取标簽
        var pObj=document.getElementsByTagName("p");
        //循環周遊這個數組
        for (var i=0;i<pObj.length;i++){//由多個p标簽放到一個數組裡面了
            //pObj[i]代表每個p标簽，設定文字内容
            pObj[i].innerText="已修改";
        }
    }

    /*
    var pObj=document.getElementsByTagName("p");
    從整個文檔擷取所有的p标簽，凡是有p标簽的都會 被擷取到，無論是否在div裡面，哪怕div加了id下面的p标簽也會被擷取到
    缺點：某些标簽不希望修改的，但是它也被修改了
 

    解決方式：可以分塊，用id的方式擷取下面的标簽名（每一塊都代表要修改的文字或者不被修改的文字）
     var pObj=document.getElementById("dv1").getElementsByTagName("p");
     document.getElementById("dv1")拿到了第一個div；.getElementsByTagName("p");擷取div下面的所有元素
*/
</script>
</body>

案例5：點選按鈕修改圖檔的alt屬性和title屬性

<body>

<input type="button" value="按鈕" id="btn" />
<img src="請找圖檔放進來" alt="圖檔顯示不出" title="滑鼠懸停顯示的文字" /><!--第一個數組當中的元素-->
<img src="請找圖檔放進來" alt="圖檔顯示不出" title="滑鼠懸停顯示的文字" /><!--第二個數組當中的元素-->
<img src="請找圖檔放進來" alt="圖檔顯示不出" title="滑鼠懸停顯示的文字" /><!--第三個數組當中的元素-->
<img src="請找圖檔放進來" alt="圖檔顯示不出" title="滑鼠懸停顯示的文字" /><!--第四個數組當中的元素-->
<img src="請找圖檔放進來" alt="圖檔顯示不出" title="滑鼠懸停顯示的文字" /><!--第五個數組當中的元素-->
<script>


document.getElementById("btn").onclick=function () {
//傳回的是一個僞數組
var imgObj=document.getElementsByTagName("img");
    //通過索引的方式擷取
    imgObj[0].alt="圖檔顯示不出的文字已被修改";
    imgObj[0].title="滑鼠懸停顯示的文字已被修改";
    imgObj[4].alt="圖檔顯示不出的文字已被修改";
    imgObj[4].title="滑鼠懸停顯示的文字已被修改";
};

/*
<img src="images/boduo.jpg" alt="圖檔顯示不出" title="滑鼠懸停顯示的文字" /><!--第一個數組當中的元素-->
<img src="images/boduo.jpg" alt="圖檔顯示不出" title="滑鼠懸停顯示的文字" /><!--第二個數組當中的元素-->
<img src="images/boduo.jpg" alt="圖檔顯示不出" title="滑鼠懸停顯示的文字" /><!--第三個數組當中的元素-->
<img src="images/boduo.jpg" alt="圖檔顯示不出" title="滑鼠懸停顯示的文字" /><!--第四個數組當中的元素-->
<img src="images/boduo.jpg" alt="圖檔顯示不出" title="滑鼠懸停顯示的文字" /><!--第五個數組當中的元素-->
document.getElementById("btn").onclick=function () {
     //傳回的是一個僞數組
     var imgObj=document.getElementsByTagName("img");
     //通過索引的方式擷取
     imgObj[0].alt="圖檔顯示不出的文字已被修改";
     imgObj[0].title="滑鼠懸停顯示的文字已被修改";
     imgObj[3].alt="圖檔顯示不出的文字已被修改";
     imgObj[3].title="滑鼠懸停顯示的文字已被修改";
};
*/
</script>
</body>

案例6：點選按鈕修改所有文本框的值

<body>

<input type="button" value="修改文本框的值" id="btn" />
<input type="text" value=" " /><br />
<input type="text" value=" " /><br />
<input type="text" value=" " /><br />
<input type="text" value=" " /><br />
<input type="text" value=" " /><br />

<script>
    //根據id擷取按鈕，為按鈕注冊點選事件，添加事件處理函數
    document.getElementById("btn").onclick=function () {
        //擷取所有的文本框
        var input=document.getElementsByTagName("input");
        //用循環的方式修改
        for (var i=0;i<input.length;i++){
            //判斷這個元素是不是按鈕，不是則執行代碼
            if (input[i].type!="button"){
                input[i].value="已修改";
            }//end if
        }//end for
    };
//單個标簽不能用innerText。
</script>
</body>

案例7：點選每個圖檔彈出對話框

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<!--圖檔請自己找自己加進去看效果-->
<img src="圖檔位置" alt="">
<img src="圖檔位置" alt="">
<img src="圖檔位置" alt="">
<img src="圖檔位置" alt="">
<img src="圖檔位置" alt="">
<img src="圖檔位置" alt="">
<img src="圖檔位置" alt="">
<img src="圖檔位置" alt="">
<script>

    //擷取所有的img标簽
    var imgObj=document.getElementsByTagName("img");
    //循環周遊數組，擷取每個圖檔标簽，注冊點選事件，添加事件處理函數
        for (var i=0;i<imgObj.length;i++){
            imgObj[i].onclick=function () {
                alert("點選之後就會彈框");
            }
        }
</script>
</body>

案例8：點選按鈕修改按鈕的value的屬性

<body>
<input type="button" value="按鈕" id="btn">
<script>
    var btnObj=document.getElementById("btn");
    btnObj.onclick=function () {
        //修改按鈕屬性
        btnObj.value="文字被該了";
        btnObj.type="text";
        btnObj.id="btn1";
    };

    //在某個元素的事件中，自己的事件中的this就是目前的這個元素對象
    var btnObj=document.getElementById("btn");
    btnObj.onclick=function () {
        this.value="文字被該了";
        this.type="text";
        this.id="btn1";
    };
</script>
</body>

案例9：點選圖檔修改自身的寬和高

<body>
<img src="圖檔位置自己找圖檔加進來" alt="" id="im" />
<script>

    //根據id擷取按鈕
    var imgObj=document.getElementById("im");
    //為按鈕添加點選事件
    imgObj.onclick=function () {//添加事件處理函數
        //修改自身的寬高
        this.which="200";
        this.height="200";
    };
</script>
</body>

案例10：排它功能   （所有的按鈕都有可能被點選。是以當這一個按鈕被點選之後，其他的按鈕要恢複原樣）

思路：1.先擷取所有的按鈕，分别注冊點選事件

2.循環周遊所有的按鈕

3.為每個按鈕都要注冊點選事件

在這裡面做兩件事：

（1）把所有的按鈕的value值設定為預設的值：沒懷孕

需要再來一次循環，

（2）目前被點選的按鈕設定為：懷孕了

<body>

<input type="button" value="沒懷孕"/>
<input type="button" value="沒懷孕"/>
<input type="button" value="沒懷孕"/>
<input type="button" value="沒懷孕"/>
<input type="button" value="沒懷孕"/>

<script>
    //擷取所有的按鈕，分别注冊點選事件
    var inObj = document.getElementsByTagName("input");
    for (var i = 0; i < inObj.length; i++) {
        //為每個按鈕注冊點選事件
        inObj[i].onclick = function () {
            //把所有的按鈕的value值設定為預設的值：沒懷孕
            for (var j = 0; j < inObj.length; j++) {
                inObj[j].value = "沒懷孕";
            }
            //目前被點選的按鈕設定為：懷孕了
            this.value = "懷孕了";
        };
    }
/*
this.value="懷孕了";不能寫成btnObj[i].value="懷孕了";

原因：for循環是在頁面加載的時候，執行加載完畢了
for (var k=0;k<5;k++){
     console.log(k);//0,1,2,3，4
    }
    console.log(k);//5。  因為當k++的時候，k等于4的時候，4小于5，直接for循環裡面的代碼回過頭來執行k++了，是以4就變成了5，
       5不小于5，是以for循環解釋之後，k的值是5，正好是小于後面的數字
 
    當循環的時候，不停的為每個按鈕注冊點選事件，事件在觸發的時候執行。頁面加載完畢之後，所有的按鈕都有事件，因為循環的時候已經為
每個按鈕注冊事件了。循環結束之後，每個按鈕都有事件，事件并未觸發，需要點選的時候觸發。
 
    頁面加載完畢之後，循環已經結束了，目前這個按鈕btnObj[i].onclick循環結束之後，每個按鈕都有事件，點誰誰的值改變，
而不是點誰誰的中括号（btnObj[i]）i的值改變，是以不能用btnObj[i].value=的方式。
    */
</script>
</body>
      
案例11：點選超連結切換圖檔（寫思路和注明return的原因）      
<body>
<a href="images/1.jpg" id="ah"><img src="images/1-small.jpg" alt="" id="im"></a>
<script>
    //點選圖檔标簽，設定圖檔标簽的src路徑為超連結中大圖的路徑
    document.getElementById("im").onclick=function () {
        this.src=document.getElementById("ah").href;
        return false;
    }
</script>
</body>

案例12：點選按鈕修改圖檔

封裝id屬性，用的時候引入調用就行

function my$(id){
        return document.getElementById(id);
    }
建個檔案夾，字尾是.js。調用的名字可以自己取，但是要有意義。      
<body>

<input type="button" value="按鈕" id="btn" />
<img src="圖檔位置自己找圖檔加進來" alt="" id="im">

<script>

    //封裝id屬性，用的時候調用就行
    function myScript(id){
        return document.getElementById(id);
    }
    myScript("btn").onclick=function () {
        myScript("im").src="images/1.jpg";
    };

/*推論：
    document.getElementById("btn")傳回的是一個對象，

    function (){
        return document.getElementById("btn");
    }   調用這個函數，可以傳回一個按鈕
 
    如果想擷取一個圖檔标簽，("btn")裡面的值需要改為("im")，"im"和"btn"都是字元串，
    function (){
        var id="im";
        return document.getElementById("btn");
    }
var id="im";id是一個變量， return document.getElementById("btn");括号裡面可以放一個變量return document.getElementById(id);
變為：function (){
        return document.getElementById(id);
    }

最終給函數起個名字：
    function my$(id){
        return document.getElementById(id);
    }  這個函數可以給我一個任何的id屬性的值傳回一個對象


既然如此：document.getElementById("btn").onclick=function () {
        document.getElementById("im").src="images/1.jpg";
    };

就可以改為：
 myScript("btn").onclick=function () {
        myScript("im").src="images/1.jpg";
    };
*/
</script>
</body>

點選13：點選按鈕修改性别和興趣

<body>

<input type="button" value="按鈕" id="btn"/>
<input type="radio" value="1" name="sex"/>男
<input type="radio" value="2" name="sex" id="rad1"/>女
<input type="radio" value="2" name="sex"/>保密

<script>
    function my$(id) {
        return document.getElementById(id);
    }
    //規律：在表單标簽中，如果屬性和值隻有一個，并且值是這個屬性本身，那麼在寫js代碼DOM
    //操作的時候，這個屬性值是布爾類型就可以了
 
    my$("btn").onclick = function () {
        my$("rad1").checked = true;
    }
 /*
  my$("rad1").checked = "checked";點選的時候也是可以選中的
  my$("rad1").checked = "false";點選的時候也是可以的選中的
  my$("rad1").checked = "saldhjcsijd";點選的時候也是可以的選中的
  原因："checked"、"false和"saldhjcsijd"，這是一個非空字元串，,非空字元串轉布爾類型結果是true，
  是以my$("rad1").checked = true;預設給true就可以了
 * */

</script>
<br />

<input type="button" value="按鈕" id="btn2" />
<input type="checkbox" value="1" name="xinqu" id="ck1"/>吃飯
<input type="checkbox" value="2" name="xinqu" />睡覺
<input type="checkbox" value="3" name="xinqu" />打豆豆
<input type="checkbox" value="4" name="xinqu" id="ck2"/>打遊戲
<input type="checkbox" value="5" name="xinqu" />跑步
<input type="checkbox" value="6" name="xinqu" id="ck3"/>打羽毛球

<script>

    my$("btn2").onclick=function () {
      my$("ck1").checked=true;
      my$("ck2").checked=true;
      my$("ck3").checked=true;
    };
</script>
</body>

案例14：點選按鈕選擇菜單

<body>

<input type="button" value="點菜" id="btn1"/>
<select name="" id="sel">
    <option value="1">煎</option>
    <option value="2" id="opt2">炸</option>
    <option value="3">蒸</option>
    <option value="4">煮</option>
    <option value="5">炒</option>
    <option value="6">焖</option>
    <option value="7">焗</option>
</select>
<script src="common.js"></script>//這個就是自己取的js檔案名稱
<script>
    my$("btn1").onclick = function () {
        //點選按鈕選擇菜單
        my$("opt2").selected = true;
    };
</script>
<br/>
<br/>

<input type="button" value="按鈕" id="btn2"/>
<textarea name="" cols="30" rows="10" id="tt" readonly>
    不允許修改以下内容，呈隻讀模式：
    毫無理想而又優柔寡斷是一種可悲的心理。
    凡事要三思，但比三思更重要的是三思而行。
    生命是屬于你的，你應該根據自己的願望去生活。
    堅持，是生命的一種毅力;執行，是努力的一種堅持。
    當你的才華還撐不起你的野心時，那你就應該靜下心來學習。
    命不能争，運可以造，弱者認命，強者抗命，能者求命，智者造命。
    在一條不适合自己的路上奔波，就如同穿上一雙不合腳的鞋，會令你十分痛苦。
    很多時候，人并不是因為失敗而煩惱；而是因為失敗後找不到任何借口而煩惱。
</textarea>

<script>
    my$("btn2").onclick = function () {
        // my$("tt").value="已修改";推薦使用這個，因為看成了是表單的标簽
        // my$("tt").innerText="已修改";
        my$("tt").readonly = true;
    };
/*
在标簽中表示：
disabled 禁用
readonly 隻讀

html中屬性和值是自己的，并且隻有一個的，其實可以隻寫這個屬性，不用指派。
所有的表單标簽将來要送出，都是放在form裡面的
 
my$("tt").value="已修改";推薦使用這個
my$("tt").innerText="已修改";
value和innerText這個兩個都可以修改，推薦使用value，因為看成了是表單的标簽
innerText設定這個屬性的話，在浏覽器頁面和f12的Element都可以看
 */
</script>
</body>

案例15：點選按鈕設定div的寬和高和背景顔色

<body>
<input type="button" value="設定div的樣式" id="btn">
<div id="dv"></div>

<script>
    //凡是css中這個屬性是多個單詞的寫法，在js代碼中DOM操作的時候，把-去掉。後面的單詞的首字母大寫即可

    //點選按鈕修改div的寬、高、背景顔色
    document.getElementById("btn").onclick=function () {
        var dvObj=document.getElementById("dv");
        dvObj.style.width="200px";
        dvObj.style.height="200px";
        dvObj.style.backgroundColor="skyblue";
    };
</script>
</body>

案例16：點選按鈕設定div的樣式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            border:3px solid orange;
        }
    </style>
</head>
<body>
<input type="button" value="隐藏div" id="btn">
<div id="dv" ></div>
<script>
   document.getElementById("btn").onclick=function () {
        document.getElementById("dv").className="cls";
    };

 /*
    可以這麼寫：
    document.getElementById("btn").onclick=function () {
        var dvObj=my$("dv")
        dvObj.style.width="200px";
        dvObj.style.height="200px";
        dvObj.style.backgroundColor="skyblue";
        dvObj.style.border="5px solid skyblue";
    }

    也可以封裝，還可以連在一起寫
    在css樣式裡面，class這個名字不要叫類，可以叫類樣式，因為學習其他純對象語言的時候有類這個概念

    document.getElementById("btn").onclick=function () {
        document.getElementById("dv").class="cls";
    };
    document.getElementById("dv").class="cls";這麼寫思路是對的，但是代碼是錯的，打開浏覽器點選不出現效果，f12下面也沒有報錯。
    原因：
    在js代碼中，class是個關鍵字， 點這個class相當于為這個div添加這個class的一個屬性，
       但是這個屬性和上面的class(<div id="dv" class="cls"></div>)不是一回事,不能當做是一樣的。

    在js代碼中DOM操作的時候，設定元素的類樣式，不用class關鍵字，應該使用className
    document.getElementById("btn").onclick=function () {
        document.getElementById("dv").className="cls";
    };
 */
</script>

</body>      
document.getElementById("btn").onclick=function () {
        var dvObj=my$("dv")
        dvObj.style.width="200px";
        dvObj.style.height="200px";
        dvObj.style.backgroundColor="skyblue";
        dvObj.style.border="5px solid skyblue";
    }
    document.getElementById("btn").onclick=function () {
        document.getElementById("dv").className="cls";
    };
    下面的寫法要好于上面的。
    一般情況下，上面的元素操作樣式比較多，就用下面的，少的話就用上面（三條或者三條以上）      
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }

        .cls{
            display: none;
        }
    </style>

</head>
<body>

<input type="button" value="按鈕" id="btn" />
<div id="dv"></div>

<script>
    //點選按鈕，通過類樣式的方式設定div的顯示和隐藏
    document.getElementById("btn").onclick=function () {
        //判斷div是否應用了類樣式
        var dvObj=document.getElementById("dv");
        if (dvObj.className!="cls"){
            //現在是顯示狀态，應該隐藏
            dvObj.className="cls";
            this.value="顯示";
        }else {
            //隐藏的狀态，應該立刻顯示
            dvObj.className="";
            this.value="隐藏";
        }
    };
    /*
     dvObj.onclick=function () {
         console.log(dvObj.className);//div标簽裡面沒有設定class樣式，點選按鈕，在浏覽器f12的console裡面顯示的是空的
 //div标簽裡面設定了class樣式，點選按鈕，在浏覽器f12的console裡面有值了，顯示的是的是cls
         有值的時候是隐藏了，沒有值的時候是顯示了
     };
 */
</script>
</body>

案例18：網頁開關燈

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls{
            background-color: skyblue;
        }
    </style>
</head>
<body>
<input type="button" value="開/關燈" id="btn" />
<script>
    document.getElementById("btn").onclick=function () {
        //擷取body标簽
        document.body.className=document.body.className!="cls"?"cls":"";
    }
</script>
</body>
上一篇: 建構自己的Docker基礎鏡像
下一篇: 航天聯志:專注“定制化”