BOM中的window对象

了解  

  1.获取浏览器窗口的尺寸

  console.log(window.innerWidth,window.innerHeight);

  2.window对象是可以省略的

  alert:弹出的窗口里有文字

  alert("你好");

  3.prompt() :弹出的窗口里有一段提示文字,还有个输入框,有两个按钮:“确定”按钮 和 “取消”按钮 功能:询问,让用户可以输入 (相当于问答题)

  参数: 提示信息(询问信息)

  文本框的默认值(可选的参数)

  返回值:点击“确定”按钮时,返回的是用户在文本框里输入的内容

  点击“取消”按钮时,返回的null

  var s = window.prompt("您吃的啥?","饭");

  4.confirm() :弹出一个窗口,有两个按钮:确定和取消

  功能:询问,不需要用户输入,只需要用户点击"确定"按钮,或者"取消"按钮(相当于选择题) 参数:提示信息(询问信息)

  返回值:点击“确定”按钮时,返回的true

  点击“取消”按钮时,返回的false

  var s = window.confirm("您真的要忍心删除吗?");

  5.window对象的属性location(也是个对象类型)

  href属性

  表示浏览器地址栏上内容(地址:url)

  该属性可以获取,也可以修改

  location.href="register.html";

  6.用户按下:F5表示使用缓存来刷新; ctrl+F5 不是使用缓存刷新

  reload()函数 功能:刷新页面,

  参数: boolean类型, true:使用缓存;false;不使用缓存

  location.reload(true);

  7. window.history; 现在用的不多

  back() 函数 -- 后退一页

  history.back(); 等价于点击浏览器窗口的后退按钮

  forward() 函数 -- 前进一页

  history.forward(); 等价于点击浏览器窗口的前进按钮

  go() 函数 -- 前进或后退指定的页面数(负数后退,正数前进)

  history.go(-2);//等价于执行两次 history.back();函数

  history.go(2);//等价于执行两次history.forward();

  length 属性 -- history对象中缓存了多少个URL

  history.length 表示当前浏览器窗口一共访问过多少页面

  8.window.onload = function()

  把一个函数赋给事件

  给window.onload事件赋值为函数。

  当window.onload事件触发时,执行函数里的代码

  window.onload:当浏览器窗口的内容(网页)加载完毕(网页显示完毕),执行函数里的功能

  9. window.onscroll = function()

  当浏览器窗口滚动时,会调用函数

  var i=0;

  window.onscroll = function(){ i++;

  console.log(i); }

  10.window.onresize = function()

  当浏览器窗口大小发生变化时,会调用函数

  window.onresize = function(){

  console.log(window.innerWidth,window.innerHeight); }

  11.匿名函数:没有名字的函数;

  把匿名函数赋给了变量

  用(赋值)表达式的方式 定义函数,不会声明提升

  用声明的方式 定义函数,会有声明的提升

  12.window.scrollTo() 函数 把浏览器窗口里的网页滚动到指定位置

  参数:横向的位置

     纵向的位置

  

  13.兼容性写法:document.documentElement.scrollTop || document.body.scrollTop

  表示的意思是:当 || 前面的属性不能拿到正确的值时,那么就用 || 后面的 属性获取值。

  这是逻辑短路 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop ;

  console.log(scrollTop);

  14.window.setInterval(函数名称,时间);间隔定时器(反复调用)

  功能:每隔指定时间调用一次函数

  参数:函数(回调函数)

  时间间隔:单位是毫秒

  返回值:定时器编号(数字)

  15.window.setInterval(函数名称,时间);间隔定时器(反复调用)

  功能:每隔指定时间调用一次函数

  参数: 函数(回调函数)

  时间间隔:单位是毫秒

  返回值:定时器编号(数字)

  16.window.setTimeout(函数名称,时间);

  功能:到了指定的时间后,调用函数一次

  参数: 函数(回调函数)

  时间间隔:单位是毫秒

  返回值:定时器编号(数字)

  17.window.setTimeout(函数名称,时间);

  功能:到了指定的时间后,调用函数一次

  参数:函数(回调函数)

  时间间隔:单位是毫秒

  返回值:定时器编号(数字)

  window.clearTimeout(定时器编号);

  功能:清除定时器

    

  18.getElementById( id的属性名 ):

  功能:获取特定 ID 元素的节点--最优

  参数:id的属性名

  返回值:dom对象

  function fn(){

  document:叫作文档,是网页。

  getElementById():通过html标签的id属性值获取html标签

  document.getElementById(): 在网页的范围里通过html标签的id属性值获取html标签

  console.log(document.getElementById("box"));

  var t = document.getElementById("box");

  innerHTML表示标签里的内容

  t.nnerHTML = "您被js给改了";

  19.getElementsByTagName( html的标签名):

  功能:根据标签名获取元素

  参数:html的标签名

  返回值:集合(跟数组类似),里面放置里若干个dom对象.  

    

  20.getElementsByClassName( class名 ): (IE8及以下不支持)

  功能:根据标签的类名(class属性的值)

  参数:class的属性值(class名)

  返回值:集合(跟数组类似),里面放置里若干个dom对象.

    

以上!

 

猜你喜欢

转载自www.cnblogs.com/xiaoyang459/p/12540021.html