JS

变量

1、定义

　　① 使用 var 关键字定义

　　② 其他定义方式和 java 没啥区别

2、变量类型

　　① 全局变量：在 js 中没有定义在方法内部的变量，称之为全局变量

　　　　　　　　（在飞严格模式下）在 js 的方法中，不添加 var 的变量也是全局变脸

　　② 局部变量：在 js 中定义在方法内部的变量，称之为局部变量

3、变量的命名规则

　　和 java 一模一样

4、数据类型：可以通过 typeof 获取数据类型

　　① undefined：定义时，未赋值

　　② null：定义赋值为 null

　　③ boolean：赋值为 true 或 false

　　④ string：用双引号或单引号赋值

　　⑤ number：整数型、浮点型、NaN、Infinity / -Infinity

　　⑥ object：大部分情况 new 出来的对象都是 object

5、手动数据类型的转换

　　① String()

　　② Number()

　　③ Boolean()

数组

1、定义：一组数据的容器，称之为数组，结构上类似于 java 中的 List

2、数组的创建

　　① var arr = new Array()   创建一个空数组

　　② var arr2 = new Array([size])   创建一个大小为 size 长度的数组

　　③ var arr3 = new Array([ele1,ele2,...,eleN])   创建一个含有若干元素的数组

　　④ var arr4 = [ele1,ele2,...,eleN]  创建一个含有若干元素的数组

3、操作对象的属性和方法

　　属性：length 表示数组的长度（数组中元素的个数），length 属性可以修改，利用 length = 0 清空数组

　　方法：

　　　　① concat()  拼接数组

　　　　② join(opt)  返回一个字符串，以 opt 为连接符，返回所有数组中的元素

　　　　③ push(ele) 往尾部添加一个元素，返回数组的长度

　　　　④ pop()  从尾部取出一个元素，返回元素本身

　　　　⑤ unshift(ele) 往头部添加一个元素，返回数组长度

　　　　⑥ shift() 从头部取出一个元素，返回元素本身

函数

1、定义：将一定意义上、或一定范围上的代码足足在一起的，我们称之为函数

2、函数的创建

　　① function 函数名(形参列表) { 函数体 }

　　② var 函数名 = function(形参列表) { 函数体 }

　　③ var 函数名 = new Function("形参1","形参2",...,"形参n","函数体");

　　注意：① 形参不需要添加 var

　　　　　② 函数可以有返回值，可以返回任意的类型。如果函数没有返回值，则接收一个 undefined

　　　　　③ 由第三条创建函数的方法可以看出：函数也是一个对象

　　　　　④ 函数可以作为参数进行传递

　　　　　⑤ 实参和形参个数、类型都可以不匹配

3、函数的属性和方法

　　属性

　　　　length：通过函数对象.length 可以获取函数形参的个数

　　　　arguments：表示实际参数的一个数组，该属性只能用在函数的内部

4、内置函数

　　parseInt()  将字符串转化为整数

　　parseFloat()  将字符串转化为浮点数

　　isNaN()  判断一个数字是否为 NaN

　　isFinite()  判断一个数字是否是有限的

　　eval()  解析一个字符串，解析为 js 代码，并运行该 js 代码

事件　

　　onClick 点击事件，多用于a标签、button按钮

　　onDblclick 双击事件，多用于a标签、button按钮

　　onFocus 当标签获取焦点时，多用于input type=text

　　onBlur 当标签丢失焦点时，多用于input type=text

　　onChange 当标签的value属性发生改变时，多用于select标签

　　onLoad 当页面加载完成时，一、用在body标签中

                                        二、在js中通过window.onload = function(){}

　　onMouseover、onMouseout、onMousemove

 Date

1、创建日期对象

       1.var d1  = new Date()  创建一个当前日期

       2.var d2 = new Date(long) 创建一个指定毫秒数的日期

       3.var d3 = new Date(year,month,day,hour,minuite,second) 创建一个指定年月日时分秒的日期

2、日期对象的方法

       d1.getDay();   //获取今天是星期几

       d1.getYear();  // 获取今年年份距离1900经过了多少年

       d1.getFullYear(); //获取当前年份数

       d1.getMonth(); //获取当前月份数，js中月份是从0-11月的

       d1.getDate(); //一个月中的日数

       d1.getHours(); //时

       d1.getMinutes(); //分

       d1.getSeconds();  //秒

       d1.getMilliseconds();  //毫秒

       d1.toLocaleString(); //显示当地时间的一个字符串

Math

1、Math对象

       Math是js中一个不需要创建的对象(固有对象)，可以直接使用

2、属性和方法

　　属性        

       　　Math.PI

　　方法

　　　　Math.abs() //绝对值

　　　　Math.ceil() //向上取整

　　　　Math.floor() //向下取整

　　　　Math.round() //四舍五入

　　　　Math.random()  //随机数

 String

1、创建字符串对象

       ① var str = "" 或 var str = ''

       ② var str2 = new String("")

2、字符串对象的属性和方法

       属性

            length 字符串的长度

       方法

　　　　str.charAt(); //返回某个索引处的字符

　　　　str.indexOf();  //返回某个字符从左向右搜索第一次出现的索引。如果没有搜索到，则返回-1

　　　　str.lastIndexOf(); //返回某个字符从右向左搜索第一次出现的索引。如果没有搜索到，则返回-1

　　　　str.substr();  //substr(m,n) 截取子字符串，从m位置开始截取,截取n个长度

　　　　str.substring(); //substring(m,n) 截取子字符串，从m位置开始截取，截到n位置。m能取到，n取不到。

　　　　str.toUpperCase(); //字符串中转化为大写

　　　　str.toLowerCase(); //字符串中转化为小写

Object

1、在 js 中 Object 是所有对象的基类，任何对象都可以通过如下操作：

　　① 通过 “对象.属性 = 值”为对象增加一个属性（当属性不存在的时候）

　　② 通过“对象.属性”来输出对象的属性

　　③ 通过“delete 对象.属性”来删除对象的属性

2、JSON

　　JSON 有两种格式：

　　　　① 对象  {"key1":value1,"key2":value2,...,"keyN":valueN}

　　　　② 数组 [value1,value2,...,valueN]

　　JSON 在 JS 中的使用：

　　　　① 将 json 格式的字符串转化为对象

　　　　　　eval()   eg.：eval("var arr = "+{"name":"zhangsan","age":18})

　　　　② 将 json 对象转化为字符串

　　　　　　JSON.stringify(obj);   eg.: JSON.stringify(obb) ---> '{"name":"zhangsan","age":18};'

　　JSON 在 java 中的使用（以 fastjson 为例）

　　　　① 将单个对象转化为 json 字符串

　　　　　　JSON.toJSONString()

　　　　② 将 json 字符串转化为单个对象

　　　　　　JSON.parseObject()

　　　　③ 将一组对象转化为 json 字符串

　　　　　　JSON.toJSONString()

　　　　④ 将 json 字符串转化为一组对象

　　　　　　JSON.parseArray()

BOM

　　BOM(Brower Object Model) 浏览器对象模型

　　浏览器对象  window

　　　　属性

　　　　　　document

　　　　　　screen

　　　　　　　　width

　　　　　　　　height

　　　　　　history

　　　　　　　　back()

　　　　　　　　forward()

　　　　　　　　go()

　　　　　　location

　　　　　　　　href

　　　　　　　　reload()

　　　　　　navigator

　　　　　　　　userAgent

　　　　方法

　　　　　　alert()

　　　　　　comfirm()

　　　　　　prompt()

　　　　　　open()

　　　　　　close()

　　　　　　setTimeout()

　　　　　　clearTimeout()

　　　　　　setInteval()

　　　　　　clearInteval()

DOM

　　DOM（Document Object Model）文档对象模型

　　定义：通过 dom 对象来描述一个页面的构成：我们把页面中的每一个标签称之为一个节点，每个节点又是一个对象。

　　特点：① 一个标签就是一个元素节点：由属性节点和文本节点构成

　　　　　② 文本节点和属性节点都可以看做是元素节点的子节点

　　　　　③ 每种节点都有节点的类型（nodeType）

　　　　　　　　nodeType = 1  表示元素节点

　　　　　　　　nodeType = 2 表示属性节点

　　　　　　　　nodeType = 3 表示文本节点

1、元素节点的获取

　　① 直接获取

　　　　根据元素 id 属性获取元素

　　　　　　document.getElementById()

　　　　根据元素的 name 属性获取元素

　　　　　　document.getElementsByName()

　　　　根据元素的标签名获取元素

　　　　　　document.getElementsByTagName()

　　② 间接获取

　　　　父子关系

　　　　　　childNodes   firstChild   lastChild

　　　　子父关系

　　　　　　parentNode

　　　　兄弟关系

　　　　　　nextSibling  previousSibling

2、操作属性节点

　　① 通过 “对象.属性”操作

　　② getAttribute、setAttribute、removeAttribute

3、操作文本节点

　　① innerHTML  获取/设置标签中间的 html 代码

　　② innerText  获取/设置标签中间的文本

4、通过 dom 修改 css 样式

　　① 通过 对象.style 属性来操作标签的 css 样式：样式规则中有中划线 “-” 的，将中划线去掉，并将中划线后一个字母大写（驼峰命名法）

　　② 通过为对象的属性赋值来为标签添加样式，为 class 属性赋值时，应当为 className 赋值

5、通过 dom 动态改变 html 结构

　　① 创建一个标签新的节点对象

　　　　document.createElement("标签名")

　　② 父节点追加一个节点对象

　　　　document.appendChild(新节点对象)

　　③ 在某个指定节点之前插入一个新的节点

　　　　document.insertBefore(新节点对象，参考节点对象)

　　④ 父节点替换某个子节点对象

　　　　document.replaceChild(新节点对象，替换的节点对象)

　　⑤ 父节点删除一个子节点对象

　　　　document.removeChild(旧节点对象)　

　　　　例子：

　　　　　　//1.创建一个子结点对象 createElement

　　　　　　var ipt = document.createElement("input");

　　　　　　ipt.type = "radio";

　　　　　　//2.父结点追加一个子结点对象 appendChild

　　　　　　var father = document.getElementById("formid");

　　　　　　//father.appendChild(ipt);

　　　　　　//3.父结点在指定位置上插入子结点对象 insertBefore

　　　　　　var refNode = document.getElementById("refNode");

　　　　　　//father.insertBefore(ipt,refNode);

　　　　　　//4.父结点替换某个子结点元素对象 replaceChild

　　　　　　//father.replaceChild(ipt,refNode);

　　　　　　//5.父节点删除某个指定的子结点元素对象 removceChild

　　　　　　father.removeChild(refNode);

6、通过 dom 对象操作表单对象

　　① 获取表单对象

　　　　document.getElementById("formid")

　　　　document.表单的 name 属性值（页面中没有相同 name 的表单）

　　② 表单的属性

　　　　id 表单的唯一标识

　　　　name 表单的 name 属性

　　　　action 表单的提交地址

　　　　method 表单的提交方式

　　　　enctype 表单的编码类型

　　　　elements 获取表单域对象的一个数组

　　　　length 表单域的数量

　　③ 表单的方法

　　　　submit()  提交表单：该方法会提前于 onsubmit 事件执行

　　　　reset() 重置表单

　　④ 表单的事件：为表单的事件 return false 可以阻止事件的执行

　　　　onsubmit  表单提交之前可以执行一个函数

　　　　onreset  表单重置之前可以执行一个函数

7、通过 dom 对象操作表单域对象

　　表单域：在表单内，input 标签，select 标签，textarea 标签、button 标签，这四个标签统称为表单域对象

　　input 标签对象

　　　　①  获取表单域：input 对象

　　　　　　document.getElementById("input的id")

　　　　　　表单对象.表单域的 name 属性

　　　　② input 对象的属性

　　　　　　type：设置表单域的类型，默认值 text

　　　　　　name：提交时的 key，只有设置了 name 属性的表单域才可以提交

　　　　　　value：提交时的 value，如果单选按钮和复选框没有设置 value 属性，则提交时 “name = on”

　　　　　　readonly：（布尔值）设置表单域为只读，表单项不可以由用户填写，但提交时会提交该表单域的值

　　　　　　disabled：（布尔值）设置表单域不可用，表单项也不可以由用户填写，也不会提交该表单域的值

　　　　　　checked：（布尔值）设置表单按钮和复选框是否默认选中

　　　　③ input 对象的事件

　　　　　　通过“表单域对象.事件名=函数对象”来为该表单域添加一个事件

　　select 标签对象

　　　　① 获取表单域：select 对象

　　　　　　document.getElementById("selectid");

　　　　　　表单对象.表单域的 name 属性的值

　　　　② select 对象的属性

　　　　　　value：select 标签没有 value 属性，它的 value 使用当前选中 option 的 value 值

　　　　　　selectedIndex：当前选中 option 的下标

　　　　　　options：所有 option 标签对象的一个数组

　　　　　　对于 option 标签对象来讲：

　　　　　　　　selected = "selected" 设置某一个 option 标签是默认选中的

　　　　　　　　text：标签中间的文本值，类似于 innerText

　　　　　　　　value：就是 option 标签的 value 属性，select 提交时提交该 option 的 value 属性

　　　　③ select 对象的事件

　　　　　　对于 select 标签对象而言，常用的事件是：onchange

　　textarea 标签对象

　　　　① 获取表单域：textarea 对象

　　　　　　document.getElementById("textareaid")

　　　　　　表单对象.表单域的 name 属性的值

　　　　② textarea 对象的属性

　　　　　　textarea 多行文本框是没有 value 属性，当该表单域提交时会提交 textarea 的标签的中间的文本值

　　　　　　通过 rows 和 cols 来设定多行文本框的默认宽高

　　button 标签对象

　　　　① 获取表单域：button 对象

　　　　　　document.getElementById("textareaid")

　　　　　　表单对象.表单域的 name 属性的值

　　　　② button 对象的属性

　　　　　　type 属性：默认值 submit

　　　　　　value 属性：button 没有 value 属性，按钮上的文字写在标签中间