案例1：點擊按鈕禁用文本框 <input type="button" value="禁用文本框" id="btn" /> <input type="text" value="文本框" id="txt" /> <script> document.getElementById("btn").onclic ...
案例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++
