JavaScript知识简单整理
1. JavaScript简介
* js是一种弱类型语言，也是一种动态类型语言
* js是一种基于对象和事件驱动的脚本语言。
* 作用：在前段页面中验证用户提交信息是否符合要求和服务器发生交互，判断用户名是否存在[ajax]
* 特性：
①脚本语言。JavaScript是一种解释型的脚本语言,C、C++、Java等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
②基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
③简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言。
④动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。
⑤跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。
因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。
2. JavaScript基本语法
2.1 编写位置
① 通过直接在<script>元素中编写JS代码的方式，将JS代码引入网页之中。
示例：<!-- JavaScript代码写在Script标签中 -->
<script type="text/javascript">
window.onload = function(){
//获取#btnId对应的元素节点
var btn = document.getElementById("btnId");
//为#btnId绑定单击响应函数
btn.onclick = function(){
//弹出警告框，显示字符串Hello
alert("Hello");
}
}
</script>
② 写在外部的.js文件中。然后通过script标签引入引入js文件的方式，也可以在网页中引入JS代码，相当于引入库文件。
示例：<script type="text/javascript" src="script.js"></script>
2.2 基本语法：
* 变量
* 声明语法：使用var关键字声明变量 ，eg:var i = 100; var s = "s";
* 注意：
变量声明时不需要指定类型，可以为其赋值任何类型的数据，语句使用;结束。
变量名区分大小写，使用期间可以任意赋值，可以不声明就直接赋值使用（不建议）。
数据类型：字符串(string)、数字(number)、布尔、数组、对象、Null、Undefined(只声明不赋值)
* 函数
* 声明函数：使用function关键字
* 有名函数：function methodName(){}
* 有函数名有参有返回值函数：function sum(a, b){return a + b}
* 匿名无参函数: function (){}
* 匿名有参有返回值函数：function(a , b){ return a + b;}
* 使用函数
* 调用有名函数：sum(1,2);
* methodName()|methodName区别，前者直接调用函数，后者使用函数的引用。
* 注意：js中调用函数时，不检查形参与实参的匹配情况
1. 形参<实参:自动忽略多余的实参
2. 形参>实参：
* 实参类型为number型，返回：NaN（not a number）
* 实参类型为string型，返回：值+undefined
* 调用匿名函数
* 直接使用事件关联匿名函数：window.onload = function(){}
* 使用变量名（引用）关联匿名函数：var methodName = function(){}
* 匿名函数需要使用变量接收，js中函数也是对象，函数名和接收函数的变量都代表函数对象的引用。
示例：
1. window.onload = function(){}
2. var fun = function(){}
* 对象
* 函数也是对象：在JavaScript中，函数也作为一种数据类型存在，而且是引用数据类型，函数名就是指向其内存空间地址的引用。
示例：function methodName(){}，methodName.name
* 对象的创建：js中声明对象
1. 使用new Object()创建：var obj = new Object();
动态为对象分配属性和函数
obj.uname = “songsong”;
obj.info = function(){alert(“我叫：”+this.username)}
通过对象名.属性名/对象名.函数引用()可以获取属性值或执行函数。
2. 使用{}创建:var jsonObj = {key:value,key2:value2}; jsonObj.key
在创建时可以直接设置属性和函数:
Var obj = {
uname : ”liuyou”,
age : 18,
info : function(){alert( this.uname )}
};
3. this关键字:在JavaScript函数中，this关键字指向的是调用当前函数的对象。
实例：
var obj01 = {
name : "obj01 name",
getName : showName
};
var obj02 = {
name : "obj02 name",
getName : showName
};
function showName() {
alert(this.name);
}
obj01.getName();//结果为 obj01 name
obj02.getName();//结果为 obj02 name
3. JavaScript事件驱动
3.1 事件用户的操作，当操作发生时js如何给用户反馈需要自定义事件的响应函数
①用户事件：用户操作，例如单击、鼠标移入、鼠标移出等。
eg：element.onclick:单击事件
②系统事件：由系统触发的事件，例如文档加载完成。
eg：window.onload:加载事件。当前文档完全加载后执行。
3.2 自定义事件响应函数
①从文档对象模型中获取控件对象[借助DOM API实现]
②声明一个事件响应函数
③将事件响应函数的引用赋值给控件对象的事件属性
例如：window.onload = function(){}
3.3 取消控件默认行为
①默认行为
[1]超链接跳转页面
[2]submit按钮提交表单
②取消方式：return false
4. JavaScript嵌入方式
4.1 浏览器加载顺序
①按从上到下的顺序加载
②遇到script标签先执行脚本程序，执行完成后再继续加载
4.2 行内js:嵌入HTML标签的事件属性中
eg：<button onclick="alert('hello');">点我</button>
行内：书写在事件属性中，结构与行为耦合，不推荐使用
4.3 内部js:嵌入head标签内：
<head>
<script type="text/javascript">
var btnEle = document.getElementById("btn");
btnEle.onclick = function() {
alert("hello");
};
</script>
</head>
<body>
<button id="btn">点我</button>
</body>
内部:写到script标签中，script标签放到head标签中，无法获取body标签中的节点，无法获取按钮对象，会出现错误。
4.4 内部js:嵌入body标签后面
<body>
<button id="btnId">SayHello</button>
</body>
<!-- 3.写到script标签中，script标签放到body标签后面，不符合我们的习惯 -->
<script type="text/javascript">
</script>
内部:写到script标签中，script标签放到body标签后面，可以获取节点，但是不符合常规习惯.
4.5 外部js,引入外部的js文件
* <script type="text/javascript" src="demo.js"></script>
* 如果script标签中有src属性，此时该标签的作用为引入外部js,不能在该标签中书写js代码。
4.6 window对象
代表当前浏览器窗口
4.7 onload事件
将整个文档加载完成后触发
4.8 使用window.onload：当前文档完全加载后执行。完全：指的是包含图片，音频，视频等。完美解决问题
<head>
<script type="text/javascript">
window.onload = function() {
var btnEle = document.getElementById("btn");
btnEle.onclick = function() {
alert("hello");
};
};
</script>
</head>
<body>
<button id="btn">点我</button>
</body>
5. DOM操作
5.1 DOM标准
Document Object Model：文档对象模型，定义了访问和处理 HTML 文档的标准方法。
是W3C国际组织制定的统一标准，在很多计算机语言中都有不同实现如C#、PHP、Java、Ruby、perl、python等
5.2 document对象
window对象的一个属性，代表当前HTML文档，包含了整个文档的树形结构。
获取document对象的本质方法是：window.document，而“window.”可以省略。
5.3 DOM树
父元素：直接包含当前元素的元素就是当前元素的父元素
子元素：当前元素直接包含的元素就是当前元素的子元素
祖先元素：直接或间接包含当前元素的所有元素都是当前元素的祖先元素
后代元素：当前元素直接或间接包含的元素就是当前元素的后代元素
兄弟元素：有相同父元素的元素是兄弟元素
5.4 节点(Node)——构成HTML文档最基本的单元。
5.4.1HTML文档中的每个成分都是一个节点，HTML文档是由DOM节点构成的集合。
5.4.2节点的分类
①文档节点(Document)：DOM标准将整个HTML文档的相关信息封装后得到的对象。
②元素节点(Element)：DOM标准将HTML标签的相关信息封装后得到的对象，对应HTML文档中的HTML标签。
③属性节点(Attribute)：DOM标准将HTML标签属性的相关信息封装后得到的对象，元素的属性。
④文本节点(Text)：DOM标准将HTML文本的相关信息封装后得到的对象，HTML标签中的文本内容。
5.4.3节点的属性
①nodeName: 代表当前节点的名字，只读属性。如果给定节点是一个文本节点，nodeName 属性将返回内容为 #text 的字符串。
②nodeType：返回一个整数, 这个数值代表着给定节点的类型，只读属性。
1 -- 元素节点 2 -- 属性节点 3 -- 文本节点
③nodeValue：返回给定节点的当前值(字符串)，可读写的属性。
1)元素节点, 返回值是 null。
2)属性节点: 返回值是这个属性的值。
3)文本节点: 返回值是这个文本节点的内容。
5.5 DOM查询API
①元素查询：
* 在整个文档范围内查询元素节点
功能 API 返回值
根据id值查询 document.getElementById(“id值”) 一个具体的元素节点
根据标签名查询 document.getElementsByTagName(“标签名”) 元素节点数组
根据name属性值查询 document.getElementsByName(“name值”) 元素节点数组
* 在具体元素节点范围内查找子节点
功能 API 返回值
查找全部子节点 element.childNodes【W3C考虑换行，IE≤9不考虑】 节点数组
查找第一个子节点 element.firstChild【W3C考虑换行，IE≤9不考虑】 节点对象
查找最后一个子节点 element.lastChild【W3C考虑换行，IE≤9不考虑】 节点对象
查找指定标签名的子节点 element.getElementsByTagName(“标签名”) 元素节点数组
* 查找指定元素节点的父节点：element.parentNode
* 查找指定元素节点的兄弟节点
功能 API 返回值
查找前一个兄弟节点 node.previousSibling 【W3C考虑换行，IE≤9不考虑】 节点对象
查找后一个兄弟节点 node.nextSibling 【W3C考虑换行，IE≤9不考虑】 节点对象
②属性操作
[1]读取属性值：元素对象.属性名
[2]修改属性值：元素对象.属性名=新的属性值
③文本操作
* 获取文本值三步曲
获取文本节点父节点
获取父节点的第一个子节点
parentEle.firstChild
获取文本节点的节点值
parentEle.firstChild.nodeValue
[1]读取文本值：element.firstChild.nodeValue
[2]修改文本值：element.firstChild.nodeValue=新文本值
* js操作文本
.innerText
.innerHTML
.value
5.6 DOM增删改API
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代码
