經典案例 (使用獲取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"; }; } ```