Web开发基础：JavaScript常用类、面向对象和BOM

超详细的Java知识点路线图

---

前言

下面介绍下JS中的常用类、面向对象的实现和BOM编程。

常用类

Date类

获得或设置日期或时间
创建方法：

var date = new Date();

常用方法

方法	作用
getYear	获得年 1900年到现在的年数
getMonth	获得月 从0开始
getDate	获得日
getHours	获得小时
getMinutes	获得分钟
getSeconds	获得秒
setXX	设置年、月、日…

Math类

常用方法：

方法	作用
abs	绝对值
ceil	向上取整
floor	向下取整
round	四舍五入取整
random	随机数
pow	求幂

String类

创建方法：

var str = "abc";
var str = new String("abc");

常用方法

方法	作用
indexOf	查找字符位置
charAt	取得某位置上的字符
substr(开始位置,长度）	截取
substring(开始位置，结束位置)	截取
replace	替换
split	分割
toUpperCase	大写
toLowerCase	小写
trim	去掉前后的空格
length	长度属性

Array类

和Java的区别是：对长度没有严格的限制

定义方法：

var arr = new Array(); 没有长度
var arr = new Array(5); 长度为5
var arr = [10,20,30,50,50];

二维数组：

var arr = [[1,2,4],[43,55,22],[44,22,11]];

foreach遍历

for(var num in array){
	console.log("数组元素："+array[num]);
}

常用方法

方法	作用
push(数据)	添加数据到末尾
pop()	删除末尾的数据
splice(索引,删除数量)	在某个位置删除一定数量的数据
splice(索引,删除数量,数据…)	在某个位置删除一定数量的数据，插入一系列数据
sort()	排序，默认情况下以字符的ASCII排序
reverse()	反转

案例：二级联动列表的实现
1、以二维数组保存所有的城市
2、定义函数，获得省份下拉列表，下拉列表的selectedIndex可以获得选择的项目位置，
再通过该位置，在二维数组中确定城市，把城市数组填充到城市下拉列表中。
3、在省份下拉列表的onchange事件中调用函数

<form action="" method="get">
		<select id="province" onchange="fillCity()">
			<option>请选择省份</option>
			<option value="湖北">湖北</option>
			<option value="湖南">湖南</option>
			<option value="江苏">江苏</option>
		</select>
		<select id="city">
			<option>请选择城市</option>
		</select>
	</form>
<script type="text/javascript">
	//定义保存城市的二维数组
	var cities = [["武汉","宜昌","襄阳","荆州"],["长沙","岳阳","常德","郴州"],["南京","苏州","南通","常州"]];
	//填充城市
	function fillCity(){
		//定位省份下拉列表
		var province = document.getElementById("province");
		//获得选择省份的下标
		var index = province.selectedIndex - 1;
		//获得省份的城市数组
		var cityNames = cities[index];
		//填充城市到城市列表中
		var city = document.getElementById("city");
		for(var i = 0;i < cityNames.length;i++){
			//给城市列表添加一个选项,Option参数1是显示内容，参数2是value的值
			city.options[i + 1] = new Option(cityNames[i],cityNames[i]);
		}
	}
</script>

面向对象

1）使用构造方法
类的代码可以重用

function Student(stuno,name,age){
	this.stuno = stuno;  //this.属性 就是创建了属性
	this.name = name;
	this.age = age;
	this.sayHi = function(){  //this.方法 = function(参数){....} 
		console.log("姓名:"+this.name+.....);
	}
}
//创建对象
var stu = new Student("001","zhangsan",20);
stu.stuno = "002";
stu.name = "lisi";
stu.sayHi();

2）使用JSON
代码简洁，不能重用

var stu3 = {"stuno":"0003","name":"王五","age":20,
	"sayHi":function(){
		console.log("大家好，我是"+this.name+"，年龄"+this.age);
	}
};
stu3.sayHi();

BOM编程

BOM 浏览器对象模型，以浏览器窗体window为根节点，包含浏览器中的各种对象，如历史、文档、定位等。

history对象

作用：在浏览器访问的历史页面之间跳转
常用方法

方法	作用
back	向后移动一页
forward	向前移动一页
go	指定前进或后退
go(-1)	等价于 back()
go(1)	等价于 forward()

location对象

作用：控制浏览器的页面跳转

常用方法：

方法	作用
reload	刷新当前页面
replace	替换当前页面
href	网页地址属性

window对象

常用方法

方法	作用
alert()	警告对话框
confirm()	确认对话框
prompt()	输入对话框
open(“页面地址”,“窗口名字”,“窗口的状态”)	打开新窗口
close	关闭当前窗口，关闭父窗体window.parent.close()
setTimeout(“函数名()”,毫秒）	延时执行一个函数
clearTimeout(Timeout对象）	取消延时执行
setInterval(“函数名()”,毫秒）	周期性执行函数
clearInterval(Interval对象)	取消周期执行

窗口特征（Window Features）

channelmode=yes|no|1|0 是否使用剧院模式显示窗口。默认为 no。
directories=yes|no|1|0 是否添加目录按钮。默认为 yes。
fullscreen=yes|no|1|0 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels 窗口文档显示区的高度。以像素计。
left=pixels 窗口的 x 坐标。以像素计。
location=yes|no|1|0 是否显示地址字段。默认是 yes。
menubar=yes|no|1|0 是否显示菜单栏。默认是 yes。
resizable=yes|no|1|0 窗口是否可调节尺寸。默认是 yes。
scrollbars=yes|no|1|0 是否显示滚动条。默认是 yes。
status=yes|no|1|0 是否添加状态栏。默认是 yes。
titlebar=yes|no|1|0 是否显示标题栏。默认是 yes。
toolbar=yes|no|1|0 是否显示浏览器的工具栏。默认是 yes。
top=pixels 窗口的 y 坐标。
width=pixels 窗口的文档显示区的宽度。以像素计。

结束

---

大家如果需要学习其他Java知识点，戳这里 超详细的Java知识点汇总