BOM

1什么式BOM对象。

  BOM由系列对象构成,每个对象都提供很多方法和属性。

  BOM兼容性比较差,只学最基础的。顶级的对象是window。

  浏览器的窗口进行交互的对象。

window里面包含了document。应该是window.document。window.name是特殊属性。

window双重角色:1是一个接口,2window是全局对象,在全局作用域下都变成window的属性和方法。调用的适合省略(window))

document,location,navigator,screen,history

2 浏览器顶级对象window

3 页面加载事件,和主要事项。

  1 窗口的加载事件,window.onload是窗口加载事件,文档内容全部加载完成,会触发改事件(css,图片,脚本),就会调用改处理函数。

  方法1:window.onload =function(){ }

  等到页面所有文件加载完成,则会执行window.onload的函数。传统的注册只会执行最后一个onload函数。

  方法2:window.addEventListener('click',function(){});

  //load是等页面内容全部加载完毕,包括dom元素,图片,flash,css

  //DOMContentLoaded是DOM加载完毕,不包括图片,flash,css

  2 调整窗口大小施加。

  window.addEventListener('resize',function(){

  console.log('window.innerWidth');

  if(window.innerWidth <= 800){div.style.displae='none'}

  else{div.style.dispale='block'}   

  })

4 两种定时器函数 和区别

  3两种定时器。

  1. window.setTimeout(调用函数,[延迟的毫秒数]);比如定时炸弹。2s之后就会调用函数。

  window调用的时候可以省略。如果默认,则是0毫秒。

  调用直接写函数,还可以写函数名。

  function callback()  { console.log()}

  setTimeout(function(){},2000)

  setTimeout(callback,3000); 

  setTimeout('callback()',3000)//不推荐。

  var time1 = setTimeout(callback,2000)

  var time2 = setTimeout(callback,3000)

   回调函数,回头调用的意思。上一件事情完成后,才回去调用这个函数。

  停止定时器:

  btn.addEventListerner ('click',function(){window.clearTimeout(+timerd定时器的名字});

  2. setInterval(function(){},1000);每隔n毫秒,一直调用这个函数。反复使用。interval间隔!

  倒计时: setInterval 不断变换。

  

 JS直向调用对象。this。

  1 全局函数this只向的是 window:console.log(this) setTimeout(function(){},1000);

  2 方法中,调用的是谁。 o.sayHi(); this直向的是o。 btn按钮调用。

  3 构造函数函数,var fun = new Fun();实例对象 。指向fun。

5 JS执行机制。

  JS是单线程。DOM添加删除。

  JS利用CPU的计算能力,H5提出了W标准,允许JS创建多个线程。

  因此出现了同步和异步。同步:一个一个来。异步:一起执行。

  同步任务:同步任务放在主线程的执行栈!

  异步任务:回调函数是异步任务。 1普通事件: click。 2 资源下载: load 3 定时器:Interval。

  异步任务回调函数添加到任务队列里面。主车道(执行栈),应急车道(任务队列)

  event loop。事件循环。

  

6 loaction对象

  解析url。返回一个对象。

  uniform resource locator 。

  https:

  协议,域名,路径, #锚点链接。

  .href : 整个url  

  .host: 返回主机域名

  .port :返回端口号。

  .pathname: 返回路径

  .search :返回参数

  .hash 返回片段。

  location.href='www.http.' 点击跳转。

  time=5;setInterval(function(){

  if(time==0) {}

  else{div.inner='您在'+timer+'s之后跳转';timer--;}},1000);

  location 获取参数。substr字符串操作。location.search

  params = location.search.substr(1) 从字符串第一个开始截取。

  split()利用等号把分隔符分割成数组。params.split('=')。 arr[1]; 

  location.assign() 和href也可以跳转,也称为重定向。

  location.replace();替换当前页面,不记录历史,不能后退。

  location.reload();重新加载,相当于f5;

7 navigator对象

  navigator.userAgent;

前端可以判断用户,那个终端打开的页面,从而实现跳转。

8 history方法实现页面刷新。

  

   history.forward();前进。

  history.back;后退功能。

   history.go(1) ,history.go(-1).实际开发比较少,OA办公系统比较多。

网页端网页特性:

1 offset系列属性

2 client系列属性

3 scroll系列

4 封装

5 网页轮播图。

移动端网页特效:

触屏事件

移动端常见特效。

移动端常用开发插件

移动端常用开发框架。

原文地址:https://www.cnblogs.com/hacker-caomei/p/14880958.html