JavaScript知识点总结

1.JAVA Script组成部分
ECMAScript：它是整个javascript的核心，包含基本语法、变量、关键字、保留字，数据类型、语句，函数等等
DOM：文档对象模型，包含（整个HTML内容）
BOM：浏览器对象模型，包含（整个浏览器相关内容）
2.语法
（1）区分大小写
（2）变量是弱类型的：定义变量时使用var关键字，没有强制的对对象进行声明
（3）每行结尾的分号可有可无，建议全部写上
3.变量
（1）使用var进行定义
（2）变量不必须初始化
（3）声明变量不是必须的
（4）注意：在方法中声明变量使用var和不使用var是有区别的，使用var声明的变量是一个局部变量，不使用var声明的变量是一个成员变量
4。关键字：自定义就变量或者方法时不能使用关键字
5.ECMAScript的5中原始类型
undefined：指的是变量已经声明定义完成了，但是没有个变量赋值
boolean：
number：
string：
object：变量是引用类型或者Null类型
Null类型：指的是对象不存在，未声明过
6.运算符
ECMAScript等性运算符
全等号和非全等号
非全等号：使用两个等号“==”在比较相等性前会先进行类型转换
全等号：使用三个等号“===”在比较相等性前不会进行类型转换
注意：在JavaScript中没有equals比较，所有的全等性比较都使用===
7.获取元素内容
获取元素
document.getElementById("id名称")；注意：id名称为字符串时，id名称需要用“”
获取元素里面的值
document.getElementById("id名称").value
示例：

    
            
            
            
    
    
            用户名： 

            密码：

    

8.JavaScript事件
表单提交事件：onsubmit
一般用于表单提交的位置，定义函数时，需要给出返回值

页面加载事件：onload，绑定在body位置

定时操作：setInterval（code，millisec）
说明：
参数必填
code：要调用执行的函数或者代码块
millisec：调用周期，单位毫秒
返回值：用于传递给clearInterval（）函数取消对code的定时操作

取消定时操作clearInterval（id）
id：setInterval（）返回的ID值
9.登录校验逻辑
（1）确定事件（onsubmit）并为其绑定一个函数
（2）函数（获取用户输入的数据），获取数据时需要在指定位置定义一个id
（3）对用户输入的数据进行判断
（4）数据合法（提交表单）
（5）数据非法（不让表单提交）Alert
10.正则匹配方法
正则表达式.test(待匹配的元素)
邮箱格式正则表达式：/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/
11.轮播图逻辑实现
（1）确定事件onload并为其绑定一个函数
（2）书写函数
（3）书写定时任务（setInterval（code，millisec））
（4）书写定时任务的函数
（5）通过变量的方式，进行循环（获取轮播图的位置，并设置src的属性）
注意：最后一张图片时需要重置为最初的状态
12.广告弹出逻辑实现
（1）在页面指定位置隐藏一个广告图片（使用display属性的none值）
（2）确定事件（onload）并为其绑定一个函数
（3）书写函数（设置显示图片的定时操作）
（4）书写定时器中的函数（获取广告图片的位置，并设置其属性style的display值为block）；
（5）清除显示图片的定时操作
（6）书写隐藏图片的定时操作
（7）书写隐藏定时操作函数（获取广告图片的位置，并设置其属性style的display值为none）
（8）清除隐藏图片的定时操作
13.JS引入方式
内部引入：当前页面的中
外部引入：创建一个js文件，在当前页面添加script标签，并通过src属性引入
14.window对象
//确认弹出框
confirm("您确定是否删除么?");
//输入弹出框
prompt("请输入价格");
15.History对象
History对象包含用户（在浏览器窗口中）访问过的URL
（1）属性
length：返回浏览器里历史列表的URL数量
（2）方法
back（）：加载history列表中的前一个URL
foward（）：加载history列表中的下一个URL
go（）：加载history列表中的某一页面，可配置参数 go（-1）和back（）等价
16.Location对象
Location对象包含有关当前URL信息
17.表单提交优化步骤：
（1）确定事件（onfocus聚焦事件）并为其绑定一个函数
（2）书写绑定函数（在输入框后面给出提示信息）
（3）确定事件（onblur离焦事件）并为其绑定一个函数
（4）书写函数（对数据进行校验，分别给出提示信息）
18.表格隔行换色
标签：
:表头，每个表格中只有一个
：每个表格中不止一个

步骤：
（1）确定事件onload，并为其绑定一个事件
（2）书写函数（获取表格）
（3）获取tbody中行数
（4）对tbody中的行数进行遍历
（5）获得奇数行和偶数行（行数对2取余）
（6）分别对奇数行和偶数行设置颜色

19.事件总结
（1）onfocus/onblur：聚焦离焦事件，用于表单校验
（2）onclick/ondbclick：鼠标单击、双击事件
（3）onkeydown/onkeypress：搜索引擎使用较多
（4）onload:页面加载事件，所有其他操作都可以绑定到此函数中
（5）onmouseover/onmouseout/onmousemove:鼠标停留，移开，放大
（6）onsubmit：表单提交
（7）onchange：当用户改变输入内容时使用，多用于二级联动

20.全选&全不选逻辑
（1）确定事件（onclick），事件绑定到编号钱的复选框里面
（2）获取编号前面的复选框的状态（是否选中）
获取复选框：var checkALLEle=document.getElementById("id")
获取复选框状态：checkALLEle.checked
（3）获取下面所有的复选框：
Document.getElementsByName("name")
（4）更改所有复选框的状态
21.Node节点
包括：Document文档；Element元素；Attribute属性；Text文本
Document：真个Html文档都成为一个document文档；
Element元素：所有的标签都是Element元素
Attribute：标签里面的属性
Text：标签中间夹着的内容为text文本
22.Document对象
每个载入浏览器的HTML文档都成为Document对象
方法：
（1）getElementById（）：返回对拥有指定id的第一个对象的引用
（2）getElementsByName（）：返回带有指定名称的对象集合
（3）getElementsByTagName（）：返回带有指定标签名的对象集合
（4）创建文本节点：document.createTextNode（）
（5）创建元素节点：document.createElement（）
23.Element对象
我们所知的HTML 标签都是element元素
属性&方法：
（1）element.appendChild() ：像元素添加新的子节点，作为最后一个子节点
（2）element.firstChild：返回元素的首个子节点
（3）element.getAttribute()：返回子节点的指定属性值
（4）element.innerHTML:设置或返回元素的内容
（5）element.insertBefore():在指定的已有节点之前插入新节点
（6）element.lastChild:返回元素的最后一个子元素
（7）element.setAttribute()：把指定属性设置或更改为指定值
24.Attribute对象
我们所认知的html页面中所有标签里面的属性都是Attribute对象
（1）attr.value ：设置或返回属性的值
25.DOM练习
在页面中使用烈面显示一些城市，我们希望点击一个按钮实现动态添加城市

    
北京
    
上海
    
广州

分析：
事件（onclick）
获取ul元素节点
创建一个城市的文本节点
创建一个元素节点
将文本节点添加到li元素节点中
使用element里面的方法appendChild（）来添加子节点
26.城市二级联动
事件（onchange）
使用一个二维数组来存储省份和城市（二维数组的创建？）
获取用户选择的省份（使用方法传参的方式：this.value）
遍历数组（获取省份与用户选择的省份比较，如果相同了，继续遍历该省份下的所有城市）
创建文本节点和元素节点并添加操作

createTextNode
createElement
appendChild()
步骤分析：
（1）确定事件（onchange）并为其绑定一个函数
（2）创建一个二维数组用于存储省份和城市
（3）获取用户选择的省份
（4）遍历二维数组中的省份
（5）将遍历的省份与用户选择的省份比较
（6）如果相同，遍历该省份下所有的城市
（7）创建城市文本节点
（8）创建option元素节点
（9）将城市文本节点添加到option元素节点中
（10）获取第二个下拉列表，并间option元素节点添加进去
（11）每次操作前清空第二个下拉列表的option内容
27.JavaScript内置对象
（1）Array对象
Array对象用于在单个的变量中存储多个值
创建语法：
（a）new Array（）；
（b）new Array（size）；
（c）new Array（element0，element1，……，elementn）
数组的特点：
长度可变！ 数组长度=最大角标+1
方法：
concat（）：连接两个或者更多的数组，并返回结果
join（）：把数组的所有元素放入一个字符串。元素通过制定的分隔符进行分隔。默认为逗号
（2）Boolean对象
创建语法：
（a）new Boolean（value）；构造函数
（b）Boolean（value）；转换函数
注意：如果value没有写，默认创建的值为false
（3）Date对象
（a）gettime（）返回1970年1月1日至今的毫秒数，解决浏览器缓存问题
（4）Math对象和Number对象，与Java中一致
（5）String对象
match（）：找到一个或多个正则表达式的匹配
substr（）：从起始索引提取字符串指定数目的字符
substring（）提取字符串中两个指定的索引号之间的字符
举例：

var str="-a-b-c-d-e-f-";
                    var str1=str.substr(2,4);
                    //alert(str1);
                    var str2=str.substring(2,4);
                    alert(str2);

（6）RegExp对象：
正则表达式对象
test（） 检索字符串中指定的值，返回true或者false
28.全局函数
指的是全局属性和函数可用于所有内建的JavaScript对象
方法：
编码：

encodeURI(str1)
encodeURIComponent(str1)

解码：

decodeURI(encodeURI(str1))
decodeURIComponent(encodeURIComponent(str1))

eval（）：计算Javascript字符串，并把它作为脚本代码执行
parseInt（"被解析的字符串",进制）：根据指定进制，解析字符串