本文主要是介绍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知识点汇总
这篇关于Web开发基础：JavaScript常用类、面向对象和BOM的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
