JavaScript学习第二十天

最新推荐文章于 2024-07-16 16:43:05 发布

P_Gang

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量430

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/P_Gang/article/details/124653048

版权

BOM的窗口事件

    var aBtns = document.getElementsByTagName("button");
    aBtns[0].onclick=function(){
        window.open("newWin.html","_blank","scrollBars=yes")
    }

     onload  当文档加载时运行脚本   入口函数
     window.onload=function(){
         // 网页/文档加载完成  包含图片等资源
         console.log("网页加载完成")
     }

     onunload  关闭当前网页
    window.onunload=function(){
        // console.log("离开当前网页")
        alert("离开当前网页")
    }
   
    onpageshow 当窗口可见时运行脚本
    window.onpageshow=function(){
        console.log("当前页面可见")
    }
     onpagehide 当窗口隐藏式运行脚本
    window.onpagehide=function(){
        console.log("当前页面隐藏")
    }

     onblur 当窗口失去焦点时运行脚本
    window.onblur=function(){
        console.log("当前页面失去焦点")
    }
    
    onfocus 当窗口获取焦点时运行脚本
    window.onfocus=function(){
        console.log("当前页面获取焦点")
    }

    onresize 当窗口调整大小时运行脚本
    window.onresize=function(){
        console.log("调整了窗口的大小:",innerWidth,innerHeight)
    }

     · onerror 当错误发生时运行的脚本
     · window.onerror = function(message, source, lineno, colno, error) { ... }
     · message：错误信息（字符串）。可用于HTML onerror=""处理程序中的event。
     · source：发生错误的脚本URL（字符串）
     · lineno：发生错误的行号（数字）
     · colno：发生错误的列号（数字）
     · error：Error对象（对象）
    document.getElementsByTagName("img")[0].onerror=function(message, source, lineno, colno, error){
        console.log("图片加载失败",message)
    }

     window.onerror=function(){
         console.log("发生错误")
     }

     onscroll 当元素的滚动条滚动时运行脚本
    window.onscroll=function(){
        console.log("页面在滚动")
    }

    
     ·onpopstate		当窗口历史记录改变时运行脚本
     ·onafterprint		在打印文档之后运行脚本
     ·onbeforeprint		在文档打印之前运行脚本
     ·onbeforeonload		在文档加载之前运行脚本
     ·onhashchange		当文档改变时运行脚本
     ·onmessage		当触发消息时运行脚本
     ·onoffline		当文档离线时运行脚本
     ·ononline		当文档上线时运行脚本
     ·onredo		当文档执行再执行操作（redo）时运行脚本
     ·onstorage		当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本
     ·onundo		当文档执行撤销时运行脚本

BOM的screen对象

     window.screen对象   包含有关用户屏幕的信息
    console.log(window.screen);
     http://127.0.0.1:5500
     availLeft: 1920
     availTop: 0

     availWidth: 1920 可用宽度
     availHeight: 1032 可以高度

     colorDepth: 24 色彩深度
     pixelDepth: 24 色彩分辨率    
     width: 1920 屏幕的宽
     height: 1080 屏幕的高


    // px 像素 图像元素 picture element

BOM的navigator对象

     window.navigator对象 包含有感访问者浏览器的信息
    
    console.log(window.navigator);
    
     appCodeName  返回浏览器的代码名
     appName  返回浏览器的名称
     appVersion  返回浏览器的平台和版本号

     cookieEnabled  返回是否启用cookie
     language  返回浏览器语言
     languages  返回代理语言
    
     platform  返回浏览器运行的操作平台
     product  浏览器内核

     userAgent  返回由客户机发送服务器的user-agent头部的值  用户代理

BOM的history对象

     window.history对象 包含浏览器的历史
    console.log(window.history);
    
     1.属性
     length  返回历史记录/列表中的网址数

     scrollRestoration  允许应用程序在历史导航上显式的设置默认滚动回复行为
         auto  恢复用户已滚动到的页面上的位置
         manual  未还原上页的位置
    window.history.scrollRestoration="manual";

     state:null  状态

    var aBnts=document.getElementsByTagName("button");

    2. 方法
     back()  加载history列表中的前一个URL  后退
     forword()  加载history列表中的下一个URL  前进
     go(number)  加载history列表中的某个具体页面  -1 1 2 3 4
    aBnts[1].onclick=function(){
        window.history.forward()
    }
    aBnts[2].onclick=function(){
        window.history.go(2)
    }

BOM的history对象state相关

     window.history对象 包含浏览器的历史
    console.log(window.history);
    
     1.属性
     length  返回历史记录/列表中的网址数

     scrollRestoration  允许应用程序在历史导航上显式的设置默认滚动回复行为
         auto  恢复用户已滚动到的页面上的位置
         manual  未还原上页的位置
    window.history.scrollRestoration="manual"

     state:null  状态

    var aBnts=document.getElementsByTagName("button");

    2. 方法
     back()  加载history列表中的前一个URL  后退
     forword()  加载history列表中的下一个URL  前进
     go(number)  加载history列表中的某个具体页面  -1 1 2 3 4

    aBnts[1].onclick=function(){
        window.history.forward()
    }

    aBnts[2].onclick=function(){
        window.history.go(2)
    }

     pushState(stateObj,title,URL)  向当前浏览器的history中添加一个状态
    aBnts[3].onclick=function(){
        window.history.pushState({page:1},"标题01","index.html")
    }
    
    replaceState(stateObj,title,URL)  修改浏览器当前history的实体状态   
    aBnts[4].onclick=function(){
        window.history.replaceState({page:2},"标题02","index.html")
    }

BOM的location对象

     window.location对象   用于获取当前页面的地址(URL)，并把浏览器重定向到新的页面
    console.log(window.location);
    
     href  获取或设置完整的URL  
    console.log(decodeURI(window.location.href));//http://127.0.0.1:5500/JavaScript/BOM/BOM中的对象/05BOM的location对象.html
    document.getElementsByTagName("button")[0].onclick=function(){
        window.location.href="index.html"
    }

     href: "http://127.0.0.1:5500/JavaScript/BOM/BOM中的对象/05BOM的location对象.html"
     http://127.0.0.1:5500/JavaScript/BOM/BOM中的对象/01BOM的screen对象.html
     http://127.0.0.1:5500/JavaScript/DOM/0505/03事件捕获.html
     protocol  返回URL的协议  http(超文本传输协议) https(加密) file(本地文件) ftp(文件传输协议)
     protocol: "http:"

     hostname  返回主机名  域名(网址)  ip地址  
     hostname: "127.0.0.1"

     port  返回一个URL服务器使用的端口号
     port: "5500"

     host  返回主机名加端口号
     host: "127.0.0.1:5500"
    
     源  返回一个URL的协议,主机名,端口号   
     origin: "http://127.0.0.1:5500"

     同源策略

     pathname  返回URL的路径名    资源在当前服务器上的地址
     pathname: "/JavaScript/BOM/BOM中的对象/05BOM的location对象.html"

     hash  返回URL的锚的部分  #后面的部分（包含#）
     hash: ""

     search  返回URL的查询部分  ?后面的部分(包含?)
     search: ""

location对象的应用

   --页面的跳转
   <body>
    <a name="html"></a>
    <h1>html</h1>
    <div class="space"></div>
    <a name="css"></a>
    <h1>css</h1>
    <div class="space"></div>
    <a name="javascript"></a>
    <h1>javascript</h1>
    <div class="space"></div>
    <div id="box">
        <a href="#html">html</a><br>
        <a href="#css">css</a><br>
        <a href="#javascript">javascript</a>
    </div>
</body>

<body>
    <h1>首页</h1>
    <a href="./article.html#html">html</a><br>
    <a href="./article.html#css">css</a><br>
    <a href="./article.html#javascript">javascript</a><br>
</body>


--商品案例

商品列表
<body>
    <h1>列表</h1>
    <dl>
        <dt><img src="./img/0.webp"></dt>
        <dd><a href="./detail.html?id=0">商品00</a></dd>
        <dd style="color: red;">￥100.00</dd>
    </dl>
    <dl>
        <dt><img src="./img/1.webp"></dt>
        <dd><a href="./detail.html?id=1">商品01</a></dd>
        <dd style="color: red;">￥200.00</dd>
    </dl>
    <dl>
        <dt><img src="./img/2.webp"></dt>
        <dd><a href="./detail.html?id=2">商品02</a></dd>
        <dd style="color: red;">￥300.00</dd>
    </dl>
    <dl>
        <dt><img src="./img/3.webp"></dt>
        <dd><a href="./detail.html?id=3">商品03</a></dd>
        <dd style="color: red;">￥400.00</dd>
    </dl>
    <dl>
        <dt><img src="./img/4.webp"></dt>
        <dd><a href="./detail.html?id=4">商品04</a></dd>
        <dd style="color: red;">￥500.00</dd>
    </dl>
</body>

商品详情
<body>
    <h1>商品详情</h1>
    <img src="" width="600" height="480">
    <h3 id="title"></h3>
</body>
<script>
    var data = [{
        id: 0,
        imgSrc: "./img/0.webp",
        title: "商品00",
        price: "￥100"
    }, {
        id: 1,
        imgSrc: "./img/1.webp",
        title: "商品01",
        price: "￥200"
    }, {
        id: 2,
        imgSrc: "./img/3.webp",
        title: "商品02",
        price: "￥300"
    }, {
        id: 3,
        imgSrc: "./img/4.webp",
        title: "商品03",
        price: "￥400"
    }, {
        id: 4,
        imgSrc: "./img/5.webp",
        title: "商品04",
        price: "￥500"
    }]


    var id = window.location.search.substring(window.location.search.indexOf("=") + 1);
    // console.log(id);


    var oImg = document.getElementsByTagName("img")[0];
    var oTitle = document.getElementById("title");
    oImg.src = data[id].imgSrc;
    oTitle.innerText = data[id].title
</script>

P_Gang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习第二十天

BOM的窗口事件 var aBtns = document.getElementsByTagName("button"); aBtns[0].onclick=function(){ window.open("newWin.html","_blank","scrollBars=yes") } onload 当文档加载时运行脚本入口函数 window.onload=function(){ // 网页/文档加载完成包含
复制链接

扫一扫