案例1：點擊按鈕禁用文本框
<input type="button" value="禁用文本框" id="btn" /> <input type="text" value="文本框" id="txt" /> <script> document.getElementById("btn").onclick = function () { document.getElementById("txt").disabled = true; }; </script>
案例2：點擊按鈕修改串列的背景顏色
<input type="button" value="變色" id="btn" /> <ul id="uu"> <li>王陸</li> <li>海云帆</li> <li>聞寶</li> <li>琉璃仙</li> <li>王舞</li> </ul> <script> document.getElementById("btn").onclick = function () { document.getElementById("uu").style.backgroundColor = "pink"; }; </script>
案例3：點擊超鏈接彈出對話框，但阻止超鏈接的默認的跳轉
先執行彈框，用return false停止事件
<!--第一種寫法:--> <a href="http://www.baidu.com" onclick="alert('哎呀我被點了'); return false">百度1</a> <!--第二種寫法--> <script> function f1() { alert("好漂亮呀"); return false; } </script> <a href="http://www.baidu.com" onclick="return f1()">百度2</a> <!--第三種寫法:--> <a href="http://www.baidu.com" id="ak">百度3</a> <script> document.getElementById("ak").onclick = function () { alert("嘎嘎"); return false; }; </script>
案例4：點擊小圖，下面顯示大圖
<a href="images/1.jpg" id="ak"> <img src="images/1-small.jpg" alt=""> </a> <img src="" alt="" id="big"> <script src="common.js"></script> <script> //點擊超鏈接 my$("ak").onclick = function () { //big圖片的src變成當前物件的地址href my$("big").src = this.href; return false; //阻止默認超鏈接挑轉 }; </script>
案例5：美女相冊
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { font-family: "Helvetica", "Arial", serif; color: #333; background-color: #ccc; margin: 1em 10%; } h1 { color: #333; background-color: transparent; } a { color: #c60; background-color: transparent; font-weight: bold; text-decoration: none; } ul { padding: 0; } li { float: left; padding: 1em; list-style: none; } #imagegallery { list-style: none; } #imagegallery li { margin: 0px 20px 20px 0px; padding: 0px; display: inline; } #imagegallery li a img { border: 0; } </style> </head> <body> <h2> 美女畫廊 </h2> <ul id="imagegallery"> <li><a href="images/1.jpg" title="美女A"> <img src="images/1-small.jpg" width="100" alt="美女1" /> </a></li> <li><a href="images/2.jpg" title="美女B"> <img src="images/2-small.jpg" width="100" alt="美女2" /> </a></li> <li><a href="images/3.jpg" title="美女C"> <img src="images/3-small.jpg" width="100" alt="美女3" /> </a></li> <li><a href="images/4.jpg" title="美女D"> <img src="images/4-small.jpg" width="100" alt="美女4" /> </a></li> </ul> <div style="clear:both"></div> <!--顯示大圖的--> <img id="image" src="images/placeholder.png" alt="" width="450" /> <p id="des">選擇一個圖片</p> <script src="common.js"></script> <script> //從ul中標簽獲取獲取所有的a標簽 var aObjs = my$("imagegallery").getElementsByTagName("a"); //回圈遍歷所有的a標簽 for (var i = 0; i < aObjs.length; i++) { //為每個a標簽注冊點擊事件 aObjs[i].onclick = function () { //為id為image的標簽的src賦值 my$("image").src = this.href; //為p標簽賦值 my$("des").innerText = this.title; //阻止超鏈接默認的跳轉 return false; }; } </script> </body> </html>
實作效果：
案例6：串列隔行變色
練習的時候，因為background拼寫錯誤，找bug找了很久....在加入console.log("哈哈")測驗后，大致定位到改背景顏色部分出錯，
<!-- 奇黃偶綠 --> <input type="button" value="隔行變色" id="btn" /> <ul id="brandlist"> <li>雅詩蘭黛</li> <li>蘭蔻</li> <li>契爾氏</li> <li>海藍之謎</li> <li>歐舒丹</li> <li>雅頓</li> </ul> <script src="common.js"></script> <script> // my$("btn").onclick = function () { // //獲取所有li標簽 // var list = my$("brandlist").getElementsByTagName("li"); // for (var i = 0; i < list.length; i++) { // if (i % 2 == 0) { // list[i].style.backgroundColor = "yellow"; // } else { // list[i].style.backgroundColor = "green"; // } // } // }; //優化后 my$("btn").onclick = function () { var list = my$("brandlist").getElementsByTagName("li"); for (var i = 0; i < list.length; i++) { list[i].style.backgroundColor = i % 2 == 0 ? "yellow" : "green"; } }; </script>
案例7：滑鼠劃過，顯示和隱藏二維碼
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .nodeSmall { width: 50px; height: 50px; background: url(images/bgs.png) no-repeat -159px -51px; position: fixed; right: 10px; top: 40%; } .erweima { position: absolute; top: 0; left: -150px; } .nodeSmall a { display: block; width: 50px; height: 50px; } .hide { display: none; } .show { display: block; } </style> </head> <body> <div class="nodeSmall" id="node_small"> <a href="#"></a> <!--錨定--> <div class="erweima hide" id="er"> <img src="images/456.png" alt="" /> </div> </div> <script src="common.js"></script> <script> ////獲取滑鼠要進入的a標簽 var aObj = my$("node_small").getElementsByTagName("a")[0]; //為a注冊滑鼠進入 aObj.onmouseover = function () { my$("er").className = "erweima show"; }; //為a注冊滑鼠離開 aObj.onmouseout = function () { my$("er").className = "erweima hide"; }; </script> </body> </html>
案例8：根據Name屬性值獲取元素
<input type="button" value="顯示效果" id="btn" /> <br /> <input type="text" value="你好" name="name1" /> <br /> <input type="text" value="你好" name="name3" /> <br /> <input type="text" value="你好" name="name2" /> <br /> <input type="text" value="你好" name="name1" /> <br /> <input type="text" value="你好" name="name1" /> <br /> <script src="common.js"></script> <script> my$("btn").onclick = function () { var inputs = document.getElementsByName("name1"); for (var i = 0; i < inputs.length; i++) { inputs[i].value = "我很好"; } }; </script>
實作效果：
案例9：點擊按鈕設定應用cls類樣式的標簽的背景顏色為hotpink
getElementsByClassName();------>h5的, IE8及以下不支持<p>第一個p標簽</p> <p class="cls">第二個p標簽</p> <span>第一個行內元素span</span> <br /> <span class="cls">第二個行內元素span</span> <br /> <div>第一個盒子</div> <br /> <div class="cls">第二個盒子</div> <br /> <input type="button" value="顯示效果" id="btn" /> <br /> <script src="common.js"></script> <script> my$("btn").onclick = function () { //根據類樣式的名字來獲取元素 var objs = document.getElementsByClassName("cls"); for (var i = 0; i < objs.length; i++) { //設定每個元素的背景顏色 objs[i].style.backgroundColor = "hotpink"; } };
案例10：點擊按鈕彈出對話框--->根據選擇器的方式獲取元素
<input type="button" value="顯示效果" id="btn"/> <p>這是一個p</p> <p class="cls">這是一個p</p> <span>這是一個span</span> <span class="cls">這是一個span</span> <script src="common.js"></script> <script> //點擊按鈕彈出對話框 //根據選擇器的方式獲取元素 // var btnObj= document.querySelector("#btn"); // btnObj.onclick=function () { // alert("哈哈,我又變帥了"); // }; var objs=document.querySelectorAll(".cls"); for(var i=0;i<objs.length;i++){ objs[i].style.backgroundColor="green"; } </script>
案例11：div邊框高亮顯示
<head> <meta charset="UTF-8"> <title>jane自學轉行</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 150px; background-color: pink; float: left; margin-top: 5px; margin-left: 10px; /* 加同色邊框解決抖動問題 */ border: 2px solid pink; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <script src="common.js"></script> <script> //獲取所有div var dvObjs = document.getElementsByTagName("div"); //遍歷div for (var i = 0; i < dvObjs.length; i++) { //為每個div添加滑鼠進入的事件 dvObjs[i].onmouseover = function () { this.style.border = "2px solid hotpink"; }; //為每個div添加滑鼠進入的事件 dvObjs[i].onmouseout = function () { this.style.border = ""; }; } </script> </body>
案例12：模擬搜索框，獲得焦點和失去焦點
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> input { color: gray; } </style> </head> <body> <input type="text" value="請輸入搜索內容" id="txt"> <script src="common.js"></script> <script> //獲取文本框 //注冊獲取焦點的事件 my$("txt").onfocus = function () { //判斷文本框的內容是不是默認的內容 if (this.value == "請輸入搜索內容") { //是默認內容就清空默認，字體顏色變為黑色 this.value = ""; this.style.color = "black"; } }; //注冊獲取焦點的事件 my$("txt").onblur = function () { //判斷文本框是否空，空的話就重新設定默認文字和顏色 if (this.value == "") { this.value = "請輸入搜索內容"; this.style.color = "gray"; } }; </script> </body> </html>
案例13：驗證文本密碼框長度
<input type="password" id="txt"> <script src="common.js"></script> <script> my$("txt").onblur = function () { if (this.value.length >= 6 && this.value.length <= 10) { this.style.backgroundColor = "green"; } else { this.style.backgroundColor = "red"; } }; </script>
案例14：設定和獲取文本框的值
<input type="text" value="文本框" id="txt" /> <script src="common.js"></script> <script> //設定和獲取文本框的值 my$("txt").onblur = function () { this.value = "鋤禾日當午"; console.log(this.value); }; </script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/165618.html
標籤：JavaScript