行为、样式、结构分离(JS/CSS/HTML)

1、不要加行间样式;

2、不要加行间事件


一、行间样式

<!DOCTYPE doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>
        Document
        </title>
        <style>
        #div1 {width: 200px;height: 200px;border: 1px solid black;}
        </style>
        <script>
        function toRed()
        {
        var oDiv=document.getElementById('div1');
        oDiv.style.background='red';  // style操作行间样式
        }
        </script>
        </meta>
    </head>
    <body>
        <input type="button" value="变红"/>
        <div id="div1">
        </div>
        <div id="div1" style="background: red none repeat scroll 0% 0%;">
        </div>
    </body>
</html>


2、样式优先级带来的问题

通配符*  <    标签   <   class   <   id   < 行间样式



先变绿,再变红;有效

 <div id="div1"></div>   -->    <div id="div1" class="color_green"></div>   --->  <div id="div1" class="color_green" style="background: red none repeat scroll 0% 0%;"></div>

先变红,再变绿;失效

 <div id="div1"></div>   -->   <div id="div1" style="background: red none repeat scroll 0% 0%;"></div>   --->   <div id="div1" style="background: red none repeat scroll 0% 0%;" class="color_green"></div>


建议:一直使用同一个class或者style



二、提取行间事件

<!DOCTYPE doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>
    Document
    </title>
    </meta>
  </head>
  <body>
    <input id="b1" type="button" value="按钮">
    <script>
    var ob=document.getElementById('b1');
    // 第一种:调用行距时间方法
    // ob.onclick=abc
    // function abc(){
    //  alert('abc')
    // }
    
    //第二种:匿名函数(
    ob. () {alert('abc')}
    </script>
    </input>
  </body>
</html>


script 在body之前,出现加载错误;正确使用window.onload函数

错误示例:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script>
		var ob=document.getElementById('b1');
		// ob.onclick=abc
		// function abc(){
		//  alert('abc')
		// }
		ob. () {alert('abc')}
		</script>
		
	</head>
	<body>
		<input type="button" id="b1" value="按钮">
	</body>
</html>


正确示例:

<!DOCTYPE doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>
        Document
        </title>
        <script>
        //  ---> 页面加载完成后再执行
        window.onload=function(){
        var ob=document.getElementById('b1');
        // ob.onclick=abc
        // function abc(){
        //  alert('abc')
        // }
        ob. () {alert('abc')}
        }
        }
        
        </script>
        </meta>
    </head>
    <body>
        <input id="b1" type="button" value="按钮">
        </input>
    </body>
</html>



三、获取元素数组:getElementsByTagName;循环while/for

<!DOCTYPE doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>
                Document
            </title>
            <style>
                div {width: 200px;height: 200px;float: left;border: 1px solid black;margin: 10px;}
            </style>
            <script>
                window.onload=function(){
				   //数组
				   var arr_div=document.getElementsByTagName('div')

				   // alert(arr_div.length)   --->  元素数量

				   //while循环
				   // var i=0
				   // while(i<arr_div.length){
				   //  arr_div[i].style.background="red";
				   //  i++;
				   // }

				   //for循环
				   for(var i=0;i<arr_div.length;i++){
				    arr_div[i].style.background='green'
				   }

				}
            </script>
        </meta>
    </head>
    <body>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
    </body>
</html>



四、全选、反选、取消

<!DOCTYPE doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>
		Document
		</title>
		</meta>
	</head>
	<script>
	window.onload=function(){
			var ob1=document.getElementById('b1');
			ob1.onclick=function(){
			var arr_div=document.getElementById('div1').getElementsByTagName('input')
			for(var i=0;i<arr_div.length;i++){
				arr_div[i].checked=true
				}
				}
				var ob2=document.getElementById('b2');
				ob2.onclick=function(){
				var arr_div=document.getElementById('div1').getElementsByTagName('input')
				for(var i=0;i<arr_div.length;i++){
					arr_div[i].checked=false
					}
					}
					var ob3=document.getElementById('b3')
					ob3.onclick=function(){
					var arr_div=document.getElementById('div1').getElementsByTagName('input')
					for(var i=0;i<arr_div.length;i++){
						arr_div[i].checked=!arr_div[i].checked
						}
						}
						}
				</script>
				<body>
					<input id="b1" type="button" value="全选">
					<input id="b2" type="button" value="取消">
					<input id="b3" type="button" value="反选">
					<div id="div1">
						<!--  常用技巧,外层套一个div -->
						<input type="checkbox">
						<input type="checkbox">
						<input type="checkbox">
						<input type="checkbox">
						<input type="checkbox">
						<input type="checkbox">
						<input type="checkbox">
						<input type="checkbox">
						<input type="checkbox">
						<input type="checkbox">
						</input>
						</input>
						</input>
						</input>
						</input>
						</input>
						</input>
						</input>
						</input>
						</input>
					</div>
					'
					</input>
					</input>
					</input>
				</body>
			</html>

五、选项卡

this:当前事件的元素

<!DOCTYPE doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>
		Document
		</title>
		<script>
		window.onload=function(){
						var ob=document.getElementById('div1').getElementsByTagName('input')
						var od=document.getElementById('div1').getElementsByTagName('div')
						
						//所有按钮添加事件及属性
						for(var i=0;i<ob.length;i++){
						ob[i].index=i;  //新增按钮属性
						ob[i].onclick=function(){
						for(var i=0;i<ob.length;i++){
						ob[i].className=""
						od[i].style.display="none"
						}
						this.className='active'
						od[this.index].style.display='block'
						}
						}
						}
		</script>
		<style>
		#div1 .active {background: yellow;}
						#div1 div {width: 200px;height: 200px;border: 1px solid black;display: none;}
		</style>
		</meta>
	</head>
	<body>
		<div id="div1">
			<input id="b1" type="button" value="教育">
			<input id="b2" type="button" value="培训">
			<input id="b3" type="button" value="招生">
			<input id="b4" type="button" value="出国">
			<div>
				1
			</div>
			<div>
				22
			</div>
			<div>
				333
			</div>
			<div>
				4444
			</div>
			</input>
			</input>
			</input>
			</input>
		</div>
	</body>
</html>


六、innerHTML

<!DOCTYPE doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>
		Document
		</title>
		<style>
		#div1 {width: 200px;height: 150px;border: 1px solid black;}
		</style>
		<script>
		window.onload=function(){
						var ot=document.getElementById('t1')
						var ob=document.getElementById('b1')
						var od=document.getElementById('div1')
						//可以输入html:<h1>标题</h1> <p>内容</p>
						ob.onclick=function(){
						od.innerHTML=ot.value
						}
						}
		</script>
		</meta>
	</head>
	<body>
		<input id="t1" type="text">
		<input id="b1" type="button" value="按钮">
		<div id="div1">
		</div>
		</input>
		</input>
	</body>
</html>