案例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>