js中基本操作
1.操作标签值
<!DOCTYPE html> <html> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html"> <script type="text/javascript"> function changeValue(id){ var oTxt = document.getElementById(id); if(id == "in1") oTxt.value = "This is a input1!"; else oTxt['value'] = "This is a input2" } </script> <head> <title>操作属性</title> </head> <body> <input type="text" id="in1"> <button type="button" onclick="changeValue('in1')">设置值</button> <input type="text" id="in2"> <button type="button" onclick="changeValue('in2')">设置值</button> </body> </html>
结果：
2.标签的样式操作
<!DOCTYPE html> <html> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html"> <style type="text/css"> div{ width: 100px; height: 100px; } .box{ background-color: green; } </style> <script type="text/javascript"> function toRed(){ var oDiv = document.getElementById("div1"); oDiv.style.background = "red"; } function toGreen(){ var oDiv = document.getElementById("div1"); oDiv.className = "box"; } </script> <head> <title>操作属性</title> </head> <body> <button type="button" onclick="toRed()">变红</button> <button type="button" onclick="toGreen()">变绿</button> <div id="div1"></div> </body> </html>
通过style属性或者是className可以操作一个标签的样式，但是两者是有区别的sytle修改的是标签的行间样式，而className则为一个标签添加了一个class类而已。
下图中先点变绿后点变红会起作用，但是先点变红后点变绿则没有效果。
3.提取行间事件
通常可以在行间添加某个事件 <button type="button" onclick="toRed()">变红</button> ,但是在开发过程中基本上是将html css 和分离的，所以我们最好将行间的css和js提取出来
<!DOCTYPE html> <html> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html"> <style type="text/css"> div{ width: 100px; height: 100px; } </style> <script type="text/javascript"> window.onload = function (){ var oBtn1 = document.getElementById('btn1'); var oBtn2 = document.getElementById('btn2'); var oDiv = document.getElementById('div1'); oBtn1.onclick = function (){ oDiv.style.background = 'red'; } oBtn2.onclick = function (){ oDiv.style.background = 'green'; } } </script> <head> <title>操作属性</title> </head> <body> <button id="btn1" type="button">变红</button> <button id="btn2" type="button">变绿</button> <div id="div1"></div> </body> </html>
浏览器在解析页面时，是没读一行解释一行，而代码中window.onload是当页面加载完后才执行js代码。
<!DOCTYPE html> <html> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html"> <script type="text/javascript"> window.onload = function (){ var oBtn = document.getElementById('btn'); var flage = false; oBtn.onclick=function (){ var oDiv = document.getElementById('div1'); var oTags = oDiv.getElementsByTagName('input'); var i=0; if(flage == false){ while(i < oTags.length) oTags[i++].checked = true; flage = true; }else{ while(i < oTags.length) oTags[i++].checked = false; flage = false; } } } </script> <head> <title>操作属性</title> </head> <body> <button id="btn" type="button">全选</button><br> <div id="div1"> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> </div> </body> </html>
4.选项卡的实现
<!DOCTYPE html> <html> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html"> <head> <title>操作属性</title> <style type="text/css"> #div2 div{ width: 100px; height: 100px; background-color: gray; display: none; } .active{ background-color: orange; } </style> <script type="text/javascript"> window.onload = function (){ var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oBtns = oDiv1.getElementsByTagName('button'); var oDivs = oDiv2.getElementsByTagName('div'); for(var i=0;i < oBtns.length;i++){ oBtns[i].index = i; oBtns[i].onclick = function(){ for(var j=0;j<oBtns.length;j++){ oBtns[j].className = ''; oDivs[j].style.display = 'none'; } this.className = 'active'; oDivs[this.index].style.display = "block"; } } } </script> </head> <body> <div id="div1"> <button type="button" id="btn1" class="active" >按钮1</button> <button type="button" id="btn2" >按钮2</button> <button type="button" id="btn3" >按钮3</button> <button type="button" id="btn4" >按钮4</button> </div><br> <div id="div2"> <div style="display:block;">111</div> <div >222</div> <div >333</div> <div >444</div> </div> </body> </html>
更加简单的方式
<!DOCTYPE html> <html> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html"> <head> <title>操作属性</title> <style type="text/css"> #div2{ width: 100px; height: 100px; background-color: gray; } .active{ background-color: orange; } </style> <script type="text/javascript"> window.onload = function (){ var oTxts = ['1111', '2222', '3333', '4444']; var oDiv1 = document.getElementById('div1'); var oBtns = oDiv1.getElementsByTagName('button'); var oDiv2 = document.getElementById('div2'); for(var i=0;i < oBtns.length;i++){ oBtns[i].index = i; oBtns[i].onclick = function(){ for(var j=0;j<oBtns.length;j++){ oBtns[j].className = ''; } this.className = 'active'; oDiv2.innerHTML = oTxts[this.index]; } } } </script> </head> <body> <div id="div1"> <button type="button" id="btn1" class="active" >按钮1</button> <button type="button" id="btn2" >按钮2</button> <button type="button" id="btn3" >按钮3</button> <button type="button" id="btn4" >按钮4</button> </div><br> <div id="div2">1111</div> </body> </html> <!DOCTYPE html> <html> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html"> <head> <title>操作属性</title> <style type="text/css"> #div2{ width: 100px; height: 100px; background-color: gray; } .active{ background-color: orange; } </style> <script type="text/javascript"> window.onload = function (){ var oTxts = ['1111', '2222', '3333', '4444']; var oDiv1 = document.getElementById('div1'); var oBtns = oDiv1.getElementsByTagName('button'); var oDiv2 = document.getElementById('div2'); for(var i=0;i < oBtns.length;i++){ oBtns[i].index = i; oBtns[i].onclick = function(){ for(var j=0;j<oBtns.length;j++){ oBtns[j].className = ''; } this.className = 'active'; oDiv2.innerHTML = oTxts[this.index]; } } } </script> </head> <body> <div id="div1"> <button type="button" id="btn1" class="active" >按钮1</button> <button type="button" id="btn2" >按钮2</button> <button type="button" id="btn3" >按钮3</button> <button type="button" id="btn4" >按钮4</button> </div><br> <div id="div2">1111</div> </body> </html>
5.数组的使用
<!DOCTYPE html> <html> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html"> <head> <title>操作属性</title> <style type="text/css"> #div2{ width: 100px; height: 100px; background-color: gray; } .active{ background-color: orange; } </style> <script type="text/javascript"> window.onload = function (){ var oTxts = ['1111', '2222', '3333', '4444']; var oDiv1 = document.getElementById('div1'); var oBtns = oDiv1.getElementsByTagName('button'); var oDiv2 = document.getElementById('div2'); for(var i=0;i < oBtns.length;i++){ oBtns[i].index = i; oBtns[i].onclick = function(){ for(var j=0;j<oBtns.length;j++){ oBtns[j].className = ''; } this.className = 'active'; oDiv2.innerHTML = oTxts[this.index]; } } } </script> </head> <body> <div id="div1"> <button type="button" id="btn1" class="active" >按钮1</button> <button type="button" id="btn2" >按钮2</button> <button type="button" id="btn3" >按钮3</button> <button type="button" id="btn4" >按钮4</button> </div><br> <div id="div2">1111</div> </body> </html>
