點擊操作:------>事件: 就是一件事, 有觸發和響應, 事件源
按鈕被點擊,彈出對話框
- 按鈕---->事件源
- 點擊---->事件名字
- 被點了--->觸發了
- 彈框了--->響應
案例1：點擊按鈕彈出對話框
以下全部是理解，html和js代碼分離：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jane的自學轉行</title> </head> <body> <!--第一個版本--> <!--html代碼,點擊按鈕彈出對話框,對話框:alert()====>js的代碼--> <!--html代碼中嵌入了js的代碼,不方便后期的修改和維護--> <input type="button" value="顯示效果" onclick="alert('我被點了')" /> <!--最終的效果:應該把js代碼和html分離--> <!--第二個版本: js代碼很多,但是沒有分離html和js該怎么做--> <script> function f1() { //函數中可以寫很多的代碼 alert("這是一個對話框"); } </script> <input type="button" value="顯示效果" onclick="f1()" /> <!--開始分離html和js--> <input type="button" value="開始分離代碼" id="btn" /> <script> function f2() { alert("開發分離html和js代碼"); } //html標簽中的id屬性中存儲的值是唯一的, //id屬性就像人的身份證號碼一樣,不能重復,頁面中的唯一的標識 //從文檔中找到id值為btn的這個標簽(元素) //document.getElementById("id屬性的值");======>返回的是一個元素對象 //根據id獲取這個標簽(元素) var btnObj = document.getElementById("btn"); //為按鈕注冊點擊事件 btnObj.onclick = f2;//不加括號 </script> <!--最終的版本代碼:--> <input type="button" value="最終版" id="btn1" /> <script> // //根據id屬性的值從整個文檔中獲取這個元素(標簽) var btnObj1 = document.getElementById("btn1"); //為該元素注冊點擊事件 btnObj1.onclick = function () { alert("哦,這真是太好了"); }; //根據id屬性的值從整個文檔中獲取這個元素(標簽) //為該元素注冊點擊事件 document.getElementById("btn1").onclick = function () { alert("哦,這真是太好了"); }; </script> </body> </html>
最終代碼：
<input type="button" value="按鈕" id="btn" /> <script> var btnObj = document.getElementById("btn"); btnObj.onclick = function () { alert("哦，小蘇好帥哦"); }; // document.getElementById("btn").onclick = function () { // alert("哦，小蘇好帥哦"); // }; </script>
案例2：點擊按鈕顯示圖片
點擊按鈕的時候，設置img標簽的src屬性有一個圖片的路徑
<input type="button" value="顯示圖片" id="btn" /> <img src="" alt="" id="im" /> <script> var btnObj = document.getElementById("btn"); //為按鈕注冊點擊事件,添加事件處理函數 btnObj.onclick = function () { //根據id獲取圖片的標簽,設置圖片的src屬性值 var imObj = document.getElementById("im"); imObj.src = "images/liuyan.jpg"; //設置圖片的大小 imObj.width = "300"; imObj.height = "400"; };
案例3：點擊按鈕,修改p標簽的顯示內容
凡是成對的標簽,中間的文本內容,設置的時候,都使用innerText這個屬性的方式
<input type="button" value="設置p的內容" id="btn" /> <p id="p1">我是一個p標簽</p> <script> // 根據id獲取按鈕, 為按鈕注冊點擊事件, 添加事件處理函數 document.getElementById("btn").onclick = function () { //根據id獲取p標簽,設置內容 document.getElementById("p1").innerText = "這是一個p"; };
案例4：點擊按鈕修改a標簽的地址和熱點文字
1. a標簽在新頁面打開
2. 優化后：
<input type="button" value="顯示效果" id="btn" /> <a href="https://www.jiumodiary.com/" id="ak" target="_blank">鳩摩搜書</a> <script> //根據id獲取按鈕,注冊點擊事件,添加事件處理函數 // document.getElementById("btn").onclick = function () { // //根據id獲取超鏈接,設置href屬性 // document.getElementById("ak").href = "http://www.itcast.cn"; // //根據id獲取超鏈接,設置文字內容 // document.getElementById("ak").innerText = "傳智播客"; // }; //優化后的: document.getElementById("btn").onclick = function () { var aObj = document.getElementById("ak"); aObj.href = "http://www.itcast.cn"; aObj.innerText = "傳播智客"; }; </script>
案例5：點擊按鈕設置多個p標簽的文字內容
- document.getElementsByTagName("標簽的名字");返回的是一個偽數組,
- 無論獲取的是一個標簽,還是多個標簽,最終都是在數組中存儲的,這行代碼的返回值就是一個數組
<input type="button" value="請點擊以查看效果" id="btn" /> <div id="dv1"> <p>我是一朵小紅花開在春風里</p> <p>我是一朵小紅花開在春風里</p> <p>我是一朵小紅花開在春風里</p> <p>我是一朵小紅花開在春風里</p> <p>我是一朵小紅花開在春風里</p> </div> <div> <p>我是一顆小草，開在雪天里</p> <p>我是一顆小草，開在雪天里</p> <p>我是一顆小草，開在雪天里</p> <p>我是一顆小草，開在雪天里</p> </div> <script> document.getElementById("btn").onclick = function () { //獲取div里面的p var pObjs = document.getElementById("dv1").getElementsByTagName("p"); //遍歷數組設置文字 for (var i = 0; i < pObjs.length; i++) { pObjs[i].innerText = "我們都是p"; } }; </script>
實現效果：
案例6：點擊按鈕修改圖片的alt和title屬性
<input type="button" value="顯示效果" id="btn" /> <img src="images/cangjingkong.jpg" alt="和新浪吉祥物合影" title="參加新浪活動" /> <script> document.getElementById("btn").onclick = function () { var imgObjs = document.getElementsByTagName("img"); //ElementByTagName返回的是偽數組 imgObjs[0].alt = "改了"; imgObjs[0].title = "新浪" }; </script>
案例7：點擊按鈕修改所有文本框的值
<input type="button" value="請點擊修改文本框的值" id="btn"> <br /> <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 inputs = document.getElementsByTagName("input"); //判斷這個元素是不是按鈕 for (var i = 0; i < inputs.length; i++) { if (inputs[i].type != "button") { inputs[i].value = "兩只黃鸝鳴翠柳" } } }; </script>
案例8：點擊每個圖片彈出對話框
<img src="images/1.jpg" alt="" /> <img src="images/2.jpg" alt="" /> <img src="images/3.jpg" alt="" /> <script> var imgObjs = document.getElementsByTagName("img"); for (var i = 0; i < imgObjs.length; i++) { imgObjs[i].onclick = function () { alert("被點擊了"); }; }
案例9：點擊按鈕修改按鈕的value屬性
<input type="button" value="按鈕" id="btn" /> <script> //在某個元素的事件中,自己的事件中的this就是當前的這個元素對象 var btnObj = document.getElementById("btn"); btnObj.onclick = function () { //修改按鈕的value屬性 this.value = "我是按鈕"; this.type = "text"; this.id = "btn2"; //id也可以修改 }; </script>
案例10：點擊圖片修改自身的寬和高
<img src="images/liuyan.jpg" alt="" id="im" /> <script> var imgObj = document.getElementById("im"); imgObj.onclick = function () { this.width = "200"; this.height = "300"; }; </script>
案例11：排他功能
1. 所有按鈕value值設為默認值
2. 當前被點擊的按鈕另設置
<input type="button" value="沒懷孕" /> <input type="button" value="沒懷孕" /> <input type="button" value="沒懷孕" /> <input type="button" value="沒懷孕" /> <input type="button" value="沒懷孕" /> <script> //獲取所有的按鈕,分別注冊點擊事件 var btnObjs = document.getElementsByTagName("input"); //循環遍歷所有的按鈕 for (var i = 0; i < btnObjs.length; i++) { btnObjs[i].onclick = function () { //再用循環，把所有的按鈕的value值設置為默認的值 for (var j = 0; j < btnObjs.length; j++) { btnObjs[j].value = "沒懷孕"; } //當前被點擊的按鈕設置 this.value = "懷孕了"; //這里不能用btnObjs[i]，注意 }; } </script>
案例12：點擊圖片標簽,設置圖片標簽的src路徑為超鏈接中大圖的路徑
<a href="images/1.jpg" id="ak"> <img src="images/1-small.jpg" alt="小圖" id="im"> </a> <script> document.getElementById("im").onclick = function () { this.src = document.getElementById("ak").href; }; </script>
案例13：點擊按鈕修改圖片
根據id獲取對象--->封裝成一個函數
<input type="button" value="點擊顯示大圖" id="btn" /> <img src="images/1-small.jpg" alt="" id="im"> <script> function my$(id) { return document.getElementById(id); } my$("btn").onclick = function () { my$("im").src = "images/1.jpg"; }; </script>
案例14：點擊按鈕修改性別和興趣
1. 規律:在表單標簽中, 如果屬性和值只有一個, 並且值是這個屬性本身, 那么,
在寫js代碼,DOM操作的時候,這個屬性值, 是布爾類型就可以了
2. CSS實現就是radio里面的checked="checked"
<input type="button" value="修改性別" id="btn1"> <input type="radio" value="1" name="sex" />男 <input type="radio" value="2" name="sex" id="rad1" />女 <input type="radio" value="3" name="sex" />保密 <script> function my$(id) { return document.getElementById(id); } my$("btn1").onclick = function () { my$("rad1").checked = true; }; </script> <br /> <input type="button" value="選擇興趣" id="btn2" /> <input type="checkbox" value="1" name="xingqu" id="ck1" />吃飯 <input type="checkbox" value="1" name="xingqu" />睡覺 <input type="checkbox" value="1" name="xingqu" />打豆豆 <input type="checkbox" value="1" name="xingqu" id="ck2" />玩手機 <script> my$("btn2").onclick = function () { my$("ck1").checked = true; my$("ck2").checked = true; }; </script>
案例15：點擊按鈕選擇菜單
<input type="button" value="點菜" id="btn" /> <select name="" id="ss"> <option value="1">毛肚</option> <option value="2">鴨血</option> <option value="3" id="op1">鴨腸</option> <option value="4">海帶</option> <option value="5">金針菇</option> </select> <script src="common.js"></script> <script> my$("btn").onclick = function () { my$("op1").selected = true; }; </script>
附加：點擊按鈕修改文字框中的字
<script src="common.js"></script> <textarea name="" id="tt" cols="30" rows="10" readonly> 某人問智者, 大師:您覺得怎么做才是最快樂的? 回答說:不要和愚者辯論 這個人說:我不這么認為! 大師說:您說的對, 我就是這么帥 </textarea> <input type="button" value="注冊" id="btn2" /> <script> my$("btn2").onclick = function () { my$("tt").value = "嘎嘎"; //推薦用value，看成表單標簽 //my$("tt").innerText="哈哈"; };
案例16：點擊按鈕設置div的寬，高和背景顏色
css中這個屬性是多個單詞的寫法, 在js代碼中DOM操作的時候.把-干掉, 后面的單詞的首字母大寫即可
<!--一個按鈕 --> <input type="button" value="設置樣式" id="btn" /> <!-- 畫個盒子？ --> <div id="dv"></div> <!-- 引入common.js 里面存儲常用的js函數 --> <script src="common.js"></script> <!-- 另起一個script在里面寫 --> <script> my$("btn").onclick = function () { my$("dv").style.width = "300px"; my$("dv").style.height = "200px"; my$("dv").style.backgroundColor = "hotpink"; //css中這個屬性是多個單詞的寫法, 在js代碼中DOM操作的時候.把-干掉, 后面的單詞的首字母大寫即可 }; </script>
案例17：點擊按鈕顯示和隱藏div
<!-- 畫個按鈕 --> <input type="button" value="隱藏" id="btn" /> <!-- 畫個盒子 --> <div id="dv"></div> <!-- 引入common.js存儲常用的js函數 --> <script src="common.js"></script> <!-- 開始寫行為 --> <script> my$("btn").onclick = function () { // 點隱藏后div隱藏 按鈕文字變為顯示 if (this.value == "隱藏") { my$("dv").style.display = "none"; this.value = "顯示"; } else if (this.value == "顯示") { // 否則，點顯示后，div顯示，按鈕文字變為隱藏 my$("dv").style.display = "block"; this.value = "隱藏"; } }; </script>
案例18：點擊按鈕設置div的樣式
1. 在js代碼中DOM操作的時候,設置元素的類樣式,不用class關鍵字,應該使用,className
<head> <meta charset="UTF-8"> <title>jane自學轉行</title> <!-- <style> .cls { width: 300px; height: 200px; background-color: yellow; border: 2px solid red; } </style> --> <style> .cls { width: 300px; height: 200px; background-color: pink; border: 5px solid hotpink; ; } </style> </head> <body> <input type="button" value="設置樣式" id="btn" /> <div id="dv"></div> <script src="common.js"></script> <script> my$("btn").onclick = function () { //在js代碼中DOM操作的時候,設置元素的類樣式,不用class關鍵字,應該使用,className my$("dv").className = "cls"; }; </script>
案例19：點擊按鈕,通過類樣式的方式設置div的顯示和隱藏
<head> <meta charset="UTF-8"> <title>jane自學轉行</title> <style> div { width: 300px; height: 200px; background-color: pink; border: 5px solid hotpink; } .cls { display: none; } </style> </head> <body> <input type="button" value="隱藏" id="btn" /> <div id="dv"></div> <script src="common.js"></script> <script> my$("btn").onclick = function () { // console.log(my$("dv").className); if (my$("dv").className != "cls") { //現在是顯示的,應該隱藏 my$("dv").className = "cls"; this.value = "顯示"; } else { //隱藏的狀態----立刻顯示 my$("dv").className = ""; this.value = "隱藏"; } }; </script>
案例20：網頁開關燈
<head> <meta charset="UTF-8"> <title>jane自學轉行</title> <!-- <style> .cls { background-color: black; } </style> --> <style> .cls { background-color: black; } </style> </head> <body id="bd"> <input type="button" value="開/關燈" id="btn" /> <script src="common.js"></script> <script> my$("btn").onclick = function () { document.body.className = document.body.className != "cls" ? "cls" : ""; }; </script>