JS介绍
- js是一种基于对象的类型宽松的解释执行的脚本语言
- js文件分为外部js和内嵌js
- 外部js是单独将js代码写入.js文件中，在html文件中引用js文件
- 内部js是将js代码写在html中
JS使用的三种方法
一、写在外部js文件中
1、引用文件：<script type="text/javascript" src="../../js/external.js" ></script>
2、调用：<input type="button" value="点我" onclick="myFun()" />
二、写在html文件中：
1、声明函数：
<script>
function hello () {
/*弹出警示框*/
alert("hello, world！")
}
</script>
2、调用：<input type="button" value="点我" onclick="hello()" />
三、直接写在onclick中（里面需要使用单引号）：
<input type="button" value="点我" onclick="alert('hello, world！')" />
JS的基本语法
- 类型宽泛
- 变量区分大小写
- 一行代码以分号结尾
- 注释按java的注释即可
- 逐条翻译执行，如果某行代码有错，则后面的代码不再执行
变量的声明
- js中使用关键字var来声明变量，声明变量时，变量的数据类型不确定，在给变量赋值时才能确定其类型
- var name;//使用变量前要先声明
- var name = "JavaScript";//可以声明时赋值,
数据类型
- Undefined 未定义类型
- NULL 空对象
- Number 数值类型 包括NaN(Not a Number)
- String 字符串
- Object 对象
- typeof() 检测变量的数据类型
- isNaN(s) 判断s是否是一个数值，如果s是一个数值，则返回false，如果s不是一个数值，则返回true
- isNaN(5) 返回false，isNaN(12/0) 返回false 12/0 = Infinity，
- 不同数值类型转换
- boolean类型与数字运算，boolean类型会被转为数值（true转为1，false转为0）再参与计算
- 3.5+true=4.5
- 3.5+false=3.5
- 3.5-true=2.5
- booealn类型与字符串运算，则直接以true或false参与字符串的拼接
- "3.5"+true = "3.5true"，结果时string类型
- "3.5"-true = 2.5 结果是number类型，将字符串转为number类型，boolean转为number类型再参与运算
- 字符串转为数值
- parseInt() parseFloat()
- var num = parInt("100");
- 数值转字符串
方法或函数
- 使用关键字function如下声明：
- 注意：
- 1、不管方法体中有无return 的返回值，都不需要声明返回值的类型
- 2、参数列表中的参数，不需要声明参数类型
- 比如： function add(a,b){
- }
- 也可以通过函数变量的方式来定义函数
- var 变量名 = new Function("参数1","参数2","方法体");
- 如：var myfun = new Function("a","b","return a-b;")
arguments对象
- 在方法中可以通过arguments对象来访问传入的参数，传入的参数以数组的形式存入到arguments中。
- 通过arguments[0]获取传入的第一个参数，依次类推
JS数组
- js数组是用于存储一系列值的集合
- 与java数组不同的是，js的数组中，元素的数据类型可以不相同。数组长度不固定，添加元素即可改变其长度。
- 数组的创建
- 通过Array的构造方法来创建
- var arr = new Array();//空数组
- var arr = new Array(size);//长度为size的数组，元素为默认值为undefined
- 通过构造函数与初始值的方式创建数组
- var arr = new Array("Tom","Jack","Jason");
- 简写方式
- var arr = ["Tom","Jack","Jason"];
- 数组的访问
- 长度：数组名.length
- 元素：通过索引，数组名[索引]，索引从0开始
- 数组的遍历
- for或for in，for..in循环： for(var n int arr) 注意，n是索引，不是arr中的值
数组
- 数组中常用的方法
- concat数组和并 var newArr = arr1.concat(arr2);
- join(str) 将数组中所有的元素合并为一个字符串，每个元素中间添加str，如果不写参数，默认使用逗号。
- reverse() 数组反转
- pop() 移除数组中的最后一个元素并返回该元素
- push() 给数组增加一个或多个元素，并返回数组的长度
- shift() 移除数组的第一个元素，并返回该元素
- slice(m,n) 取原数组索引m到n（不包括n）之间的元素，返回一个子数组
- sort() 返回排序后的数组
- toString() 返回数组元素组成的字符，元素之间使用逗号间隔
对象
- 是一种引用类型，将属性和方法组织在一起
- 对象调用方法和属性，使用成员操作符“.”
- 对象的创建，一般对象创建为Object类型
- 使用new关键字创建
- var stu = new Object();
- stu.name="张三";//创建stu的name属性，并赋值
- stu.age=20;
- 注意：
- 1、new关键字可以省略 var stu = Object();
- 2、如果是无参构造，括号也可以省略 var stu = new Object;
- 3、不能同时省略new和括号
- 直接字面量赋值
- var stu = {name:'张三',age:20};//name和age也可以加引号
- 对象的使用，访问对象成员
- 属性的访问
- stu.name//成员操作符访问属性
- stu['name'] //使用中括号访问属性，注意加引号
- 属性的删除
- 对象创建方法
- var stu={
- }
- 方法的调用 对象名.方法名();
- wiith语句
- with(stu){
- var n = name;
- var a = age;
- }
- stu为传进来的对象
- Date对象
- var curDate = new Date();//使用当前时间创建Date对象
- 也可以使用重载的构造方法指定日期时间来创建Date对象
- 注意：月份比实际月份小1
- getYear() 返回从1900年到现在的年数
- getFullYear() 返回年份 setYear() 设置年
- getMonth() 返回月份 返回值比实际月份小一 setMonth() 设置月 设置值比实际月份小一
- getDay()返回周几 依次类推
- getHours()返回小时
- getMinutes() 返回分钟
- getSeconds()返回秒
- getTime()返回毫秒数
- toGMTString() 将date转为格林尼治时间的字符串
- toLocalString
- Windows对象
- open(url,name,info)
- alert() 警示框
- prompt() 接收用户输入框
- confirm() 确认框
- setTimeOut(func,ms) 指定方法func在ms毫秒后执行
- clearTimeOut() 清除设置的timeout方法
- document的对象集合
- getElementById() 通过id的值来获取元素引用
- getElementsByName() 根据标签的name属性值来获取元素的集合
- getElementsByTagName() 根据元素标签名获取元素的集合
- innerHtml与innerText
- 获取元素的开始标签和结束标签之间的文本，但是，innerHtml获取的内容包含html标签以及纯文本，而innerText只包含纯文本
- DOM文档对象模型
- DOM是将HTML转为节点树的模型
- 节点分为
- 元素节点 指html中的标签元素
- 属性节点 标签的开始标签内的属性
- 文本节点 开始标签和结束标签之间的文本
- 常用的方法
- getElementById() 通过id的值来获取元素引用
- getElementsByName() 根据标签的name属性值来获取元素的集合
- getElementsByTagName() 根据元素标签名获取元素的集合
- getAttribute('str') 获取名为str的属性的值
- setAttribute(属性名，属性值) 表示设置 属性名=属性值
- removeAttribute(属性名)表示删除属性名对应的属性
- 层次节点的属性
- childNodes 当前元素节点的所有子节点（包括文本节点）的集合
- children 当前元素节点的所有子元素节点的结合
- firstChild 第一个子节点（包含文本节点）
- lastChild 最后一个子节点（包含文本节点）
- firstElementChild 第一个子元素节点
- parentNode 父节点
- prevousSibling 当前节点的前一个同级节点
- nextSibling 当前节点的下一个同级节点(包括文本节点)
- attributes 当前元素的所有属性节点的集合
- 节点操作
- write() 将变量或字符串等输出到页面上
- creteElement() 创建元素节点
- appendChild(node) 将node节点追加到本节点的子节点
- createTextNode() 创建文本节点
- insertBefore(newNode,node) 将节点newNode插入到节点node之前
- replaceChild(newNode,node) 用节点newNode替换掉节点node
- cloneNode() 复制节点
- removeChild()移除节点
- DOM的事件处理
- 焦点事件
- onFocus() 获取焦点
- onBlur() 失去焦点
- onLode()页面内容加载完成
- 鼠标事件
- onclick() 鼠标单击
- onDblClick() 鼠标双击
- onMouseOver() 鼠标移入至某元素的范围内
- onMouseOut() 鼠标移出至某元素的范围外
- 键盘事件
- onKeypress() 键盘上某键被按下并释放
- onKeyDown() 键盘上按下某键
- onKeyUp() 键盘上释放某键
- 表单元素事件
- 文本的onchange() 跟之前的文本比较，不一致的时候，出发事件，不关注过程
- form的onsubmit()，写在form 表单的开始标签中，onsubmit()的返回值必须是boolean型，该方法在点击了submit按钮后，form表单被提交前执行，如果返回值为true，则继续提交表单，如果返回值为false则终止表单的提交
