BOM：浏览器对象模型(BrowserObjectModel)
定时执行，见第2章
window
http://www.w3school.com.cn/jsref/met_win_open.asp
window.open
window.open(URL,name,features,replace)
URL:地址
name：窗口名称
features：新窗口要显示的标准浏览器的特征
replace：一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。
简单例子
<script type="text/javascript">
function open_win()
{
window.open("http://www.w3school.com.cn")
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var w;
function newWindow(){
//window.open("https://www.jianshu.com/p/c1c0755d2645");
w=window.open("https://www.baidu.com",'mywindow','width=600,height=400');
//window.open("https://www.jianshu.com/p/c1c0755d2645",'','width=600,height=400');
//w.moveTo(300,300);
//w.resizeTo(800,600);
//w.focus;
}
function closeWindow(){
w.close()
}
</script>
</head>
<body>
<a href="javascript:newWindow()"> new page</a>
<a href="javascript:closeWindow()"> close page</a>
</body>
</html>
<input type=button value="Open Window" onclick="open_win()" />
打开一个窗口，打印一行文字，并获取焦点
<script type="text/javascript">
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus()
</script>
打开一个窗口，显示图片，指定宽高
<a href="javascript:newWindow()"> new page</a>
<script>
function newWindow() {
var win=open("../../images/1.jpg","mywindow","width=1250,height=500");
}
</script>
窗口其他方法
moveTo(x,y)
方法格式：window.moveTo(x,y);
功能：将窗口移动到指定坐标(x,y)处;
resizeTo(x,y)
方法格式：window.resizeTo(x,y);
功能：将当前窗口放大或缩小到(x,y)指定大小，x、y分别为宽度和高度;
resizeBy(x,y)
方法格式：window.resizeBy(x,y);
功能：要使窗口宽度放大或缩小的像素数。可以是正、负数值。
将当前窗口改变到指定的大小(x,y),当x、y的值大于0时为扩大，小于0时为缩小。
moveBy（x,y）
功能：相对窗口的当前坐标把它移动指定的像素。
.focus .blur ## 得到或失去焦点
<script>
function newWindow() {
var win=open("../../images/1.jpg","mywindow","width=200,height=200");
win.moveTo(300,0);
win.resizeTo(500,500);
win.resizeBy(200,50);
//win.focus();
}
</script>
window.close()
function closeWin()
{
myWindow.close()
}
js中的三种消息对话框分别是alert()，confirm()，prompt()
1、alert():警告窗口
有一个确认按钮。
①写在<script>标签中
②括号中的内容为字符串或者整型
③点击确认即可关闭，无返回值
window.alert(“欢迎！请按“确定”继续。”)，
2、confirm():确认对话框,返回true/false，
有确认和取消两个按钮
①写在<script>标签中
②括号中的内容为字符串和整型
③点击确认返回true，点击取消返回false
<script type="text/javascript">
function disp_confirm()
{
var r=confirm("确认删除吗")
if (r==true)
{
document.write("You pressed OK!")
}
else
{
document.write("You pressed Cancel!")
}
}
</script>
<input type="button" onclick="disp_confirm()"
value="Display a confirm box" />
3、prompt(？，？):弹出消息对话框
prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
①写在<script>标签中
②str1: 要显示在消息对话框中的文本(提示语)，不可修改
str2：文本框中的内容，可以修改
③点击确认返回输入框中的内容，取消返回null
var myname=prompt("请输入你的姓名:");
if(myname!=null)
{ alert("你好"+myname); }
else
{ alert("你好 my friend.");
其他例子
<script>
alert("hello啊");
var result=confirm("您确认要删除吗");
if(result){
alert("已删除");
}else{
alert("已取消");
}
//接受用户输入
var name=prompt("请输入您的姓名","");
document.write(name);
</script>
document对象
获取元素的方式
通过document获取
getElementById()
通过id获取 结果为对象类型 可以直接用变量接收
getElementByName()
通过name获取 结果为数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function check() {
//通过id获取元素
var name = document.getElementById("username");
alert("用户输入的值是：" + name.value);
var hobbys = document.getElementsByName("hobby");
for (var i = 0; i < hobbys.length; i++) {
//如果是多选框，我需要判断是否被用户选中
if (hobbys[i].checked) {
alert(hobbys[i].value);
}
}
//不常用
var inputs=document.getElementsByTagName("input");
alert(inputs);
}
</script>
</head>
<body>
<form onsubmit="return check()">
<input type="text" id="username"/><br>
爱好<input type="checkbox" name="hobby" value="1">真香
<input type="checkbox" name="hobby" value="2">呵呵
<input type="checkbox" name="hobby" value="3">打豆豆
<input type="submit"/>
</form>
</body>
</html>
getElementByTagName()
通过tagname获取 结果为数组
innerHtml innerText区别
innerHtml解析并显示成html形式
innerText按文本方式显示
通过集合方法
document.images[0]
document.images["img2"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function getImgName() {
alert("aa");
//通过images
var images= document.images;
/* for(var i=0;i<images.length;i++){
alert("图片名："+images[i].src);
}*/
images[0].src="../../images/2.jpg";
document.images["img2"].src="../../images/1.jpg";
//换图片
}
</script>
</head>
<body>
<form>
<input type="button" name="btn1" onclick="getImgName()" value="换图"/>
<img src="../../images/1.jpg" name="img1" height="200" width="200"/>
<img src="../../images/2.jpg" name="img2" height="200" width="200"/>
</form>
</body>
</html>
通过name属性方法
document.images.img2
document.img2
作者：wqjcarnation
链接：https://www.jianshu.com/p/c1c0755d2645
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
网友评论