JS回顾
JS的概述
什么是JS
- JS是一种弱类型语言
- JS是基于对象和事件驱动的脚本语言
- JS只需要解析就可以执行，所以是运行在客户端（浏览器）的
JS的三大特性
- 交互性（信息的动态交互）
- 安全性（不可以直接访问本地硬盘）
- 跨平台性（只要浏览器支持JS，都可以执行JS代码，和平台无关）
JS的组成
JS由 核心（ECMScript）、文档对象模型（DOM）、浏览器对象（BOM）组成
JS的编写
JS与HTML的结合
JS与CSS一样，与HTML有三种结合方式
- 行内式：
直接写在HTML中，例如：
<body>
<!--这里有一个按钮，当点击按钮的时候出发一个弹框事件-->
<input type="button" value="提交" onclick="alert('已提交')">
</body>
- 内联式：
使用<script>标签，例如：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
alert('Hello JS');
</script>
</head>
- 外联式：
代码写在JS文件中，使用<script>标签引用
例如：
<script src='js/index.js'></script>
JS基本语法
- 变量名、函数名、运算符区分大小写
变量
JS中的变量是弱类型的变量，只需要使用var来定义就可以了，它会在变量被赋值时，自动给该变量赋予类型。
<script type="text/javascript">
var a = 10;
var b = "Hello JS";
var c = true;
var d;
d = null;
</script>
JS的数据类型
JS中存在两类数据类型
- 原始类型（存储在栈Stack中简单数据）
- 引用类型（存储在堆Heap中对象）
五种原始类型：
- number 数值型
- String 字符串
- Boolean 逻辑型
- Null 空
- Undefined 没有被赋值。
可以通过typeOf()方法来查看数据的类型
Undefined和Null的区别
Undefined：变量被定义，但没有背赋值，或访问对象不存在的属性；
Null：访问的对象不存在。
JS语句
判断语句
JS中的判断语句与Java中的一样。
<script type="text/javascript">
var a = 10;
if (a < 10){
alert('a<10');
}else if (10 == a){
alert('a==10');
}else {
alert('a>10');
}
</script>
== 和 = 是不一样的，一个是比较是否相等一个是赋值，所以在比较值的时候，最好是将常量放在前面，变量放在后面，例如：10==a。
循环语句
JS 的循环语句也有 for循环、while循环、do while循环。语法格式和Java中一样，不过需要注意的是循环变量的定义使用的是var来定义
<script type="text/javascript">
var sum = 0;
for (var i = 0; i < 3; i++) {
sum = sum + i;
document.write(i + " ")
}
document.write('<br/>');
document.write(sum);
while (sum >= 0) {
sum--;
}
document.write('<br/>');
document.write(sum);
do {
sum++
} while (sum <= 0)
document.write('<br/>');
document.write(sum);
</script>
选择语句
JS的选择语句与Java一致
<script type="text/javascript">
var sum = 0;
switch (sum) {
case 0:
alert("0");
break;
case 2:
alert("2");
break;
}
</script>
JS的运算符
= 、 == 和 ===的区别
= 是赋值符号
== 是比较两边的值，如果不是同一个类型的值，则会进行类型转换，之后再比较值，所以在类型不同的情况下这两个数据可能相等。
===是先比较两个数据的类型，如果类型不同，则这两个值必定不相等。
实验
<script type="text/javascript">
var a = '12';
var b = 12;
if (a == b) {
alert('a和b相等 ==');
} else {
alert('a 和b不相等 ==')
}
if (a === b) {
alert('a和b相等 ===');
} else {
alert('a 和b不相等 ===')
}
</script>
JS数组
JS数组的定义
JS中是可以在一个数组中存放不同类型的数据的。
定义方法如下所示：
<script type="text/javascript">
var arr1 = [1,2,3,4]; //定义一个数组，包含“1,2,3,4”这四个元素
var arr2 = new Array(4); //定义了一个长度为4的数组
var arr3 = new Array(1,2,3); //定义了一个包含“1,2,3”这3个元素的数组
</script>
常用属性
length属性，返回数组的长度。
常用用操作
concat();方法，连接指定的数组并返回一个新的数组。
join();方法，规定指定的符号来分割显示数组元素。
push();方法，在数组的最后添加一个元素，并返回新的数组长度。
pusht();方法，可以将一个数组视为一个元素添加到当前数组中。
pop();方法，删除最后一个元素，并返回最后一个元素。
reverse();方法，将数组元素的顺序颠倒过来。
JS的函数
函数定义
方法一、
使用function来定义函数。参数列表可以为空，可以没有返回值。
function 函数名(参数列表) {
函数体
}
方法二、匿名函数
var 函数名 = function (参数列表){
函数体
}
函数重载
在JS中是没有函数重载的，但是我们可以通过arguments对象来模拟函数重载
arguments类似数组，它是JS自带的一个对象，用于存储函数传入的参数。
JS作用域
全局变量：在<script>标签中，在这个标签内乃至整个页面都有效。
局部变量：在函数体中定义，只在这个函数体中有效。
String对象
常用属性
length:获取长度。
常用方法
link(URL);方法，将字符串显示为超链接
sub()；方法，下标文字
sup();方法，上标文字
concat();方法，连接字符串
charAt();方法，获取字符，如果字符不存在则返回一个空的字符串。
indexOf();方法，返回字符在字符串中第一次出现的位置，如果不存在则返回-1
split();方法，根据指定内容将字符串分割成数组，并返回。
replace();方法，将字符串中的字符替换成指定字符。
substr();方法，从指定位置开始截取指定字符串。
substring();方法，截取开始位置到结束位置之间的字符，会截取开始位置上的字符，但不会截取到结束位置的字符，即左闭区间。
JS的Date对象
创建Date对象
var 对象名 = new Date();
常用方法
getDate();获取date对象中的日期
getDay(); 获取date对象中的周几（0~6,0代表星期天）
getMonth(); 获取date对象中的月份（0~11）
getFullYear(); 获取date对象中的年份（4位数）
getTime();返回1970年1月1日至今的毫秒数（通常用于防止浏览器缓存）
setTime(); 根据毫秒数设置时间
toLocaleString();根据本地的时间格式，把Date对象转换为字符串。
Math对象
Math对象中的方法全是静态方法，所以直接调用即可。
常用方法
ceil(x); 向上取舍
floor(x);向下取舍
round(x);四舍五入
pow(x,y);范围x的y次幂
random();返回0-1之间的随机数。
全局函数
什么是全局函数
- 不属于任何对象，直接写名称使用
常用的全局函数
eval():如果字符串是一段代码，那么可以将字符串当多JS代码来执行。
encodeURI();对字符进行编码
decodeURI();对字符进行解码
isNan();判断是否不是数字，不是返回ture,是返回false
parseInt();类型转换，转换成整数
History对象
history对象包含用户（浏览器窗口中）访问过的url
常用方法
back();加载history列表中的前一个url
forward();加载history列表中的上一个URL
go();记载history列表中的某个具体页面
Location 对象
Location 对象包含有关当前 URL 的信息
常用属性
| 属性名 | 描述 |
|---|---|
| hash | 设置或返回从井号 (#) 开始的 URL（锚）。 |
| host | 设置或返回主机名和当前 URL 的端口号。 |
| hostname | 设置或返回当前 URL 的主机名。 |
| href | 设置或返回完整的 URL。 |
| pathname | 设置或返回当前 URL 的路径部分。 |
| port | 设置或返回当前 URL 的端口号。 |
| protocol | 设置或返回当前 URL 的协议。 |
| search | 设置或返回从问号 (?) 开始的 URL（查询部分）。hash |
| host | 设置或返回主机名和当前 URL 的端口号。 |
| hostname | 设置或返回当前 URL 的主机名。 |
| href | 设置或返回完整的 URL。 |
| pathname | 设置或返回当前 URL 的路径部分。 |
| port | 设置或返回当前 URL 的端口号。 |
| protocol | 设置或返回当前 URL 的协议。 |
| search | 设置或返回从问号 (?) 开始的 URL（查询部分）。 |
常用方法
reload(); 重新加载当前文档
window对象
window对象是JS层级中的顶层对象，代表这一个浏览器或一个框架。
常用方法（含定时器）
confirm() 显示一段信息以及确认按钮和取消按钮的对话框
alert() 显示一段信息和确认按钮的对话框
prompt() 显示课题是用户输入的对话框
open() 打开一个新浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口
setInterval() 定时器，在指定时间周期（单位：毫秒）来调用函数或计算表达式。
clearInterval() 关闭setInterval()定时器
setTimeout() 在指定时间（单位：毫秒）后调用函数或计算表达式。
注意：setTimeout() 只执行 code 一次。如果要多次调用，可以让 code 自身再次调用 setTimeout()。
DOM对象.
什么是dom对象
dom ：文档对象模型
- 文档 超文本文档（超文本标记文档） 例: html 、xml
- 对象 提供了属性和方法
- 模型 可以JS中的dom提供的对象，使用这些对象的方法和属性，对标记型文档进行操作
- 想要对标记型文档进行操作，要先将文档中的所有内容封装成对象（标签、属性、文本内容…）
- 封装后需要进行解析。
三种DOM模型
- 将html文档封装成对象。
- 在html文档封装成对象的基础上添加新功能，例如对于css样式的支持
- 支持xml1.0的一些新特性
四种语言的职责
- html:负责提供标签，封装数据
- CSS：负责提供样式，对标签的数据进行样式定义
- DOM：负责标签及其内容解析，封装成对象，对象具有属性和行为。
- JavaScript：负责提供程序设计语言，对页面中的对象进行逻辑操作。
document对象
每个载入浏览器的HTML文档都会称为Document对象。
常用属性
forms[] 返回对文档中所有Form对象引用
body 提供对body元素的直接访问。
常用方法
getElementByID() 根据元素id获取元素
getElementByName() 根据元素的Class值获取元素集合。
getElementByTagName() 根据元素的标签名称获取元素集合。
write()向文档中写HTML表达式或JavaScript代码。
Element对象
操作Element对象的属性的前提是，要获取到Element(使用document)
getAttribute(name) 获取属性的值
setAAttribute(name,value) 设置属性
removeAttribute(name) 删除属性
getElementsByTagName() 在Element对象中查找Element对象，该方法返回的是一个集合。
Node常用属性值
常用属性
nodeType 属性返回以数字值返回指定节点的节点类型。如果节点是元素节点，则 nodeType 属性将返回 1。如果节点是属性节点，则 nodeType 属性将返回 2。
nodeValue 属性设置或返回指定节点的节点值。
element.className 设置或返回元素的 class 属性。
childNodes：获得所有的子节点.属性不是所有的浏览器都兼容.
- 父节点：
parentNode
parentNode属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。
document 节点的没有父节点。 - 子节点
childNodes：获取指定节点的所有子节点集合。
firstChild：获取指定节点的第一个子节点。
lastChild：获取指定节点的最后一个子节点。 - 同辈节点
nextSibling: 返回一个给定节点的下一个兄弟节点。
previousSibling：返回一个给定节点的上一个兄弟节点。
常用方法
hasChildNodes() 查看是否存在子节点
hasAttributes() 查看是否存在属性，IE浏览器不支持这个方法。
操作DOM节点树
插入节点
appendChild()
insertBefore(newNode,oldNode)
删除节点
removeChild()
替换节点
replaceChild(newNode,oldNode)
复制节点
cloneNode(boolean); boolean:true 克隆的时候 带着子节点一起克隆.默认是false。
JS中的事件
鼠标事件
onclick:单击
ondblclick:双击
onchange:列表框改变事件
onmouseover:鼠标放在上面
onmouseout:鼠标离开
onmousemove:鼠标移动.
键盘事件
按键有三个动作组成，按下、按住、弹起。
onkeyup: 按键弹起事件
onkeydown: 按键按下事件
其他事件
onload:页面加载时间
onunload:页面的卸载事件.
onblur:失去焦点
onfocus:获得焦点.
submi：表单提交事件
reset：表单重置事件
select：选择事件
change：改变事件
扫一扫
126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
