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知识点汇总

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

恒哥~Bingo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值