JS学习

JS的作用

1，修改HTML页面的内容
2，修改HTML页面的样式

JS的组成部分

1，ECMAScript：js的基础语法（规定、关键字、运算符、语句、函数等等）
2，BOM：浏览器对象模型
3，DOM：文档对象模型

JS的引入方式

①内联方式：

在页面中写：
<script>
    JS代码；
</script>

②引入外部.js文件

<script src="外部JS文件路径"/>

JS的触发事件(什么时候才会触发JS)

常见JS事件：

onclick:点击
onsubmit：onSubmit="return 函数名()"，该函数返回boolean类型的值，true则可提交，false提交失败
onload:页面或者图片加载完成
onchange:用户输入改变字段内容

onfocus:输入框获取焦点
onblur:输入框失去焦点

JS函数的编写（触发函数之后如何执行）

格式1：
function 函数名(参数){
    函数体；
}

格式2：
var f1 = function(){
    函数体；
}
//接着给元素派发事件
document.getElementById("btn").click=f1;

函数体中的操作：
1，根据元素的id获取元素(单个元素)：var obj = document.getElementById("id名");

1.2，根据标签名获取一类元素(数组)：var array=document.getElementsByTagName("标签名");

1.4，根据Class名称获取一类元素(数组)：var array=document.getElementsByClassName("Class名称");

1.6，根据name名称获取一类元素(数组)：var array=document.getElementsByName("name名称");

2，根据元素获取元素的值：var objValue = obj.value;

3，往元素里面插入内容：obj.innerHTML="插入的内容";

4，修改元素的某个属性值：obj.属性名="修改的内容"; 
如<img id="imgId" src="/pic/999.jpg"/>
修改其src路径的方式为：
var obj = document.getElementById("imgId");
obj.src="新的图片路径";

5，修改元素的样式：
obj.style.backgroundColor="#2196F3";
obj.style.width="200px";
obj.style.height="300px";

浏览器对象模型BOM

①window对象：

常用方法：
1，消息框：
alert("警告信息")；警告框
confirm("你确定要删除？")；确认框，返回boolean
prompt("请输入你的姓名?")；输入框，返回输入值

2，定时器：
var id=setInterval(method，time);每个time毫秒，就会执行一次method方法
var id=setTimeout(method,time);经过time毫秒后，仅会执行一次method方法
clearInterval(id);清除该id的定时器；
clearTimeout(id);清除该id的定时器；

3，打开和关闭
open(url);打开
close()；关闭

②location对象：

常用属性：href
获取当前地址：location.href;
设置当前地址：location.href="新地址";

③history对象：

常用方法：go(int num)；
前进：go（1）；
后退：go（-1）；

文档对象模型

刚才上面获取到的元素，即为DOM对象