javascript

1.事件的步骤

var btn = document.getElementById('btn');

btn.onclick = function() {

     alert('鼠标单击事件');//鼠标点击事件

}

2.常见的鼠标事件

onclick 鼠标点击左键触发

onmouseover 鼠标经过触发

onfocus 获得鼠标焦点触发

onblur 失去鼠标焦点触发

onmousemove 鼠标移动触发

onmouseup 鼠标弹起触发

onmousedown   鼠标按下触发

3.操作元素内容

element.innerText   从起始位置到终止位置的内容，去除了html标签，空格换行也会去掉。

element.innerHtml  起始位置到终止位置的全部内容，包括了HTML标签，同时保留了空格与换行符。

<input type="button" name="onname"  value="白日依山尽"/><br/><br/><br/>
<div>下一句</div>


<script>
	 var btn = document.querySelector('input');
	 var ele_div = document.querySelector('div');
	 btn.onclick = function(){
		 // ele_div.innerText = "日久见人心";
		 ele_div.innerHTML = "<span style='color:red;'>日久见人心</span>";	 }
</script>

4.常见的元素属性 

<a href="http://www.baidu.com/">百度</a>
<input type="button" name="" value="改变链接地址" />
	  
<script>
	    var btn  = document.querySelector('input');
		var objA = document.querySelector('a');
		btn.onclick = function(){
		        objA.innerText = "QQ官网";
				objA.href="http://www.qq.com/";
objA.title="点击去qq网站";
			}	  
</script>

 

5.表单元素的属性操作

表单属性：type、value、checked、selected、disabled

btn.value = "被点击啦";

btn.disabled  =  true;//按钮禁用

btn.type  =  "text";//改变input框的类型

6.样式属性操作

element.style           行业样式操作

element.className      类名样式操作

<div>盒子</div>
<script>   
	var divObj = document.querySelector("div");
	divObj.onclick = function(){
			this.style.background = "red";
			this.style.width = "200px";
	}  
</script>

class是保留关键词，所有用className来更改类名

this.className = "box";

this.className = "box box1";