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: 当设备网络连接类型发生变化时触发该事件