2. 科技
    3. BOM

    BOM

    科技2022-07-15  132

    17-BOM-BOM的介绍

    BOM(Browser Object Model)：浏览器对象模型。将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。

    18-BOM-Window窗口对象

    定时器 唯一标识 setTimeout(功能，毫秒值)：设置一次性定时器。clearTimeout(标识)：取消一次性定时器。唯一标识 setInterval(功能，毫秒值)：设置循环定时器。clearInterval(标识)：取消循环定时器。 加载事件 window.onload：在页面加载完毕后触发此事件的功能。 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>window窗口对象</title> <script> //一、定时器 function fun(){ alert("该起床了！"); } //设置一次性定时器 //let d1 = setTimeout("fun()",3000); //取消一次性定时器 //clearTimeout(d1); //设置循环定时器 //let d2 = setInterval("fun()",3000); //取消循环定时器 //clearInterval(d2); //加载事件 window.onload = function(){ let div = document.getElementById("div"); alert(div); } </script> </head> <body> <div id="div">dddd</div> </body> <!-- <script> //一、定时器 function fun(){ alert("该起床了！"); } //设置一次性定时器 //let d1 = setTimeout("fun()",3000); //取消一次性定时器 //clearTimeout(d1); //设置循环定时器 //let d2 = setInterval("fun()",3000); //取消循环定时器 //clearInterval(d2); //加载事件 let div = document.getElementById("div"); alert(div); </script> --> </html>

    19-BOM-Location地址栏对象

    href 属性

    就是浏览器的地址栏。我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。

    代码实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>location地址栏对象</title> <style> p{ text-align: center; } span{ color: red; } </style> </head> <body> <p> 注册成功！<span id="time">5</span>秒之后自动跳转到首页... </p> </body> <script> //1.定义方法。改变秒数，跳转页面 let num = 5; function showTime() { num--; if(num <= 0) { //跳转首页 location.href = "index.html"; } let span = document.getElementById("time"); span.innerHTML = num; } //2.设置循环定时器，每1秒钟执行showTime方法 setInterval("showTime()",1000); </script> </html>

    20-BOM-动态广告案例

    案例分析和实现 <!-- 广告图片 --> <img src="img/ad_big.jpg" id="ad_big" width="100%"/> 在 css 样式中，display 属性可以控制元素是否显示 style="display: none;" 设置定时器，3 秒后显示广告图片 //1.设置定时器，3秒后显示广告图片 setTimeout(function(){ let img = document.getElementById("ad_big"); img.style.display = "block"; },3000); 设置定时器，3 秒后隐藏广告图片 //2.设置定时器，3秒后隐藏广告图片 setTimeout(function(){ let img = document.getElementById("ad_big"); img.style.display = "none"; },6000);

    21-BOM-BOM的小结

    **BOM(Browser Object Model)：**浏览器对象模型。将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。 Window：窗口对象Location：地址栏对象Navigator：浏览器对象History：当前窗口历史记录对象Screen：显示器屏幕对象 Window 窗口对象 setTimeout()、clearTimeout()：一次性定时器setInterval()、clearInterval()：循环定时器onload 事件：页面加载完毕触发执行功能 Location 地址栏对象 href 属性：跳转到指定的 URL 地址

    22-封装-封装的思想

    封装思想

    **封装：**将复杂的操作进行封装隐藏，对外提供更加简单的操作。

    获取元素的方法

    document.getElementById(id值)：根据 id 值获取元素document.getElementsByName(name值)：根据 name 属性值获取元素们document.getElementsByTagName(标签名)：根据标签名获取元素们

    代码实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>封装</title> </head> <body> <div id="div1">div1</div> <div name="div2">div2</div> </body> <script src="my.js"></script> <script> let div1 = getById("div1"); alert(div1); // let div1 = document.getElementById("div1"); // alert(div1); // let divs = document.getElementsByName("div2"); // alert(divs.length); // let divs2 = document.getElementsByTagName("div"); // alert(divs2.length); </script> </html>

    js封装

    function getById(id){ return document.getElementById(id); } function getByName(name) { return document.getElementsByName(name); } function getByTag(tag) { return document.getElementsByTagName(tag); }

    我们之前的操作都是基于原生 JavaScript 的，比较繁琐。 JQuery 是一个前端框架技术，针对 JavaScript 进行了一系列的封装，使得操作变得非常简单！ 期待吧……

    Processed: 0.015, SQL: 8