经典案例 (使用获取id的方法) · 前端菜鸟成长记

[TOC] #### 点击图片修改自身的宽度和高度 ``` <img src="images/liuyan.jpg" alt="" id="im"> //点击图片,修改自身的宽和高 var imgObj = document.getElementById("im"); imgObj.onclick = function () { /*imgObj.width = "200"; imgObj.height = "300";*/ this.width = "200"; this.height = "300"; } ``` ####设置和获取文本框的值 ``` <input type="text" value="文本框" id="txt"> <script src="publick.js"></script> <script> my$("txt").onblur = function () { this.value = "设置文本框的值哈哈";//设置文本框的值 console.log(this.value);//获取文本框的值 console.log(this.type);//获取input标签是什么类型的 console.log(this.id);//获取input标签id是什么 } </script> ``` #### 模拟搜索框（获取跟失去焦点事件） ``` ~~~ <style> input { color: gray; } </style> ~~~ <input type="text" value="请输入搜素内容" id="text"> ~~~ <script> my$("text").onfocus = function () {/*获取焦点事件*/ if(this.value == "请输入搜素内容"){ this.value = ""; this.style.color = "#000"; } }; my$("text").onblur =function () {/*失去焦点*/ if(this.value == ""){ this.value = "请输入搜素内容"; this.style.color = "gray"; } } </script> ~~~ ``` #### 阻止a链接跳转（三种） ``` <body> <a href="http://www.baidu.com" onclick=" alert('我被点击了'); return false">百度</a> <a href="http://www.baidu.com" onclick="f()">百度</a> <a href="http://www.baidu.com" id="ak">百度</a> </body> <script> function f() {/*第二种*/ alert("哈哈"); return false; } var ak = document.getElementById("ak"); ak.onclick = function () {/*第三种*/ alert("哎呀"); return false; } ~~~ ``` #### 点击小图变大图 ``` <a href="images/bird.png" id="big"><img src="images/tianshi.gif" alt=""></a> <img src="" id="ak" alt="">/*用来存放大图*/ <script> var big =document.getElementById("big");/*获取点击事件*/ big.onclick = function () {/*注册点击事件*/ document.getElementById("ak").src = this.href;/*让ak的链接src 等于big的href*/ return false;/*阻止a链接跳转*/ } </script> ``` #### 美女相册 ``` ~~~ <style> 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: 0 20px 20px 0; padding: 0; display: inline; } #imagegallery li a img { border: 0; } </style> ~~~ <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> var aObjs = document.getElementById("imagegallery").getElementsByTagName("a");/*获取imagegallery下的所有a链接事件源*/ for(var i = 0;i<aObjs.length;i++){/*遍历所有的事件源*/ aObjs[i].onclick = function () {/*给每个事件源注册点击事件*/ document.getElementById("image").src = this.href;/*改值*/ document.getElementById("des").innerText = this.title; return false;/*阻止a跳转*/ } } </script> ~~~ ``` #### div高亮显示 (鼠标经过的时候加入边框样式) ``` style> *{ margin: 0; padding: 0; } div{ width: 200px; height: 150px; background-color: pink; float: left; margin-left: 10px; border: 2px solid pink;/*默认给个边框，小技巧*/ } </style> <div></div> <div></div> <div></div> <div></div> <div></div> <script > var divs = document.getElementsTagName("div"); for(var i=0;i<divs.length;i++){ divs[i].onmouseover = function { this.style.border = "2px solid red"; }; divs[i].onmouseout = function { this.style.border = "";/*样式为空在鼠标离开后*/ } } </script> ``` #### 验证文本框密码长（value的长度超过10背景色为red，大于6同时小于10为粉） ``` <input type="text" value="" id="txt"> <script src="publick.js"></script> <script > //获取文本框 my$("txt").onblur=function () { //判断密码的长度 if(this.value.length>=6&&this.value.length<=10){ this.style.backgroundColor="red"; }else{ this.style.backgroundColor="green"; } }; </script> ``` #### 一个按钮实现显示和隐藏 ``` ~~~ input type="button" value="隐藏" id="btn"> <div id="dv"></div> ~~~ <script> var btn = document.getElementById("btn"); btn.onclick = function () { if(document.getElementById("dv").className != "cls"){/*判断盒子是否有这个类*/ //有则让盒子隐藏并更改事件源的值 document.getElementById("dv").className = "cls"; this.value = "显示"; }else{/有这个类的话则是让盒子隐藏同时更改事件源的值**/ document.getElementById("dv").className = ""; this.value = "隐藏"; } } </script> ~~~ ``` #### 网页开关灯效果（获取body标签修改背景色） ``` <style> .cls{ background: red; } </style> <input type="button" value="开/关灯" id="btn"> <script> var btn = document.getElementById("btn");/*事件源*/ btn.onclick = function () {/*点击事件*/ document.body.className = document.body.className != "cls" ? "cls" : "";/*判断body是否有cls这个类没有就添加有的话就为空*/ } </script> ``` ####点击按钮修改性别（checked） ``` ~~~ <input type="button" value="修改性别" id="btn"> <input type="radio" name="sex">男 <input type="radio" id="rad1" name="sex">女 <input type="radio" name="sex">保密 ~~~ ~~~ <script> var btn = document.getElementById("btn"); btn.onclick = function () {/*注册点击事件*/ document.getElementById("rad1").checked = true;/*checked 只判断对错，除了五个特殊值外其余转为布尔值都是true*/ } ~~~ ``` #### 列表隔行换色(奇红偶黄) ``` input type="button" value="隔行变色" id="btn"> <ul id="uu"> <li>红旗</li> <li>五菱宏光</li> <li>奔驰</li> <li>兰博基尼</li> <li>哈弗</li> <li>奥拓</li> <li>奥迪</li> <li>悍马</li> </ul> <script src="publick.js"></script> <script> var lists = my$("uu).getElementsTagName("li"); for(var i=0;i<lists.length;i++){ if(i%2 == 0){ list[i].style.backgroundColor = "yellow";/*数组下标从0开始*/ }else{ list[i].style.backgroundColor = "red"; } } </script> ``` #### 排他思想（tab栏必备）第一次：先将所有的标签内容改为没怀孕在当前的点击事件中添加想要跟别的样式不一样的值（我怀孕了） ``` <input type="button" value="没怀孕"> <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 = "怀孕了"; } } </script> ``` #### tab栏大盒子中分为上下两个盒子。通过自定义属性获取上面盒子的索引用于控制下面的盒子。在上下两个盒子里面分别做排他思想 ``` <style> * { margin: 0; padding: 0; } ul { list-style-type: none; } .box { width: 400px; height: 300px; border: 1px solid #ccc; margin: 100px auto; overflow: hidden; } .hd { height: 45px; } .hd span { display: inline-block; width: 90px; background-color: pink; line-height: 45px; text-align: center; cursor: pointer; } .hd span.current { background-color: purple; } .bd li { height: 255px; background-color: purple; display: none; /*先让所有的li隐藏*/ } .bd li.current { /*只让当前的显示*/ display: block; } </style> <div class="box" id="box"> <div class="hd"> <span class="current">体育</span> <span>娱乐</span> <span>新闻</span> <span>综合</span> </div> <div class="bd"> <ul> <li class="current">我是体育模块</li> <li>我是娱乐模块</li> <li>我是新闻模块</li> <li>我是综合模块</li> </ul> </div> </div> //获取最外面的div var box=my$("box"); //获取的是里面的第一个div var hd=box.getElementsByTagName("div")[0]; //获取的是里面的第二个div var bd=box.getElementsByTagName("div")[1]; //获取所有的li标签 var list=bd.getElementsByTagName("li");//================================= //获取所有的span标签 var spans=hd.getElementsByTagName("span"); //循环遍历的方式,添加点击事件 for(var i=0;i<spans.length;i++){ //在点击之前就把索引保存在span标签中 spans[i].setAttribute("index",i);//================================ spans[i].onclick=function () { //第一件事,所有的span的类样式全部移除 for(var j=0;j<spans.length;j++){ spans[j].removeAttribute("class"); } //第二件事,当前被点击的span应用类样式 this.className="current"; /*点击交互中谁要显示谁添加这个类*/ //span被点击的时候获取存储的索引值 //alert(this.getAttribute("index")); var num=this.getAttribute("index");//============================== //获取所有的li标签,每个li标签先全部隐藏 for(var k=0;k<list.length;k++){ list[k].removeAttribute("class"); } //当前被点击的span对应的li标签显示 list[num].className="current"; }; } ```