初识js（第一篇）

初识javascript

js是前端中作交互控制的语言，有了它，我们的前端页面才能“活”起来。学好这么语言显得非常重要，但是存在一定难度，所以一定要认真学习，充满耐心。

js书写规范

1.严格区分大小写

2.每一行完整的语句要用 ;

3.代码要缩进

4.js必须用半角符号

注册事件

document.getElementById获取div的id，点击发生事件

document.getElementById('box').onclick = function(){
	this.innerHTML = "<h1>this is innerhtml<h1>"
}

onmouseenter \ onmouseover 鼠标划入

onmouseleave \ onmouseout 鼠标划出（配对使用）

document.getElementById('box').onmouseover = function(){
			this.innerHTML = "hello!world"
		}
document.getElementById('box').onmouseout = function(){
			this.innerHTML = " "
		}

定义变量

var v_name = document.getElementById('id_name');

注：不能使用js关键字或保留字，可以使用字母、下划线、字符、数字，但不能用数字开头。

数据类型

1. number js的不区分整数和浮点数
2. string 字符串
3. boolean true / false 布尔
4. object null 数组
5. function 函数
6. undefined 未定义

例：
var a = 123;
alert(typeof a)

写入函数

document.write("hello,world!");可解析html标签
windows.onload =  function(){
    document.write("写入最后，重新生成页面")；
}注：window.onload作用是放在文档流最后解析

获取对象

获取id
var obox = document.getElementById('box');
        obox.onclick = function(){
    		alert('123')
    	}
获取class
var obox = document.getElementsByClassName('box')[2];
    	obox.onclick = function(){
    		alert('456')
    	}
获取标签
var obox = document.getElementsByTagName('div')[0];
    	obox.onmouseover = function(){
    		this.innerHTML = "<h1>test<h1>";
    	}
先获取父级ID，然后获取子级标签
    	var obox = document.getElementById('box');
    	var opx = obox.getElementsByClassName('op');
获取name,在input标签里使用
var names = document.getElementsById("user")[0];
        names.value = "hello";
更改id名称
    	obox.id = "qwe";

js更改样式

<style type="text/css">
            *{margin:0;padding:0;}
            #box{
            	width: 100px;
            	height: 100px;
            	background: green;
            }
            .op{
            	border:2px solid blue;
            }
</style>

<div id="box"></div>
    <button id="bn1">变换</button>
    <button id="bn2">还原</button>

    <script>
	    var obox = document.getElementById('box');
	    var onx1 = document.getElementById('bn1');
	    var onx2 = document.getElementsById('bn2');
	    onx1.onclick = function(){
	    	obox.className = "op";
	    }
	    onx2.onclick = function(){
	    	obox.className = "";
	    }
	</script>

for循环

		for(var i=0;i<4;i++){
			alert(i)
		}//循环

for(var i=0;i<5;i++){
			if(i == 2){
				continue;//跳过继续下一个
			}
			alert(i);
		}

附：

sublime快捷语法：#box>.op*3

效果：

<div id="box">
    	<div class="op"></div>
    	<div class="op"></div>
    	<div class="op"></div>
</div>

ul>li*5>a[herf="#"]{$}

<ul>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
</ul>