初识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作用是放在文档流最后解析

获取对象

获取idvar obox = document.getElementById(‘box‘); ???????obox.onclick = function(){ ???????????alert(‘123‘) ???????}获取classvar 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>

初识js（第一篇）

原文地址：https://www.cnblogs.com/zhuzq/p/9534458.html