JS学习第二课
函数传参：参数就是占位符————当函数里定不下来东西的时候用参数
例子1：设置三个按钮点击改变div的颜色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>color</title> <style>#div1 {width:100px;height:200px;background:red}</style> <script> function toGreen() { var oDiv = document.getElementById(‘div1‘); oDiv.style.background = ‘green‘; } function toRed() { var oDiv = document.getElementById(‘div1‘); oDiv.style.background = ‘red‘; } function toYellow() { var oDiv = document.getElementById(‘div1‘); oDiv.style.background = ‘yellow‘; } </script> </head> <body> <input type = "button" value = "变绿" onclick="toGreen()"/> <input type = "button" value = "变红" onclick="toRed()"/> <input type = "button" value = "变黄" onclick="toYellow()"/> <div id = "div1"></div> </body> </html>
这种写法很笨用了，其实函数功能都一样，设置一个color参数 会更简单。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>color</title> <style>#div1 {width:100px;height:200px;background:red}</style> <script> function setColor(color) { var oDiv = document.getElementById(‘div1‘); oDiv.style.background = color; } </script> </head> <body> <input type = "button" value = "变绿" onclick="setColor(‘green‘)"/> <input type = "button" value = "变红" onclick="setColor(‘red‘)"/> <input type = "button" value = "变黄" onclick="setColor(‘yellow‘)"/> <div id = "div1"></div> </body> </html>
操作属性的第二种方法
什么时候用：要修改的属性不固定
例子：设置三个button，分别是div变宽，变高，变黄。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>color</title> <style>#div1 {width:100px;height:200px;background:red}</style> <script> function changeDiv(name,value) { var oDiv = document.getElementById(‘div1‘); oDiv.style[name] = value; //若写成oDiv.style.name 会没有用，计算机会认为name是一个叫做name的样式 } </script> </head> <body> <input type = "button" value = "变宽" onclick="changeDiv(‘width‘,‘200px‘)"/> <input type = "button" value = "变高" onclick="changeDiv(‘height‘,‘300px‘)"/> <input type = "button" value = "变黄" onclick="changeDiv(‘background‘,‘yellow‘)"/> <div id = "div1"></div> </body> </html>
注意此处获取属性的第二种方法用方括号（第一种用. 来获取），例如：oTxt.value = ‘abcd’ 和 oTxt[‘value’] = ‘abcd’,功能一样， 用这种方法就可以将属性名作为参数传递。
变量和字符串
观察到上面例子里的程序，凡是变量和参数都不加单引号’ ’ ， 其他都要加，例如name（参数），oDiv（变量）， ‘width’ 字符串。
style与className
—元素.style.属性 = xxx 是修改行间样式
— 之后再修改className不会有效果
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>color</title> <style> #div1 {width:100px;height:200px;border:1px solid black;} .box{background:red} </style> <script> function toRed() { var oDiv = document.getElementById(‘div1‘); oDiv.className = ‘box‘; } function toGreen() { var oDiv = document.getElementById(‘div1‘); oDiv.style.background = ‘green‘; } </script> </head> <body> <input type = "button" value = "变红" onclick="toRed()"/> <input type = "button" value = "变绿" onclick="toGreen()"/> <div id = "div1"></div> </body> </html>
这里变了绿就不能再变红了，因为style加样式和获取样式都是行间样式，行间样式优先级高于class。（样式优先级顺序 *<标签<class<id<行间）
所以建议：对于同一个元素，例如div，要么从都到尾操作class要么操作style，不用混着来。
提取行间事件
现在前端开发公司都提倡行为、样式、结构三者分离， 行为—js, 样式—css，结构—HTML。
所以尽量不写行间行为。
例子：小提示按钮。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function(){//页面加载完成发生 var oBtn = document.getElementById(‘btn1‘); oBtn.onclick = function () {//匿名函数 alert(‘a‘); } } </script> </head> <body> <input id = "btn1" type = "button" value = "按钮" /> </body> </html>
这里注意两点：
1.把js放在head里若不用window.onload会报错，因为js里的btn1在body中还没有加载出来。 window.onload就是起到页面加载完成后发生的作用， 注意后面 = function（）{…};的写法。
2.提取行间事件到js中，oBtn.onclick = function () {…} 为匿名函数写法，大部js中都这样写。 也 可以先定义 function abc(){…}，然后 oBtn.onclick = abc。
获取一组元素
—— getElementsByTagName
—— 利用循环
小例子：利用循环和获取一组元素来改变一组div颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{width:200px;height:200px;float:left;border:1px solid black;margin:10px;} </style> <script> window.onlaod = function () { var aDiv = document.getElementsByTagName(‘div‘); for (var i=0; i < aDiv.length; i++) { aDiv[i].style.background = ‘red‘; } }; </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
另一个例子：利用循环和获取组元素对十个checkbox 制作全选不选反选按钮。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function() { var oBtn1 = document.getElementById(‘btn1‘); var oBtn2 = document.getElementById(‘btn2‘); var oBtn3 = document.getElementById(‘btn3‘); var oDiv = document.getElementById(‘div1‘);//若不从oDiv中提取tagname会把所有标签为input的都提取了 包括了那三个button var aCh = oDiv.getElementsByTagName(‘input‘); oBtn1.onclick = function() { for (var i = 0 ;i < aCh.length;i++) { aCh[i].checked = true; } }; oBtn2.onclick = function() { for (var i = 0 ;i < aCh.length;i++) { aCh[i].checked = false; } }; oBtn3.onclick = function() { for (var i = 0;i < aCh.length;i++) { if(aCh[i].checked == true){aCh[i].checked = false;} else{aCh[i].checked = true;} } } }; </script> </head> <body> <input id = "btn1" type = "button" value = "全选"/><br/> <input id = "btn2" type = "button" value = "不选"/><br/> <input id = "btn3" type = "button" value = "反选"/><br/> <div id = "div1"> <input type ="checkbox"/><br/> <input type ="checkbox"/><br/> <input type ="checkbox"/><br/> <input type ="checkbox"/><br/> <input type ="checkbox"/><br/> <input type ="checkbox"/><br/> <input type ="checkbox"/><br/> <input type ="checkbox"/><br/> <input type ="checkbox"/><br/> <input type ="checkbox"/><br/> </div> </body> </html>
原文：https://www.cnblogs.com/jimmyrockcode/p/9244828.html