js

1、简介
JavaScript是一门客户端脚本语言，主要运行在浏览器中，浏览器中负责运行JavaScript脚本代码的程序叫JavaScript引擎

2、基本语法
js需要包括在

函数
声明：使用function关键字，没有指定返回值一说！参数列表也没有指定参数类型一说，因为js所有类型都使用var来声明

第一种： var abc=function(a,b){ return a+b;}
函数在js中也是一种对象，可以将函数的引用赋值给变量
第二种： function add(a,b){ return a+b;}
为函数起个名字叫add

使用：调用函数方法
第一种：如果是声明方式第一种的，使用变量名+()的方式进行调用
abc(1,2);
第二种：如果是声明方式第二种的，直接使用函数名调用；
add(1,2);
注意：js调用函数的时候不会检查参数列表，所以js中没有重载一说，add(1,2)；add(1)；add(1,”abc”)；add(“abc”)；add(1,”666”,true);add()；都是调用的同一个方法。

对象
对象的创建：
第一种 var obj = new Object();
第二种 var obj = {};

为对象添加属性方法：js中动态的为对象添加属性和方法。
1、动态添加
obj.name = “张三”;
obj.age = 18;
obj.work = function(){
alert(“我在工作！”);
}
2、创建时指定
obj = {
name:”张三”,
age:18,
work:function(){
alert(“我在工作”)
}
}

		使用对象的属性或方法
		alert(obj.name)
		obj.work();

注释
js中也有j注释
//表示单行注释
/* */表示多行注释

其他语法
java中的for，while，if-else，switch，try-catch，break，continue，以及各种运算符，在js中也是按照同样的方式使用的。这里不再赘述。

3、js事件
思考：js脚本的嵌入方式
1、浏览器的加载顺序。遇到js执行js，执行完成后继续加载。可能会导致文档阻塞，加载不出内容
2、文档全部加载完成后再加载js。js中定义了一种window.onload事件可以解决以上问题

简介：什么是事件？
事件就是浏览器或者用户交互时触发的行为。比如按钮点击，表单提交，鼠标滑动等等…

事件的分类：
1、系统事件：如：文档加载完成。
2、用户事件：如：鼠标移入移出，单击双击等。

事件触发：
系统事件会由系统触发，如window.onload事件，用户事件由用户行为触发如click事件。主要讲解的系统事件是window.onload，用户事件主要在操作html文档的时候触发。详细事件列表可参考w3c离线文档中的JavaScriptdom事件

常见的事件

onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onload 一张页面或一幅图像完成加载

事件响应：
我们希望某个事件发生的时候我们可以做一些事情。这个称为事件的响应，比如用户点击了一个按钮，我弹出一个框告诉用户，你成功的点击了这个按钮。

事件触发后我们要执行的方法称为响应函数。如何将响应函数与事件关联起来。我们常使用为事件赋值函数的方法。如window.onload事件触发时我们执行弹出对话框
window.onload = function(){
alert(“文档加载完成了！”)
}

我们也可以使用标签的事件属性来触发响应函数，如：
尚硅谷
//onclick会触发gotoguigu()函数
我们在中定义这个函数

取消事件的默认行为
默认行为：某些事件触发后，系统会有默认的响应处理。如：
1、超链接点击后会自动跳转 2、表单提交点击后会发送请求

取消默认行为的方式：
return false;即可

正确的js加载方式
文档加载完成后加载js
所以我们以后写js的时候，请把他包在window.onload 的响应函数里，表示文档加载完成后会执行函数里面的代码。

4、dom操作
什么是DOM：
Document Object Modal(文档对象模型)，我们浏览器把整个网页会当成一个大的对象，利用面向对象的方式操作网页内容。

DOM模型：

document对象
document对象时window对象的一个属性，代表当前整个HTML文档，将这个文档抽象成了document对象，包含了整个dom树的所有内容。
其本质是window.document，而window.可以省略。直接使用document

DOM查询******
元素查询
功能 API 返回值
●在整个文档范围内查询元素节点
根据id值查询 document.getElementById(“id值”) 一个具体的元素节点
根据标签名查询 document.getElementsByTagName(“标签名”) 元素节点数组
根据name属性值查询 document.getElementsByName(“name值”) 元素节点数组

●在具体元素节点范围内查找子节点
查找全部子节点 element.childNodes【W3C考虑换行，IE≤9不考虑】 节点数组
查找第一个子节点 element.firstChild【W3C考虑换行，IE≤9不考虑】 节点对象
查找最后一个子节点 element.lastChild【W3C考虑换行，IE≤9不考虑】 节点对象
查找指定标签名的子节点 element.getElementsByTagName(“标签名”) 元素节点数组

●查找指定元素节点的父节点：element.parentNode

●查找指定元素节点的兄弟节点
查找前一个兄弟节点 node.previousSibling【W3C考虑换行，IE≤9不考虑】 节点对象
查找后一个兄弟节点 node.nextSibling【W3C考虑换行，IE≤9不考虑】 节点对象
属性操作
[1]读取属性值
元素对象.属性名
[2]修改属性值
元素对象.属性名=新的属性值
文本操作
[1]读取文本值：element.firstChild.nodeValue
[2]修改文本值：element.firstChild.nodeValue=新文本值

DOM增删改
API 功能
document.createElement(“标签名”) 创建元素节点并返回，但不会自动添加到文档中
document.createTextNode(“文本值”) 创建文本节点并返回，但不会自动添加到文档中

element.appendChild(ele) 将ele添加到element所有子节点后面
parentEle.insertBefore(newEle,targetEle) 将newEle插入到targetEle前面

parentEle.replaceChild(newEle, oldEle) 用新节点替换原有的旧子节点
parentEle.removeChild(childNode) 删除指定的子节点

element.innerHTML 读写HTML代码[非W3C标准，但主流浏览器都支持]