初识JS的魅力(4)
2017-03-14 10:25
197 查看
1. style与className
元素.style.属性 = xxx 无论如何都是从行间取的样式。className是控制物体的class;先修改style之后再修改className不会有效果——优先级的问题
对于同一个标签,要不用style要不用class或者其他,不要混合使用。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1 { width: 200px; height: 200px; border: 1px solid black; } .box { background: red; } </style> <script> function toRed() { var oDiv = document.getElementById('div1'); // oDiv.style.background = 'red'; //alert(oDiv.style.background); 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>
2. 提取行间事件
把onclick从行间拿出来。<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>提取行间事件</title> </head> <body> <input id = "btn1" type="button" value="按钮"/> <script> var oBtn = document.getElementById('btn1'); function abc(){ alert('a'); } oBtn.onclick = abc ; </script> </body> </html>
3. 匿名函数
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>提取行间事件</title> </head> <body> <input id = "btn1" type="button" value="按钮"/> <script> var oBtn = document.getElementById('btn1'); oBtn.onclick = function { alert('a'); } ; </script> </body> </html>
4. 提取事件2
把script提取到head里面<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <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>
5. 总结提取事件
行为(JS)、样式(CSS)、结构(HTML)三者分离:别加行间样式,别加行间JS事件。6. 循环
while<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>循环</title> <script> var i = 0; //1.初始化 while (i < 5) { //2.条件 alert(i); // 3.语句 //i = i + 1; //4.自增 i++; } </script> </head> <body> </body> </html>
for
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>循环</title> <script> for (var i = 0; i < 5; i++) { alert(i); } </script> </head> <body> </body> </html>
7. 获取一组元素——getElementsByTagName——数组的使用
使用循环前 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>提取行间事件</title> <style> div { width: 200px; height: 200px; float: left; border: 1px solid black; margin:10px; } </style> <script> window.onload = function () { var aDiv = document.getElementsByTagName('div'); // alert(aDiv.length); //aDiv.style.background = 'red'; 一次只能对一个元素设置。 aDiv[0].style.background = 'red'; //使用数组的下标,太过繁琐,所以要利用循环操作。 aDiv[1].style.background = 'red'; aDiv[2].style.background = 'red'; aDiv[3].style.background = 'red'; } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
使用循环后 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>提取行间事件</title> <style> div { width: 200px; height: 200px; float: left; border: 1px solid black; margin: 10px; } </style> <script> window.onload = function () { var aDiv = document.getElementsByTagName('div'); // alert(aDiv.length); //aDiv.style.background = 'red'; 一次只能对一个元素设置。 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>
8. 全选、不选和反选
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload = function () { var oBtn1 = document.getElementById('btn1'); var oBtn2 = document.getElementById('btn2'); var oBtn3 = document.getElementById('btn3'); var odiv1 = document.getElementById('div1'); var aCh = odiv1.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> <input type="checkbox"/><br> </div> </body> </html>
相关文章推荐
- 初识JS的魅力(1)
- 初识JS的魅力(3)
- <一>初探js特效魅力之鼠标悬浮事件01
- 感受JS的魅力——网页版超级玛丽
- node.js系列笔记之node.js初识《一》
- <一>初探js特效魅力之数组06
- <一>初探js特效魅力之全选不选反选04
- 初探js特效魅力之定时器的使用one
- node.js系列笔记之node.js初识《一》
- <一>初探js特效魅力之函数传参03
- <一>初探js特效魅力之选项卡05
- 【原创】cs+html+js+css模式(一):初识新模式
- 1.初识backbone.js
- JavaScript高级程序设计(第3版)学习笔记6 初识js对象
- 1、初识backbone.js
- 初识js代码
- javascript继承学习系列之一:初识JS的OOP
- 感受JS的魅力——网页版超级玛丽
- 初识js
- <一>初探js特效魅力之选项卡05