DOM&BOM.2
_______________________________________________________________________________________________
5. BOM常用对象:
history: 封装当前窗口打开后，成功访问过的url的历史记录栈
history.go(n): history.go(0) 刷新
history.go(-1) 后退(表单里的数据还存在) ( history.back() )
history.go(1) 前进 /*可前进或后退多次:改1为2*/
history.length 获取浏览器历史列表中的 URL 数量(打开页面初始为1)
history.back() 加载 history 列表中的前一个 URL(是个新页面，表单数据不存在，可加参数-1)
history.forward() 加载 history 列表中的下一个 URL
location: 封装当前窗口正在打开的url的对象(location.href 当前网址)
属性: .href 获取完整url,或在当前页面打开新链接(可不加域名)(在控制台输入js语句也会跳转)
.protocol 协议
.host 主机名+端口号
.hostname 仅主机名
.port 端口号
.pathname 相对路径(.com或端口号后面 到 ?之间的字符)
.hash 获得＃锚点地址
.search 获得表单提交后?后的查询字符串(也可在url后手工添加,得到的字符串中包含?)
document.referrer 获取载入当前文档的文档的URL(当前网页从哪里链接来的)
若不是通过超链接访问的，此url为NULL
截取url的后lastNum*2个数据
function getUrlInfo(lastNum){
var infoArr = location.href.split(/\?|\/|\&|\=/g);
var arr = infoArr.slice(-lastNum*2);
var result = new Object();
for(var i=0; i<arr.length; i+=2){
result[arr[i]] = arr[i+1];
}
return result;
}
获取url后某个字段的值
var getUrlParam = function(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var arr = window.location.search.substr(1).match(reg);
if (arr != null) return unescape(arr[2]);
return null;
};
getUrlParam('userId')
方法: location.assign("url") <=>location.href="url"<=>location="url" 在当前页面打开url,可后退
location.replace("newUrl") 在当前窗口打开，替换history中当前url，实现禁止后退
location.reload(false/true) 刷新(false为普通刷新，true为强制刷新)
笔试: 2种刷新:
浏览器缓存: 浏览器在首次加载页面时，会将变化不大的静态资源(css,图片,html)缓存在客户端本地硬盘
为什么: 避免重复加载，节约网络流量，提高加载速度
加载页面时: 优先在本地找缓存的资源，除非本地资源比服务器上的旧，才从服务器下载新资源
1. 普通默认刷新: 优先使用本地缓存中的文件
F5
history.go(0)
location.reload() <=> location.reload(false)
2. 强制刷新: 每次强制跳过浏览器本地缓存，总是从服务器下载新文件
location.reload(true) /*true指force(强迫)刷新*/
关于浏览器缓存的文章必须看
navigator: 封装浏览器配置信息的对象:
.cookeEnabled: 判断浏览器是否启用cookie，返回一个bool值
cookie: 客户端持久保存用户私密信息的小文件
默认保存时间: 在浏览器会话结束时过期
为什么: 程序内存中的数据都是临时的
何时: 只要在客户端持久保存用户数据时。典型:记住密码，游戏最高分
.plugins 保存插件信息的集合
插件: 为浏览器添加新功能的小软件
.plugins["插件名name"]!==undefined /*说明装了*/
.userAgent 用户代理，保存浏览器名称和版本号的字符串
何时: 鉴别浏览器的名称和版本号时
screen: 保存客户端显示设备的信息:
笔试:判断屏幕宽:
css: 媒体查询
js: screen.width(屏幕宽) screen.height(屏幕高)
top.location 当前窗体的url
self.location 父窗体的url
top.location=self.location} 把窗体的url设成和本窗体一样。可防止别的网站嵌入自己网站的内容(比如用iframe嵌入的网站页面)
第四章*****************************************************************************************
1. event事件(DOM内容):
元素的margin不会被认为点中元素，padding则会
什么是: 浏览器自动触发，或用户手动触发的页面状态的改变
事件处理函数: 当事件发生时，自动触发的函数，是一种回调函数
如何绑定事件处理函数:3种:
1. 在HTML中绑定: <ANY on事件名="js语句">
比如:<button onclick="fun(this)"> //this:点击的当前元素(不传则无法直接获取this)
问题: 不符合内容与行为分离的原则，不便于维护和重用
2. 在js中绑定(可以点击绑定这个事件时，同时为其它按钮绑定事件):
① 用on事件名:
elem.on事件名=function(){this.} /*this: 当前触发事件的.前的元素对象elem*/
=函数名 /*是回调函数*/
问题: 一个事件，只能绑定一个处理函数(前面的函数会被后面的覆盖)
② addEventListener: 添加事件监听，可让一个事件同时绑定多个处理函数
elem.addEventListener("事件名",fn); /*fn: 回调函数，绑定的函数名*/
移除事件: elem.removeEventListener("事件名",fn); /*fn: 需要移除的函数名*/
问题: 绑定时如果使用匿名函数绑定，移除时无法找到原函数
解决: 如果一个处理函数可能被移除，就必须使用有名的函数绑定
总结: 如果一个事件只有一个处理函数，且不会被移除，首选onXXX———简单
如果一个事件需要同时触发多个处理函数，或处理函数可能被移除时，首选addEventListener
使事件只触发一次: 在函数外声明一个变量，函数内if判断后改变其值，第二次触发else后的内容
_______________________________________________________________________________________________
事件模型/事件周期:
按DOM，分3个阶段:
1. 捕获: 由外向内，逐级记录各级父元素已经绑定的事件处理函数———只记录，不触发
2. 目标触发: 优先触发目标元素(target: 最初实际触发事件的元素)上的事件处理函数
3. 事件冒泡: 由内向外，即按捕获阶段记录顺序的反向，逐级触发父元素上的事件处理函数
事件对象: e
什么是: 事件发生时自动创建的，封装事件信息的对象，提供了操作事件的API
何时: ①获得事件的信息；②修改事件的默认行为时
如何获取: 事件对象，默认作为事件处理函数的第一个参数传入:
function 事件处理函数(e){} /*在触发事件时，参数e会自动获得事件对象*/
API:
取消冒泡: e.stopPropagation();
利用冒泡:
优化: 尽量少的绑定事件处理函数(事件监听)
为什么: 因为浏览器是用遍历方式查找事件监听并执行，所以事件监听越多，网页响应速度越慢
如何:如果多个平级子元素绑定相同事件时，仅需在父元素绑定一次，所有子元素共用即可
2个难题:① 如何获得最初触发事件的目标元素:
问题: this不再指实际单击的子元素，而是指向公共父元素
解决:用e.target代替this
② 问题: 目标元素可能不是想要的，可能点在子元素，也可能点在父元素
解决: 利用冒泡的事件处理函数中，要先鉴别目标元素 if(){}，再决定是否触发事件
阻止默认行为: e.preventDefault(); //同时会阻止单/复选框的选择操作
何时: 只要默认行为不是想要的，就可取消
3个固定场景:① 阻止a元素作为按钮时，向url末尾自动添加锚点地址＃
② 配合<input type="submit"/>按钮阻止表单提交
③ HTML5 中拖拽API，也要用e.preventDefault()阻止浏览器自带的默认拖拽行为
表单元素的onsubmit事件会在以任何方式提交表单时自动触发，是表单提交的最后一关。专门用于表单中所有验证，决定最终能否提交(提交验证事件绑定在表单form上)
总结:控制表单提交的方式:
1. <input type="button"/> 只有验证通过才触发form.onsubmit()事件，点击提交 <=> <button></button>
2. <input type="submit"/> 若验证未通过需要e.preventDefault()(给表单form绑定onclick阻止默认行为)
或在form上绑定onsubmit="return false"
按钮的分类:
① 提交按钮：<input type="submit"> 将表单的控件数据提交给服务器，自动提交
② 重置按钮：<input type="reset"> 将表单控件的值恢复到初始化状态
③ 普通按钮：<input type="button"> 开发者自己定义功能(JavaScript)，手动提交
④ 其他按钮：1、图片按钮（提交功能） <input type="image"> 属性：src
2、提交按钮 <button>内容</button> 自动提交
_______________________________________________________________________________________________
事件坐标系: 事件发生时，鼠标的坐标位置 function(e){ 鼠标的坐标 }
3组: X向右为正，Y向下为正
1. 相对于屏幕左上角: event.screenX/event.screenY
2. 相对于文档显示区左上角: event.clientX/event.clientY
3. 相对于当前元素左上角: event.offsetX/event.offsetY
比如:x=e.offsetX，y=e.offsetY
页面滚动 (网页向下滚动)
事件:window.onscroll在页面发生滚动时自动触发
属性:
页面滚动的距离:document.documentElement.scrollTop
document.scrollingElement.scrollTop
元素距页面顶端(body)的距离:elem.offsetTop //等于页面滚动的距离+相对于窗口顶部的距离
元素相对于窗口顶部(window)的距离:elem.getBoundingClientRect().top
body的顶部 '超出文档显示区顶部' 的距离: document.body.scrollTop //滚动后被隐藏的高度
window.onscroll = function(){
var top = (window.pageYOffset || document.documentElement.scrollTop)-(document.documentElement.clientTop || 0); //获取页面卷去的高度, 可用作楼层效果的判断条件
}
document.documentElement.clientTop //表示边框border的厚度，一般为0
_______________________________________________________________________________________________
JavaScript创建动态页面，事件是可以被JavaScript侦测到的行为，网页中的每个元素都可以产生某些可以触发JavaScript函数或程序的事件:
onclick 鼠标单击事件 也可以在HTML中写:<any onclick="函数名(参1,参2)"></any>
dblclick 鼠标双击事件(同时会触发一次单击事件)
onmouseover 鼠标进入事件，进入时触发一次，进入子元素，同样会冒泡触发父元素的onmouseover
onmouseout 鼠标移出事件，移出时触发一次
onmousemove 鼠标移动事件，在元素范围内只要移动，就触发
onfocus 光标聚焦，elem/$(elem).focus()方法触发focus事件或绑定当发生focus事件时运行的函数
onblur 光标离开
onload 网页导入
onunload 关闭网页
onchange 文本框内容改变事件，有延迟
onselect 文本框内容被选中事件
onkeyup 键盘点击事件
onkeypress 当按钮被按下时，会触发该事件，发生在当前获得焦点的元素上，每次插入字符,都会触发一次
如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生
完整的keypress过程分为2部分: ①按键被按下(触发keydown事件) ②按键被松开
监测键盘按键
document.onkeydown=function(){
var e=window.event || arguments[0];//IE8:window.eventIE9+或其它:arguments[0]，移动端不适用
switch(e.keyCode){
case 37: console.log("左箭头"); break;
case 38: console.log("上箭头"); break;
case 39: console.log("右箭头"); break;
case 40: console.log("下箭头"); break;
case 13: console.log("Enter"); break;
}
}
mouseenter鼠标移动到元素上时触发，进入子元素，不触发父元素的事件，不支持冒泡
mouseleave鼠标移出元素上时触发，不支持冒泡
文本框输入事件: onchange、onkeyup、onblur
onchange 用于文本框输入框时，需要等到文本框失去焦点(onblur)时才会触发，没有即时性,有延迟
onkeyup 在文本框中输入内容后，立即触发事件,不会延迟
onpropertychange 只要当前对象属性(包括值和输入框的属性)发生改变，都会触发事件(IE专属),无延迟
oninput 只要输入框的value值发生改变时就触发，不会延迟(很多手机不支持)
$("input").keydown(function(event){
var e=window.event || arguments[0];
if(!(e.key>=0&&e.key<=9)&&e.key!="Backspace"){ //如果输入的不是0-9或删除键，阻止输入
event.preventDefault();
}else{ }
})
注: e.key在手机端不支持，e.keyCode在手机端输入任何数字和小数点其值均为229
window.scrollTo(x,y) 方法可把内容滚动到指定的坐标
x: 必需，要在窗口文档显示区左上角显示的文档的x坐标
y: 必需，要在窗口文档显示区左上角显示的文档的y坐标
这3个事件只在手机上生效,并依次触发:
touchstart 手指开始放在一个DOM元素上(触屏)
touchmove 手指拖拽一个DOM元素(移动)，只有滑动才会触发，触发较晚
touchend 手指从一个DOM元素上移开(触屏结束)
scroll 当用户滚动指定的元素时触发，适用于所有可滚动的元素和window对象(浏览器窗口)
scroll()方法触发scroll事件，或规定当发生scroll事件时运行的函数
在手机端和PC端都生效
onpaste 事件在用户向元素中粘贴文本时触发，通常用于 type="text" 的<input>元素
所有的HTML元素都支持onpaste事件，但如<p>元素，除非设置了contenteditable为"true"，否则不会触发
有3种方式可以在元素中粘贴内容:
① 按下 Ctrl + V
② 从浏览器的编辑菜单中选择"Paste(粘贴)"
③ 右击鼠标按钮在上下文菜单中选择 "Paste(粘贴)" 命令
监听鼠标右键点击事件(移动端是长按事件):
方法①
document.onmousedown = function(e){
e = e || window.event;
if(e.button === 2){
console.log('点击右键');
}else if(e.button === 0){
console.log('点击左键');
}
}
方法②
document.oncontextmenu= function(e){
e = e || window.event;
// e.preventDefault(); //禁止显示右击事件原有的菜单(return false的效果一样)
console.log('点击右键');
console.log('x轴坐标:' +e.x); //移动端是长按的位置
console.log('y轴坐标:' +e.y);
return false;
}
打印当前页面:
window.print()
_______________________________________________________________________________________________
鼠标滚轮事件
var scrollFunc=function(e){
e=e || window.event;
if(e.wheelDelta>0){...} //向上（IE/Opera/Chrome/Safari）
else if(e.wheelDelta<0){...} //向下
else if(e.detail>0){...} //向上（Firefox）
else if(e.detail<0){...} //向下
} // detail只取±3，wheelDelta只取±120，正数为向上，负数为向下
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false); // W3C(Firefox支持)
}
window.onmousewheel=document.onmousewheel=scrollFunc; // IE/Opera/Chrome/Safari(Firefox不支持)
_______________________________________________________________________________________________
阻止浏览器自动填充账户密码
原理: 当提交表单时，浏览器会自动检测表单中是否有password元素，如果有就提示是否保存密码(不考虑网银、支付宝等输入密码时需要安装控件的网站)，所以想要阻止浏览器保存密码，只要将传统的表单提交方式改为ajax异步提交即可
当允许浏览器保存该网站的密码后，下次打开该网站的任何一个页面时，浏览器会自动检测该页面是否有password元素，如果有或有多个，则自动填充对应的上次已保存的密码，但自动填充的前提条件是: 页面中的第一个password元素，必须有id属性或name属性，两种属性都没有则不会自动填充
3个设置，缺一不可
①在form里的最前面添加一个<input type="password" />
<input type="password" style="height:0; position:absolute; border:0" autocomplete="new-password" /> 解决360兼容模式/IE，但在Chrome上没用，在FireFox上只能阻止用户名自动填充
② 给所有的type="text"加上autocomplete="off"，
<input type="text" autocomplete="off" /> //阻止Chrome自动填充
③ 给所有的type="password"加上autocomplete="new-password"
<input type="password" autocomplete="new-password" /> //阻止Firefox浏览器从cache获取数据填充登录表单
或者在前面添加两个input标签(放在form里)(微信浏览器无效):
<input type="text" style="position:absolute; left:-999px" />
<input type="password" style="position:absolute; left:-999px" />
去除浏览器自动填充表单的黄色背景
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition-delay: 9999s;
-webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
transition: background-color 5000s ease-in-out 0s;
transition: color 9999s ease-out, background-color 9999s ease-out;
-webkit-box-shadow: 0 0 0 1000px #272727 inset; 用足够大的纯色内阴影覆盖input的黄色背景
}
_______________________________________________________________________________________________
判断设备的网络状态
var online = navigator.onLine; //判断是否在线
事件绑定: 当设备有网和没网之间切换时触发
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
navigator.connection对象: 网络连接信息
属性:
① type 网络类型
② bluetooth 蓝牙
③ cellular 蜂窝网络(EDGE、HSPA、LTE)
④ ethernet 以太网
⑤ none 无连接
⑥ mixed 多类型混合
⑦ other 类型可知，但不可枚举
⑧ unknown 有链接，但类型未知
⑨ wifi Wi-Fi
⑩ wimax WiMAX
11、effectiveType 有效连接类型
取值: '2g'、'3g'、'4g'、'slow-2'
12、downlink 有效带宽，M/s
13、downlinkMax 下行最大比特率
14、rtt 往返时间(round-trip time): 从发送端发送数据开始，到发送端收到来自接收端的确认(接收端收到数据后便立即发送确认，不包含数据传输时间)总共经历的时间
事件:
connection.onchange: 当设备网络连接类型发生变化时触发该事件
