|
1.BOM基础 BOM（Browser Object Model）即浏览器对象模型 BOM相关说明： ① BOM提供了独立于内容而与浏览器窗口进行交互的对象 ② 由于BOM主要用于管理窗口与窗口之间的通信，因此其核心对象是 window对象 ③ BOM由一系列相关对象构成，并且每个对象都提供了很多方法与属性 ④ BOM缺乏一个统一的标准 JavaScript语法的标准化组织是ECMA DOM的标准化组织是 W3C（所有浏览器公共遵循的标准） BOM是各个浏览器厂商根据 DOM在各自浏览器上的实现，表现为不同浏览器定义有差别，实现方式不同 ⑤ 通常情况下所说的BOM，一般都是指 window对象 BOM与 DOM的区别与联系 ① DOM通过 document对象访问、控制、修改HTML和XHTML等文档中的内容 ② BOM通过 window对象来访问、控制、修改浏览器中的内容 ③ BOM包含 DOM，用来访问浏览器的是BOM对象，从 BOM对象可以访问到 DOM对象，进而操作浏览器和读写文档内容 ④ BOM描述了处理网页内容的方法和接口（操作页面内部），BOM描述了与浏览器进行交互的方法和接口（操作页面之间） 2.window对象 window对象是BOM具象化的表现形式 因为 window对象是 JavaScript中的顶级对象，所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法， 在调用的时候可以省略 window，如下： 打开窗口：window.open(url); 关闭窗口：window.close(); 获取事件：window.event; 获取文档：window.document; 3.window对象的name属性 window.name是window对象的一个属性，默认值为空 特性：window.name值在不同的页面（甚至不同域名）加载后依旧存在，且可以支持非常长的 name值（2M左右） 应用：由于window.name属性具有在不同页面保持存在的特性，出现了一门叫作“跨域传输”的技巧，而这个技巧的内部实现原理就是window.name属性的持久性特性。 <html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域传输</title>
</head>
<body>
<script>
var cont=110;
//定义window.name属性值，属性值内的变量可以是任何类型的数据
window.name='var cont=110;';
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域加载</title>
</head>
<body>
<button>跨域加载</button>
<script>
var btn=document.querySelector('button'); //定义一个触发按钮（非必要）
btn.onclick=function () {
var iframe=document.createElement('iframe'); //创建iframe元素作为加载跨域内容的容器
iframe.src = 'test.html'; //通过iframe.src属性将需要跨域加载的文档链接赋值
iframe.style.display='none'; //隐藏iframe框架的界面显示
document.body.appendChild(iframe); //将创建的iframe添加至当前页面body中
// 当iframe加载完毕后，意味着“window.name”的内容已经赋予完毕
iframe.onload=function () {
var iframeContent=event.target.contentWindow.name; //获取iframe中的window.name属性内容
console.log(iframeContent); //直接获取过来的window.name属性值为string形式，不是可执行代码
eval(iframeContent); //通过“eval()”方法将字符串形式的代码转换为可执行代码
console.log(cont);
}
}
</script>
</body>
</html>
4.window对象的尺寸属性 ① 浏览器尺寸 window.outerHeight; window.outerWidth; 这两个属性返回的是整个浏览器的高度和宽度，与页面窗口大小没有任何关系 ② 页面窗口尺寸 window.innerHeight; window.innerWidth; 这两个属性返回的是视口的高度和宽度（计算滚动条的尺寸），跟随页面窗口变化 ③ 页面内容尺寸 document.documentElement.clientHeight; document.documentElement.clientWidth; 这两个属性返回视口的高度和宽度，不计算滚动条的尺寸 ④ 页面滚动距离 window.pageXOffset; window.pageYOffset; 这两个属性指的是页面内容发生滚动的距离，返回值为“滚动距离” ⑤ 浏览器与屏幕距离 window.screenX; window.screenY; 这两个属性指的是浏览器与屏幕的距离，左上角为各自的（0,0）坐标点 5.window.navigator对象 window.navigator对象包含大量有关Web浏览器的信息，在检测浏览器和操作系统方面非常有用 这个对象和 event一样是一个全局变量，并且是唯一的 常用属性： navigator.appCodeName；浏览器代码名的字符串表示 navigator.appName；官方浏览器名的字符串表示 navigator.appVersion；浏览器版本信息的字符串表示 navigator.cookieEnable；如果启用cookie返回true，否则返回false navigator.javaEnable()；如果启用java返回true，否则返回false navigator.platform；浏览器所在计算机平台的字符串表示 navigator.plugins；安装在浏览器中的插件数组 navigator.userAgent；返回和浏览器内核相关的信息 如果window.navigator.userAgent返回值出现了Mobile，则可以确定用户使用的是移动设备 6.window对象常用方法 alert()；显示带有一段消息和一个确认按钮的提示框 prompt()；显示可提示用户输入的对话框 confirm()；显示带有一段消息以及确认按钮和取消按钮的对话框 open()；打开一个新的浏览器窗口或查找一个已命名的窗口 close()；关闭浏览器窗口 print()；打印当前窗口的内容 focus()；把键盘焦点给予一个窗口 blur()；把键盘焦点从顶层窗口移开 moveBy()；可相对窗口当前坐标移动指定的距离(像素) moveTo()；把窗口的左上角移动到指定的坐标位置 resizeBy()；按照指定的像素尺寸调整窗口大小 resizeTo()；将窗口的大小调整到指定的宽度和高度 scrollBy()；按照指定的像素值滚动页面内容 scrollTo()；把页面内容滚动到指定的坐标位置 setInterval()；每隔指定的时间执行代码 setTimeOut()；在指定的延迟时间后执行代码 clearInterval()；取消 setInterval设置 clearTimeOut()；取消 setTimeOut设置 7.提示框 ① alert ()， 表示警示框，主要用于提示用户信息，该方法执行后无返回值 语法：window.alert(' alertMsg'); //无返回值所以console.log(alert(''));结果为 undefined alert()方法弹出的对话框是模态对话框，在对话框关闭之前程序暂停，直到关闭后才继续执行 ② prompt ()， 表示警示框，主要用于提示并收集用户信息，该方法执行后根据情况不同返回值略有不同 语法：window.prompt ('alertMsg', 'defaultMsg'); 点击取消时，返回值为 null 没有设置默认值（defaultMsg）时， 如果用户没有输入内容，确认后返回一个空字符串，取消后返回null 如果用户输入了内容，返回值为用户输入的内容 设置了默认值（defaultMsg）时， 如果用户没有输入内容，则确认后返回默认值 如果用户输入了内容，返回值为用户输入的内容 同样，prompt()方法也是模态对话框，在对话框关闭之前程序暂停，直到关闭后才继续执行 ③ confirm()， 表示警示框，主要用于提示用户确认信息，点击确认返回 true，点击取消返回 false 语法：window.confirm(' alertMsg '); 同样，confirm()方法也是模态对话框 一般情况下，通过判断用户做出的选择，作为后续程序执行条件 8.提示框综合案例 <html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义鼠标右键菜单</title>
<style>
*{margin: 0;padding: 0;}
ul{
width: 130px;
list-style: none;
display: inline-block;
background-color: #cccccc;
position: absolute; /*设置绝对定位以便于跟随焦点坐标显示*/
display: none;
}
li{
height: 30px;
padding: 5px 10px;
line-height: 30px;
}
ul li:hover{
background-color: hotpink;
color: blue;
cursor: pointer;
transition: 0.3s;
}
</style>
</head>
<body>
<!--通过ul>li创建右键菜单列表-->
<ul>
<li>Alert提示</li>
<li>关闭页面</li>
<li>BaiDu选中内容</li>
<li>输入搜索内容</li>
</ul>
<!--在页面中创建一个文本输入区域，第三个li用-->
<textarea cols="100" rows="20" style="font-size: 20px"></textarea>
<script>
var ulMenu=document.querySelector('ul');
var ulOption=document.querySelector('li');
// 禁用系统右键菜单事件“contextmenu”
document.oncontextmenu=function () {
return false; //return false表示事件禁用
}
// 定义鼠标抬起时触发事件
document.onmouseup=function (eve) {
// 通过 event.button属性返回值判断鼠标按键
// console.log(event.button);
// 返回值“0”代表左键，返回值“1”代表滚轮，返回值“2”代表右键,...
if (event.button==2){
ulMenu.style.display='inline-block';
ulMenu.style.left=eve.clientX+'px';
ulMenu.style.top=eve.clientY+'px';
}else{
ulMenu.style.display='none';
}
}
//通过“事件委托”的方式获取触发节点，判断需要执行的操作
ulMenu.onmousedown=function (eve) { //此处必须使用mousedown事件！
if (eve.target.innerHTML=='Alert提示'){
alert('这是alert()方法测试');
}else if (event.target.innerHTML=='关闭页面'){
if (confirm('确定离开了么？')){
window.close();
}
}else if (eve.target.innerHTML=='BaiDu选中内容'){
//使用getSelection()方法获取光标选中的文本内容，返回值为 object
//而搜索使用的是字符串，需要再使用 toString()方法将获取结果转换为字符串
//如果绑定事件为 onclick或 onmouseup时，返回值为空字符串
var textSelect=document.getSelection().toString();
// console.log(textSelect);
open('http://www.baidu.com/s?word='+textSelect);
}else{
var searchText=prompt('请输入你想搜索的内容','比如：美女')
window.open('http://www.baidu.com/s?word='+searchText);
}
}
ulMenu.onmouseleave=function () {
ulMenu.style.display='none';
}
</script>
</body>
</html>
9.知识碎片： ① <textarea>标签 <textarea> 标签表示多行纯文本编辑控件，用户可在其文本区域中写入文本 常用属性： name，规定文本区域的名称 autofocus，当前页面加载时文本区域自动获取焦点 cols，规定文本区域内可见的列数 rows，规定文本区域内可见的行数 maxlength，规定文本区域允许的最大字符数 placeholder，设置描述性提示，加载时显示在文本区域 readonly，规定文本区域为只读 required，规定文本区域为必填项 wrap，规定提交表单时，区域内文本如何换行， 属性值包括 hard（提交表单时文本换行）、soft（提交表单时文本不换行，默认值） ② contextmenu 在HTML中，该属性规定了元素的上下文菜单，，当用户右击元素时将显示上下文菜单 属性值是需要打开的<menu>元素的 id 语法示例：<div contextmenu="mymenu"> <menu type="context" id="mymenu"> oncontextmenu事件，在元素中用户右击鼠标时触发并打开上下文菜单 语法：元素节点 .oncontextmenu=function(){ }; 还可以直接在HTML的元素属性中定义该事件，如前面的<div>标签属性可以如下书写： <div contextmenu="mymenu" oncentextmenu=' myFunction() '>; ③ event.button属性 button 事件属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击。 ④ getSelection()方法 该方法可以返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置 语法：window.document.getSelection(); 想要将getSelection()的返回值（对象）转换为字符串，可以通过连接一个空字符串(' ')，或使用 .toString()方法 select()方法，表示全选当前输入的内容 10.间隔调用 间隔调用又被称作定时器，是一种能够每隔一定时间自动执行一次的函数 语法示例：var timer=null; timer=setInterval { function(){ }，执行间隔时间/ms}; 清除间隔调用函数，使用 clearInterval()方法 语法：clearInterval(变量标识); 示例：clearInterval (timer); 注意事项： ① 间隔调用的返回值是一个数字队列，因此，通过访问数字队列来清除间隔调用也是可以的 ② 如果间隔调用的函数需要传入参数，则间隔调用不能使用匿名函数，需要使用如下方式声明 var timer=null; timer=setInterval(' myFunction( 参数值 ) ', 执行间隔时间); //调用函数是“字符串”形式 ③ 间隔调用不是立即执行，而是在“任务队列中的任务完成后”才执行间隔调用 ④ 因为间隔调用的实际执行者是 window，因此间隔调用函数内部的 this指向的是 window 11.延迟调用 延迟调用是一种在等待一定时间后执行的函数（执行一次） 语法：var timer=null； timer=setTimeout( function(){ }, 延迟执行时间/ms); 延迟调用函数的用法与间隔调用函数基本相同 |
|
|
