BOM：浏览器对象模型
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
window对象
prompt( ): 输入框
alert( )： 提示框
confirm( )： 确定框
close( )： 关闭
open( )： 打开
setTimeout( )： 在指定毫秒后开始操作
setInterval( )： 按照指定的周期毫秒进行操作
history对象
back( ):加载前一个url
forward( )：加载下一个url
go( )：加载指定url
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function forwardPage(){
history.forward();
history.go(1);
}
</script>
</head>
<body>
<h1>页面1</h1>
<a href="D3.html">页面2超链接</a>
<br />
<a href="#" onclick="forwardPage()">forWord:下一个页面</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function backPage(){
history.back();
history.go(-1);
}
function show(){
history.go(0);
}
</script>
</head>
<body >
<h1>页面2</h1>
<a href="#" onclick="backPage()">back:上一个页面</a>
<br />
<a href="#" onclick="show()">刷新</a>
</body>
</html>
location对象
href:设置或返回url
reload( ):重新加载
replace( ):替换当前文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>location对象</title>
<script type="text/javascript">
function show(){
location.href = "ok.html"
//location.reload();
//location.replace("ok.html");
}
</script>
</head>
<body >
<input value="点我啊" onclick="show()" type="button"/>
</body>
</html>
Document对象
getElementById()： 返回对拥有指定id的第一个对象的引用
getElementsByName()： 返回带有指定名称的对象的集合
getElementsByTagName()： 返回带有指定标签名的对象的集合
write()： 向文档写文本、HTML表达式或JavaScript代码
value：访问的是标签的value属性的值
innerHTML：访问的是标签层内的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function show1() {
//1.通过ID属性获取文本框
var ele1 = document.getElementById("one");
//2.通过标签.value获取文本框里面的数据
alert(ele1.value);
}
function show2(){
var msg1 = document.getElementsByTagName("input");
alert(msg1.length);
}
function show3(){
var msg2 = document.getElementsByName("a");
alert(msg2.length);
}
</script>
</head>
<body>
<input id="one" type="text" value="123"/><br/>
<input type="text" name="a" /><br/>
<input type="text" name="a" /><br/>
<input type="text" name="a" /><br/>
<input type="text" name="a" /><br/>
<input type="button" value="getElementById" onclick="show1()" /><br/>
<input type="button" value="getElementsByTagName" onclick="show2()" /><br/>
<input type="button" value="getElementsByName" onclick="show3()" /><br/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>innerHTML</title>
<script type="text/javascript">
function show() {
//1.获取div标签
var dd = document.getElementById("mydiv");
//2.改变图层
//alert(dd.innerHTML);
dd.innerHTML = "欢迎关注！";
}
</script>
</head>
<body>
<div id="mydiv" style="font-size: 50px;font-weight: bold;">墨渐生微</div>
<hr />
<input type="button" value="变" onclick="show()" />
</body>
</html>
screen对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
document.write("客户端屏幕的宽度:" + screen.width + "<br/>");
document.write("客户端屏幕的高度:" + screen.height + "<br/>");
document.write("<hr/>");
document.write("客户端屏幕的宽度(不含任务栏):" + screen.availWidth + "<br/>");
document.write("客户端屏幕的高度(不含任务栏):" + screen.availHeight);
</script>
</head>
<body>
</body>
</html>
计时器函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setInterval函数</title>
<script type="text/javascript">
function showTime() {
var time = new Date(); //获取系统当前时间
document.write(time + "<br/>");
window.onkeypress = function() {
//触发键盘按键事件,清除事件定时器函数
clearInterval(flag);
}
}
//每隔1000毫秒调用showTime()函数
var flag = setInterval(showTime, 1000);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> setTimeout函数</title>
<script type="text/javascript">
function show() {
//1.获取系统当前时间
var time = new Date();
//2.获取div
var dd = document.getElementById("mydiv");
//3.存入div
dd.innerHTML = time;
}
//创建定时函数;3000毫秒之后调用show函数
var aa = setTimeout(show, 3000);
function cl() {
//关闭计时器函数
clearTimeout(aa);
}
</script>
</head>
<!--网页加载事件-->
<body onload="show()">
<div id="mydiv"></div>
<input type="button" value="close" onclick="cl()" />
</body>
</html>
JavaScript内置对象
Array：用于在单独的变量名中存储一系列的值
String：用于支持对字符串的处理
Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
Date：用于操作日期和时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date对象</title>
<script type="text/javascript">
/*****************获取系统当前时间*****************/
var time = new Date();
document.write(time);
document.write("<br/>");
document.write("<br/>");
/*****************获取系统当前时间*****************/
document.write(time.getFullYear());
document.write("<br/>");
document.write(time.getMonth() + 1);
document.write("<br/>");
document.write(time.getDate());
document.write("<br/>");
document.write(time.getDay());
document.write("<br/>");
document.write(time.getHours());
document.write("<br/>");
document.write(time.getMinutes());
document.write("<br/>");
document.write(time.getSeconds());
document.write("<br/>");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>字符串操作</title>
<script type="text/javascript">
window.onload = function() {
/***************************字符串***************************/
var str = "但使龙城飞将在，不叫胡马度阴山";
//根据下标，获取对应的字符
var result1 = str.charAt(2);
document.write(result1+ "<br/>");
//查找指定字符串
//如果不存在，返回-1
var result2 = str.indexOf("龙王")
document.write(result2 + "<br/>");
//如果存在，返回其具体的下标
var result3 = str.indexOf("龙城")
document.write(result3+ "<br/>");
//获取字符串的长度
document.write(str.length+ "<br/>");
//连接字符串，产生新字符串
str = str.concat("!aaa");
document.write(str+ "<br/>");
//替换字符串中的指定字符串
str = str.replace("胡马","条子");
document.write(str+ "<br/>");
//根据指定字符串，对原字符串进行切割
var content = str.split("，");
document.write(content[0]+"<br/>");
document.write(content[1]+"<br/>");
//根据起始下标以及长度，进行字符串的截取
var result = str.substr(2,5);
document.write(result+ "<br/>");
};
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*******************数组***********************/
//方式1
//var names = ['宋江','卢俊义','晁盖','吴用','林冲','王伦'];
//方式2
//var names = new Array(6);
//names[0] = '宋江';
//.....
//方式3
var names = new Array('宋江', '卢俊义', '晁盖', '吴用', '林冲', '王伦');
document.write("数组的长度:" + names.length);
document.write("<ul>");
for (var i = 0; i < names.length; i++) {
document.write("<li>" + names[i] + "</li>");
}
document.write("</ul>");
/*******************数组***********************/
var arr = ["aaa", "bbbb", "ccc", "dddd", "ffff"];
//方法1 使用for循环语句读取
for (var i = 0; i < arr.length; i++) {
document.write(arr[i] + "<br/>");
}
//方法2 使用for in 循环语句读取
// arr = window.navigator; 如果是一个未知的数值，且不是索引下标，还可以打印出下标
for (var x in arr) {
document.write(x + "=====>" + arr[x] + "<br/>");
}
/*******************hash表***********************/
//hash表
var names = {
'及时雨': '宋江',
'玉麒麟': '卢俊义',
'花和尚': '鲁智深'
};
for (var key in names) {
document.write(key + "-->" + names[key] + "<br/>");
}
document.write("<hr/>");
document.write("<b>" + names['花和尚'] + "</b>");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr = ["aaa","eee","ffff","ccc"];
// lenght 得到数组的长度
var len = arr.length;
document.write("数组的长度为："+ len);
document.write("<br/>");
//向数组里面添加一个成员 "gggg" ,返回新的长度
var index = arr.push("gggg");
document.write("push()后新数组的长度为："+ index);
document.write("<br/>");
//把数组用字符 "-"连接起来
var str_arr = arr.join("-");
document.write("把数组用字符 "-"连接起来:"+str_arr);
document.write("<br/>");
//把数组进行排序，默认按照字符编码
arr.sort();
document.write("把数组进行排序后"+arr+"<br/>");
//下面定义一个新的数组
var arr = new Array(6)
arr[0] = "10";
arr[1] = "5";
arr[2] = "40";
arr[3] = "25";
arr[4] = "1000";
arr[5] = "1";
document.write("数组："+arr+ "<br />")
document.write("默认排序后："+arr.sort()+ "<br />")
//如果是数字排序则需要加入一个比较函数
document.write("加入排序函数后:"+arr.sort(function(a,b){
return a-b;
}))
</script>
</head>
<body>
</body>
</html>
扫一扫
1267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
