JavaScript BOM
一、BOM简介
JavaScript由三部分组成:
- ECMAScript 核心语法
- DOM 文档对象模型,核心对象是document,用来操作页面文档
- BOM 浏览器对象模型,核心对象是window,用来操作浏览器
二、window对象
常用属性:
名称 | 含义 |
---|---|
history | 有关客户访问过的URL的信息 |
location | 有关当前 URL 的信息,子级DOM对象 |
document | 表示浏览器窗口中的HTML文档,子级DOM对象 |
//window的属性
console.log(window.document);
console.log(document);//省略了window前缀
console.log(location);
console.log(history);
常用方法:
方法名 | 含义 |
---|---|
alert(text) | 显示一个带有提示信息和确定按钮的警告框 |
prompt(text) | 显示一个带有提示信息、文本输入框、确定和取消按钮的输入框,返回值为输入的数据 |
confirm(text) | 显示一个带有提示信息、确定和取消按钮的确认框 ,确定返回true,取消返回false |
open(url,name, options) | 打开具有指定名称的新窗口,并加载给定url所指定的文档 |
setTimeout(fn,delay) | 设置一次性定时器,在指定毫秒值后执行某个函数 |
setInterval(fn,delay) | 设置周期性定时器,周期性循环执行某个函数 |
clearTimeout(timer) | 清除一次性定时器 |
clearInterval(timer) | 清除周期性定时器 |
scrollTo(xpos,ypos) | 把内容滚动到指定的坐标,即设置滚动条的偏移位置 |
scrollBy(xnum,ynum) | 把内容滚动指定的像素数,即设置滚动条的偏移量 |
<head>
<script>
//window的方法
//1.alert()
alert(111);
window.alert(111);
//2.prompt()
var name=prompt("请输入用户名:");
console.log(name);
//3.confirm()
var flag=confirm("确定要删除吗?");
console.log(flag);
//4.open()
function f1(){
open("用户信息管理.html","user","width=500px,height=500px");
}
//5.setTimeout()
var timer;
function f2(){
//5秒后执行
timer=setTimeout(function(){
console.log("5秒后出现");
},5000);//单位为毫秒
}
//6.setInterval()
function f3(){
//每隔2秒执行一次
timer1=setInterval(function(){
console.log("每2秒执行一次");
},2000);
}
//7.clearTimeout()
function f4(){
clearTimeout(timer);
}
//8.clearInterval()
function f5(){
clearInterval(timer1);
}
//9.scrollTo()
function f6(){
scrollTo(0,200);//向下移动到200像素的位置
}
//10.scrollBy()
function f7(){
scrollBy(0,200);//向下再移动200像素
}
</script>
</head>
<body>
<button onclick="f1()">打开一个新窗口</button>
<button onclick="f2()">一次性计时器</button>
<button onclick="f3()">周期性计时器</button>
<button onclick="f4()">关闭一次性计时器</button>
<button onclick="f5()">关闭周期性计时器</button>
<button onclick="f6()">移动滚动条1</button>
<button onclick="f7()">移动滚动条2</button>
<hr>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
<p>p10</p>
<p>p11</p>
<p>p12</p>
<p>p13</p>
<p>p14</p>
<p>p15</p>
<p>p16</p>
<p>p17</p>
<p>p18</p>
<p>p19</p>
<p>p20</p>
<p>p21</p>
<p>p22</p>
<p>p23</p>
<p>p24</p>
<p>p25</p>
<p>p26</p>
<p>p27</p>
<p>p28</p>
<p>p29</p>
<p>p30</p>
<p>p31</p>
<p>p32</p>
<p>p33</p>
<p>p34</p>
<p>p35</p>
<p>p36</p>
<p>p37</p>
<p>p38</p>
<p>p39</p>
<p>p40</p>
<p>p41</p>
<p>p42</p>
<p>p43</p>
<p>p44</p>
<p>p45</p>
<p>p46</p>
<p>p47</p>
<p>p48</p>
<p>p49</p>
<p>p50</p>
<p>p51</p>
<p>p52</p>
<p>p53</p>
<p>p54</p>
<p>p55</p>
<p>p56</p>
<p>p57</p>
<p>p58</p>
<p>p59</p>
<p>p60</p>
<p>p61</p>
<p>p62</p>
<p>p63</p>
<p>p64</p>
<p>p65</p>
<p>p66</p>
<p>p67</p>
<p>p68</p>
<p>p69</p>
<p>p70</p>
<p>p71</p>
<p>p72</p>
<p>p73</p>
<p>p74</p>
<p>p75</p>
<p>p76</p>
<p>p77</p>
<p>p78</p>
<p>p79</p>
<p>p80</p>
<p>p81</p>
<p>p82</p>
<p>p83</p>
<p>p84</p>
<p>p85</p>
<p>p86</p>
<p>p87</p>
<p>p88</p>
<p>p89</p>
<p>p90</p>
<p>p91</p>
<p>p92</p>
<p>p93</p>
<p>p94</p>
<p>p95</p>
<p>p96</p>
<p>p97</p>
<p>p98</p>
<p>p99</p>
<p>p100</p>
</body>
常用事件:
事件名 | 含义 |
---|---|
onclick | 鼠标单击 |
onload | 页面加载完成 |
onscroll | 窗口滚动条滑动 |
//window的事件
window.onclick=function(){
console.log(111);
}
window.onload=function(){
console.log(222);
}
window.onscroll=function(){
console.log(333);
}
注:由于window对象是BOM结构的顶层对象,所以在调用window的属性和方法可以省略window.
三、location对象
常用属性:
- href 设置或返回地址栏中的url
常用方法:
- reload() 重新加载当前页
<head>
<script>
function dolocation(){
//获取地址栏中的url
console.log(location.href);
//设置地址栏中的url,实现页面跳转
location.href="https://www.baidu.com";
//刷新页面
location.reload();
}
</script>
</head>
<body>
<button onclick="dolocation()">操作location</button>
</body>
四、history对象
常用方法:
方法名 | 含义 |
---|---|
back( ) | 后退,加载History列表中的上一个url |
forward( ) | 前进,加载History列表中的下一个url |
go(number) | 浏览器移动指定的页面数 |
<head>
<script>
function f1(){
history.back();
}
function f2(){
history.forward();
}
function f3(){
history.go(1);//等价于history.forward()
history.go(-1);//等价于history.back()
history.go(0);//等价于location.reload()
}
</script>
</head>
<body>
<button onclick="f1()">后退</button>
<button onclick="f2()">前进</button>
<button onclick="f3()">切换历史</button>
</body>
原文地址:https://blog.csdn.net/qq_72013756/article/details/142431611
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!