初识JS

ECMA:欧洲计算机制造商协会
ECMAScript1.0:制定了JavaScript 标准。

一、1.JS是什么？
是基于对象与事件驱动的解释性脚本语言。
组成：
ECMAScript:js的语法标准；
DOM：Document Object Model 文档对象模型；
BOM：Browser Object Model 浏览器对象模型

2.引入方式
A：行间引入
相同引号不能嵌套；

B：外链引入
< script type src=“地址”< /script>
注意：这个script标签中不能再放置其他的js代码，因为不会被浏览器执行，浏览器导入地址后默认执行完毕，直接跳过，不会读取内容。

C：内嵌< script>
script标签可以有多个，可以存放在任意位置。
一般放在head标签中或者是body的末尾。建议加在body的末尾。
执行顺序：从上往下执行，遇到script标签以后会暂停往下执行，先执行script标签中的内容，等script标签中的内容执行完以后，才会继续往下执行。

3.变量
存储数据的容器。
声明方式： var 变量名 = 值；
命名规则：
A，只能以字母开头、___、$开头
B，不能使用关键字，保留字
C，见名知意，遵循驼峰标识
D ，不要重名

4.调试命令
alert（）：在页面里弹出，但是一次只能弹出一个；
console.log（）在控制台打印。
附：window.onload 的作用：等文档和资源都加载完后再调用；

5.简单使用
A，找到谁：document.getElementById(“id名”)
在文档中 获取 标签 通过 ID
B , 添加什么事情
标签.事件
C，要做什么事情
标签.事件 = function（）{
要做的事情
}
例如：
A:找到谁：document.getElementById(“id名”)
document.getElementById(“btn”);
alert(document.getElementById(“btn”));
B:添加什么事件：onclick
document.getElementById(“btn”).onclick
c:要做什么事情 标签.事件 = function (){ 要做的事情 }
document.getElementById(“btn”).onclick = function(){
alert(“小可爱”);
}

二、操作标签属性

1.操作标签内容
A.input标签
语法：
获取：var 变量 = 标签.value;
设置：标签.value = 值；
B.闭合标签
语法：
获取：var 变量 = 标签.innerHTML;
设置：标签.innerHTML = 值；
特点：后面的会覆盖前面的，可以识别标签；
innerText不能识别标签；

例1：操作input标签
//1.获取input的内容 标签.value
var oIn = document.getElementById(“in”);
var v = oIn.value;
console.log(v);
//2.设置input的内容 标签.value = 值
oIn.value = “66”;

例2：操作闭合标签内容
//1.获取div的内容 标签.innerHTML
var inner = oDiv.innerHTML;
console.log(inner); //Who？ HI，I am …
//2.设置 ： 标签.innerHTML = “值”
oDiv.innerHTML = “111”;
特点：
//3.保留之前的 之前的+现在的
oDiv.innerHTML = oDiv.innerHTML + “111”;
oDiv.innerHTML += “111”; //+= 在后面追加

//4.可以识别标签
oDiv.innerHTML += “< strong>111</ strong>”;
可以识别
//oDiv.innerText += “< strong>111</ strong>”;
不可识别

2.操作标签属性
标签属性指开始标签中的内容：< div id class title>< /div>
语法：
获取：var c = 标签.属性名
设置：标签.属性名 = 属性值
注意：所有的属性都是这个语法，但是有一个特殊，就是class标签.className

例1：获取标签id名
//2.获取var c = 标签.属性名
var id = oDiv.id;
console.log(id);
例2：设置img的src
oImg.src =“img/4.jpg” ; //引号中的内容，原样输出

3.操作标签样式
标签样式是指在style中书写的样式值，如width:100px
语法：
获取：标签.style.属性名
设置：标签.style.属性名 = 属性值
注意：所有的样式都是这个语法，但是有一个特殊，就是有【-】符的样式，例如font-size，js中不允许出现-,使用驼峰标识fontSize
例：
var oDiv = document.getElementById(“box”);
oDiv.onmouseover = function () {

oDiv.style.background = "skyblue";
oDiv.style.width = "200px";
oDiv.style.fontSize = "26px";
//oDiv.style.display = "none";

}
4.cssText
相当于是一个style属性，设置cssText会覆盖掉之前行间的style属性
oDiv.style.cssText =“width:200px;background:skyblue;font-size:26px;”;