js---BOM

2023-10-03 19:22:16

1）BOM：Bom是浏览器对象模型（*对象为windows,可以省略）

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
  
</head>
 
<body>
  <p>Hello</p>
  <input type='button' value="点击" id='btn' />
  
  <script>
    //window.onload=function(){   

    onl oad=function(){    //window可以省略
      alert("js最后一大模块")
    }
 
  </script>

    
</body>
 
</html>

（2）window.οnlοad=function(){};页面加载；也可以写成οnlοad=function(){}

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <script>
    
     onl oad=function(){    //onload加载浏览器所有对象
      document.getElementById('btn').onclick=function(){
       alert('java最后一大模块')
     }
     
    }
     
     </script>
    
  
</head>
 
<body>
  <p>Hello</p>
  <input type='button' value="点击" id='btn' />
    
</body>
 
</html>

(3)location对象的属性和方法：

window.location.host

window.location.port

window.location.pathname

window.location.href

方法：

window.location.assign("http://www.baidu.com") //加载url并能返回之前的网页

window.location.replace("http://www.baidu.com") //加载url不能返回之前的网页

window.location.reload() //刷新网页

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    
    
  
</head>
 
<body>
  <p>Hello</p>
  <input type='button' value="点击" id='btn' />
 
  <script>
    console.log(window.location)
    console.log(window.location.host)
    console.log(window.location.port)
    console.log(window.location.hash)
    console.log(window.location.pathname)
    console.log(window.location.hash)
    console.log(window.location.href)  //页面跳转
    document.getElementById('btn').onclick=function(){
      //window.location.href="http://www.baidu.com";
      //window.location.assign("http://www.baidu.com")
      //window.location.replace("http://www.baidu.com")
      window.location.reload()

    }
    


  </script>

    
</body>
 
</html>

2）BOM常用对象：history(跳转回历史记录）、window.navigator.userAgent(获取浏览器信息)

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    
    
  
</head>
 
<body>
  <p>Hello</p>
  <input type='button' value="页面跳转到百度" id='btn' />
  <input type="button" value="通过历史记录到百度" id="btn1"/>
 
  <script>
    

    document.getElementById('btn').onclick=function(){
      window.location.href="http://www.baidu.com"
    }

    document.getElementById('btn1').onclick=function(){
      window.history.forward();
    }

    console.log(window.navigator.userAgent)  //获取浏览器信息

    
    


  </script>

    
</body>
 
</html>

3）定时器：setInterval（循环计时器）、setTimeout（一次性的计时器）

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定时器</title>
    
    
  
</head>
 
<body>
  <p>Hello</p>
  <input type='button' value="停止计时器" id='btn' />
  <input type="button" value="通过历史记录到百度" id="btn1"/>
 
  <script>
    //  var time=setInterval(function(){
    //   alert("一秒一次")
    // },3000)
    // document.getElementById('btn').onclick=function(){

    //   window.clearInterval(time)
    // }
   var time=setTimeout(function(){  //一次性计时器
       alert("一秒一次")
     },1000)
     document.getElementById('btn').onclick=function(){

      window.clearTimeout(time)
 }


  </script>

    
</body>
 
</html>

4）offset属性：获取style的尺寸：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定时器</title>
    <sytle>
        body{margin:0px;padding:0px;}
        #mian{width :400px;height:400px:background:red;}
        #count{width:200px;height:200px:background:orange;}
    </sytle>

</head>
 
<body>
  <div id="mian">
    <div id="count">
      
    </div>

  </div>
  <p>Hello</p>
  <input type='button' value="点击" id='btn' />
  
 
  <script>
    document.getElementById('btn').onclick=function(){
      //不能获取div尺寸
      console.log(document.getElementById('mian').style.height)
      //材能获取尺寸
      console.log(document.getElementById('mian').offsetWidth);
      console.log(document.getElementById('mian').offsetHeight);
      console.log(document.getElementById('mian').offsetParent);
    }
    

  </script>

    
</body>
 
</html>

（5）scroll属性：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>scroll属性</title>
    <style>
      body{margin: 0px;padding: 0px;}
      #dv{width:300px;height: 300px;background-color: red;border:30px solid #808080;}
       
    </style>

</head>
 
<body>
  <div id="dv"></div>
  <input type="button" value='点击' id='btn'/>
  
  <script>
    document.getElementById('btn').onclick=function(){
      console.log(document.getElementById('dv').offsetWidth) //算上边框
      console.log(document.getElementById('dv').scrollWidth)  //去掉边框
      console.log(document.getElementById('dv').scrollHeight)
    }
    

  </script>

    
</body>
 
</html>

码农公寓

相关文章