初识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关键字或保留字,可以使用字母、下划线、字符、数字,但不能用数字开头。
数据类型
- number js的不区分整数和浮点数
- string 字符串
- boolean true / false 布尔
- object null 数组
- function 函数
- 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{
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>