javaScript知识点整理-原创手记-慕课网

JavaScript
特点：
1.JavaScript主要用来向HTML页面中添加交互行为。
JavaScript是一种脚本语言，语法和java类似
3.javaScript一般用来编写客户端脚本
4.JavaScript是一种解释性语言，边执行边解释。
二．JavaScript的组成
由核心语法（ECMAScript）、浏览器对象模型（BOM）、文档对象模型（DOM）
三．JavaScript的基本结构
语法：<script type= " text/javascript " >

</script>
注：（1）””部分是非必须的，为了规避老版本浏览器不识别
（2）“//”是 JavaScript 的注释符号（/**/也是注释符号），它会阻止 JavaScript 编译器对这一行的编译
（3）type属性不推荐写成 language= " javascript " ，不符合XHMLT1.0
四. 引用JavaScript的3种方式
1.HTML标签中引用
2.<script>标签中直接书写
3.通过<script>标签的src属性引入外部JS文件
五．常用的输入、输出、确定
1.alert()
alert("提示信息"); //提示信息框
2.prompt()
prompt("提示信息", "输入框的默认信息");
prompt("请输入姓名", "张三");
prompt("请输入姓名");
3.confirm（）
confirm("确认信息？"); //确定则返回true，取消则返回false
六．javaScript的基本语法
1.注释
JavaScript的注释方法，与Java一致
<script type="text/javascript">
//单行注释， // 开头用于注释单行
/
以 / 开头， / 结束，用于多行注释 ;与JAVA一致
/
document.write("请合理使用注释"); //作该行代码的注释
window.alert("我是确认框"); / 同样可以是多行注释 /
</script>
2.变量声明和使用
JavaScript的变量
JavaScript变量用于保存值、保存表达式
注：1、由于 JavaScript 对大小写敏感，变量名也对大小写敏感（y 和 Y 是两个不同的变量）
2、变量必须以字母或下划线或美元符$开始，不能使用关键字作为变量名
语法：//JS的变量声明，是通过 var 语句来声明的，无需指定数据类型
var num = 10 ;
var str = "JavaScript" ;
//当然也可声明多个，之间用逗号隔开
var num =10 ,
str = "JavaScript";
//省略 var 语句，直接变量声明
num = 100; //相当于window.num = 100; （不推荐）
注意：1、如声明多个采用第二种方式是较为高效的
2、每个代码后面的“;”是可省的，建议都写上（为什么呢？）
变量的使用
建议先定义后使用
运算符用于把文本值或字符串变量加起来（连接起来），如果是两个数字则为数学运算加号
= 运算符用于给变量赋值，变量可以重复赋不同类型的值
3.数据类型
 Undefined 1、Undefined 类型只有一个值，即 undefined
2、未定义或定义未赋值
 Null 表示尚未存在的对象，与undefined值相等
 Number var iNum=23; //整数
var iNum=23.0; //浮点数
 Boolean
 String 一组被引号（单引号或双引号）括起来的文本
var string1="This is a string";
4.运算符
typeof检测变量的返回值，为字符串类型
typeof运算符返回值如下：
 undefined：变量被声明后，但未被赋值
 string：用单引号或双引号来声明的字符串
 boolean：true或false
 number：整数或浮点数
 function：函数方法
 object：对象或数组或 Null 类型
数据类型转换
 转换函数
 parseInt()
 parseFloat()
 toString()
 强制类型转换
 Boolean()
 Number()
 String()
5.逻辑控制符
6.流程控制语句
 分类：
 while，do…while，for，for…in
 区别
 while：先判断后执行
 do…while:先执行后判断，至少执行一次
 for：先判断，再执行
 for…in:遍历对象成员
 使用场景
 不知道循环次数，通常选择while或do…while
 知道循环次数,通常选择for循环
7.语法规则
 代码区分大小写
 变量、对象和函数的名称有意义，最好使用驼峰式命名
 句尾的分号最好不要省略
七．JavaScript中的函数定义
 JavaScript中的函数
 一组可以随时随地运行的语句
 将脚本编写为函数以避免页面载入时执行该脚本
 分类
 系统函数
 自定义函数
八．系统函数
函数名称描述
parseInt() 解析一个字符串并返回一个整数
parseFloat() 解析一个字符串并返回一个浮点数
isNaN() 检查某个值是否是数字,返回true | false
eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行
九．自定义函数
语法：
function 函数名 ( 参数1,参数2,…. )
{
//函数代码块
}
或
var 函数名 = function (参数1,参数2,…. )
{
//函数代码块
}
传入的参数是可选的
十．如何调用函数
函数可以通过其名字加上括号中的参数进行调用
//自定义函数调用
function sayHello(name){
alert( name + "说了句hello。" );
}
sayHello("Tom");
//函数变量的调用
var sayHello = function(name){
alert( name + "说了句hello。" );
}
sayHello(" Tom ");
十．一匿名函数
//传统的定义函数方式
var fn = function (){
alert(12345);
}
fn();
//函数体替换fn
(function() {
alert(12345);
})();
10.2函数如何返回值
通过 return 关键字返回函数的值
与 Java 一样，函数在执行过 return 语句后立即停止代码。因此，return 语句后的代码都不会被执行
11.事件
JavaScript侦测到的行为
事件举例：
 鼠标点击
 页面或图像载入
 鼠标悬浮于页面的某个热点之上
 在表单中选取输入框
 表单提交
 键盘按键
事件通常与函数配合使用，当事件发生时去调用函数
11.1常用的事件
事件名称描述
onload 和 onunload 当用户进入或离开页面时就会触发 onload 和 onunload 事件
onfocus, onblur 和 onchange 主要与form表单里的文本域或下拉框配合使用
onsubmit form 表单提交时发生
onmouseover 和 onmouseout 鼠标移至对象上和离开时发生
onclick和ondbclick 对象被点击/双击时发生
BOM浏览器对象模型
Window对象
常用属性
history 有关客户访问过的URL的信息
location 有关当前URL的信息
screen 有关客户端的屏幕和显示性能的信息
常用方法
prompt() 显示可提示用户输入的对话框
alert() 显示带有一段信息和一个确认按钮的警告框
confirm() 确认按钮和取消按钮的对话框
close() 关闭浏览器窗口
open() 打开新的浏览器窗口
setTimeout() 用于在指定的时间调用或计算表达式
setInterval() 按照指定的周期调用或计算表达式
setInterval( fn，millisec )方法
可按照指定的周期（以毫秒计）来调用函数或计算表达式，循环执行多次。
setTimeout( fn，millisec )方法
用于在指定的毫秒数后调用函数或计算表达式，只执行一次。
Window对象的常用事件
Onload 一个页面或一幅图像完成加载
Onmouseover 鼠标指针移到某元素之上
Onclick 点击某个对象
Onkeydown 某个键盘按键被按下
onchange 域的内容被改变
History对象
常用方法
Back () 加载history对象上一个URL
Forward() 加载history对象下一个URL
Go() 加载history对象某具体URL
Location对象
Location对象的属性
Host 设置或返回主机名
Hostname 设置或返回当前URL的主机名
href 设置或返回完整的URL
常用的方法
Reload() 重新加载当前文档
Replace() 用新的文档代替当前文档
Document对象
Ref errer
返回载入当前文档的URL
URL 返回当前文档的URL
常用方法
getElementByld() 返回对拥有指定id的第一个对象的引用
getElementsByName() 返回带有指定名称的对象的集合
getElementsByTagName() 返回带有指定标签名的对象的集合
Write（）向文档写文本、HTML表达式
JavaScript内置对象
Date对象
语法：
Var 日期实例 = newDate(参数)；
常用方法
getDate() 返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay() 返回 Date 对象的星期中的某一天，其值介于0～6之间
getHours() 返回 Date 对象的小时数，其值介于0～23之间
getMinutes() 返回 Date 对象的分钟数，其值介于0～59之间
getSeconds() 返回 Date 对象的秒数，其值介于0～59之间
定时函数
DOM
3.1DOM节点
3.1.1访问节点
常用方法
getElementByld() 返回对拥有指定id的第一个对象的引用
getElementsByName() 返回带有指定名称的对象的集合
getElementsByTagName() 返回带有指定标签名的对象的集合
使用层次关系访问节点
ParentNode:返回节点的父节点
FirstChild:返回节点的首个子节点
LastChild:返回节点的最后一个子节点
3.1.2操作节点属性值
getAttribute(“属性名”)：获取属性值
setAttribute(“属性名”，“属性值”)：设置属性值
3.1.3创建节点
方法名称名名称名称名称说明说嘛说说明明说明说明
createElement( tagName) 创建一个名为tagName的新元素节点
ANode.appendChild( BNode) 把B节点追加至A节点的末尾
insertBefore( ANode,BNode ) 把A节点插入到B节点之前
Node.cloneNode(deep) deep为true则复制该节点以及该节点的所有子节点，为false则只复制该节点和其属性
3.1.4删除或替换节点
方法说明
removeChild( node) 删除指定的节点
replaceChild( newNode, oldNode) 用newNode来替换oldNode
DOM操作表格
HTML DOM
a) 其特性和方法是专门针对HTML文档的
b) HTML文档中的每个节点都是一个对象
c) 通过对象的方法和属性来操作节点
d) HTML DOM包括：
Table 对象
Document 对象
Form 对象
Image 对象
4.1Table 对象
Table 对象代表一个 HTML 表格
<table> 标签对应一个 Table 对象的创建
对象集合
1.rows[]返回表格中所有行的一个数组
2.cells[]返回包含表格中所有单元格的一个数组
分析：
1、获取该表格对象
2、通过rows[]得到所有的行
3、通过cells[]得到所有的单元格
方法
insertRow( index )
用于在表格的指定位置插入新行
deleteRow( index )
用于删除表格中指定的行
分析：
1.获取表格对象
2.使用insertRow() 插入
3.使用deleteRow() 删除
4.2TableRow对象的属性和方法
属性对象集合
cells[]
返回包含该行中所有的单元格的一个数组
 方法
insertCell(index)
在一行中的指定位置插入一个空的 <td> 元素
deleteCell(index)
删除行中的指定的单元格
4.3TableCell 对象
TableCell 对象代表一个 HTML 表格单元格
属性
cellIndex：单元格在某行的单元格集合中的位置
innerHTML：设置或返回单元格的开始标签和结束标签之间的 HTML
align：设置或返回单元格内部数据的水平排列方式
className:设置或返回元素的class属性
数组
5.1创建数组
语法：
Var 数组名称 = new Array(size);
5.2数组的赋值
先声明后赋值
声明时同时初始化
5.3操作数组
1）单个读取
数组对象名[数组下标]
2）循环读取
For….in….
5.31Array对象的属性和方法
属性length：设置或返回数组中元素的数目
方法：
Join():把数组的所有的元素放入一个字符串中，通过一个分隔符进行分隔
Sort():对数组进行排序。
5.4 使用下拉列表框对象select
事件 onchange 当改变选项调用的事件
方法 add() 向下拉列表框中的添加一个选项
属性 options[] 返回包括下拉列表框中的所有选项的一个数组
SelectedIndex 设置或返回下拉列表框中被选项目的索引号
Length 返回下拉列表框中选项的数目
5.5 Option对象的常用属性
Text(): 设置或返回某个选项的纯文本值
Value（）：设置或返回被送往服务器的值
6.JavaScript访问样式的常用方法
1.style属性
2.className属性
3.display属性
7.访问样式的应用
实现思路：
1.把广告图片放在一个div中，并且div总是显示在页面的上方
2.使用getElementByld()方法获取层对象，并且获取层在页面上的初始位置。
3.根据鼠标滚动事件，获取滚动条滚动的距离。
4.随着滚动条的移动改变层在页面上的位置。
7.1 获取样式属性值
Position属性
属性说明
Top 设置元素的顶边缘距离父元素顶边缘的上下面的距离
Left 设置元素的左边缘距离父元素左边缘的左右面的距离
Right 设置元素的右边缘距离父元素右边缘的左右面的距离
Bottom 设置元素的低边缘距离父元素低边缘的上下面的距离
zIndex 设置元素的堆叠次序
注：在实际工作中，通常是样式和内容相分离，一般把设置层的样式放在内部样式表或外部样式表，所以常用currentStyle对象获取。
7.2获取鼠标滚动的距离
1.scrollTop、scrollLeft属性
属性说明
ScrollTop 设置或获取位于对象的最顶端，内容的最顶端的之间的距离
scrollLeft 设置或获取位于对象的最左端，内容的最左端的之间的距离
ClientWidth 对象的宽度，会随着窗口改变
clientHeight 对象的高度
语法：document.documentElement.scrollTop;
2.页面事件
Onscroll 用于捕捉页面垂直水平的移动
Onload 一个页面或一幅图片完成加载

作者： qq_奔跑吧少年_43341634
链接：http://www.imooc.com/article/13960
来源：慕课网