【BOM操作】

BOM操作

浏览器对象模型 , JavaScript程序提供的操作浏览器的函数方法是BOM操作.
JavaScript顶级对象 , 是JavaScript定义好的对象

     window
         JavaScript语法规定window可以不写
         window.alert()   -> alert()

一 BOM操作的三大弹窗:

    1, window.alert('内容')     警告框

    2, window.prompt('内容')    输入框
     可以使用变量存储输入的数据 , 获取的结果 一定是字符串类型 . 

    3, window.confirm('内容')   确认框
       可以使用变量存储执行结果的返回值
       点击确认 , 返回值是true , 点击取消, 返回值是false

二 BOM操作 视窗窗口的宽度高度

情况1 : 包括滚动条宽度

                window.innerWidth
                window.innerHeight

情况2 : 不包括滚动条宽度

       有文档类型声明
                document.documentElement.clientWidth
                document.documentElement.clientHeigth
                   
       没有文档类型声明
                 document.body.clientWidth
                 document.body.clientHeight

视窗窗口监听事件
当视窗窗口宽度高度改变时, 触发对应的函数程序 .

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

         浏览器视窗大小改变触发程序 , 先获取浏览器的宽度高度 
         (实际项目中使用的函数方法是有文档声明的) , 根据浏览器视窗窗口宽度设定需要执行的函数程序.

三 页面上卷的距离

  有文档类型声明
       
        document.documentElement.scrollTop
        document.documentElement.scrollLeft
        
  没有文档类型声明
        document.body.scrollTop
        document.body.scrollLeft

页面滚动监听事件 :

        window.addEventListener('scroll',function(){ })
         页面滚动触发的函数程序

一般页面滚动监听事件 , 每次触发都不会只触发一次 , 一般都是滚动条滚动一次,触发多次函数程序.

四 浏览器配置信息

       window.navigator.appName  
          浏览器名称  Netscape 网景  

       window.Navigator.appVersion
          浏览器版本信息

       window.Navigator.uesrAgent 
          浏览器版本信息
 等.

五 浏览器历史记录

    1,   window.history.length
            当前窗口浏览的页面个数

    2,   window.history.back()
           返回上一个浏览的页面
           相当于浏览器向左箭头效果

    3,    window.history.forward()
           返回下一个浏览的页面
           相当于浏览器向右箭头效果

    4,    window.history.go(+ / - 数值)
          设定跳转页面
            正数 是向前跳转的页面个数
            负数 是向后跳转的页面个数
            
        通过历史记录返回/跳转 至设定的页面
        显示执行的是当前历史记录的页面内容

六 浏览器地址栏信息

window.location

window.location.search
浏览器地址栏携带参数数据 , 跳转当前页面 , 通过get方式携带数据参数,

window.location.href
浏览器地址栏url地址 , 可以获取当前浏览器地址栏的url地址 , 也可以设定当前浏览器地址栏的url地址 .

            获取
              var 变量 = window.location.href;

            设定
             window.location.href = 'url地址';
               执行效果就是设定页面跳转的url地址
               本窗口打开当前url地址

window.open
新窗口打开url地址

其他:       
       window.location.host  服务器地址/域名
       window.location.hostname  服务器名称
       window.location.href  浏览器地址栏url地址
       window.location.origin    服务器源文件地址路径
       window.location.pathname  当前文件的路径地址
       window.location.port  服务器端口号
       window.location.protocol   服务器协议版本
       window.location.reload()  刷新当前页面
       window.location.replace()  替换当前页面
       window.location.search     浏览器地址栏携带参数数据
       window.open  新窗口打开url地址
       window.close 关闭当前窗口

七 html跳转页面并且携带参数的方法

a
跳转页面 , 设定href的属性值 .

     地址栏携带参数 :
          在href设定的url地址后携带参数数据 ;
               1, 以?(问号) 间隔url地址 和 携带参数数据
               2, 以 键值对形式携带参数数据 (键名=键值)
               3, 多个键名键值之间以 & 符号 间隔

form
跳转页面 , 设定action属性的属性值 ,

     设定携带参数方式 :
          设定method属性值 :
               get
               post

       标签参数 :
             input等标签需要设定name属性以及必要的value属性 , 
              name属性是前端html标签存储标签数据的容器.
              value属性是标签的数据数值.

总结:

  1,   a  只能使用get/post方式传参
      语法: <a href="url地址?键名=键值&键名=键值&键名=键值...">内容</a>

  2,  form 可以使用get/post方式传参
     form标签
       action属性 设定跳转的url地址路径
       method属性 设定传参方式 get/post

    input等数据标签
      name属性 携带标签数据的容器 , 相对于变量
      value属性 标签的数据数值

JavaScript页面跳转

标签添加事件 , 触发事件 ,执行对应的函数程序.

     1,   window.location.href = 'url地址路径'
                 跳转设定的url地址路径
                 是当前窗口打开

     2,   window.open = 'url地址路径'
          跳转设定的url地址路径
          是新窗口打开

获取当前浏览器地址栏url路径 :

       var 变量 = window.location.href;
          获取结果的中文 , 特殊符号都是以 %2位十六进制数值形式显示.

        window.decodeURIComponent()
           将 %十六进制 还原为 对应的字符串

        window.encodeURIComponent()
           将 字符串转化为 %十六进制