JavaScript --- 高级运用 --- BOM

最新推荐文章于 2024-06-13 10:05:02 发布

Jesslili

最新推荐文章于 2024-06-13 10:05:02 发布

阅读量140

点赞数

分类专栏： Java web 文章标签： javascript

本文链接：https://blog.csdn.net/myjess/article/details/105480878

版权

Java web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

JavaScript分为
1. ECMAScript
2. BOM
3. DOM

一. DOM简单学习：为了满足案例要求

功能：控制 html 文档的内容
获取页面标签(元素)对象：Element
- document.getElementById("id值"):通过元素的 id 获取元素对象
操作Element对象

修改属性值：
1. 明确获取的对象是哪一个
2. 查看API文档，找其中有哪些属性可以设置
修改标签体内容：属性：innerHTML
1. 获取元素对象
2. 使用 innerHTML 属性修改标签体内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
    <img id="light" src="img/off.gif">
    <h1 id="title">aaa</h1>

<script>
    //通过id获取元素对象
    var light = document.getElementById("light");
    alert("更换图片");
    light.src = "img/on.gif";

   //1.获取h1标签对象
    var title = document.getElementById("title");
    alert("更换内容");
    //2.修改内容
    title.innerHTML = "bbb";

</script>
</body>
</html>

二. 事件简单学习

功能：某些组件被执行了某些操作后，触发某些代码的执行。
造句： xxx被xxx,我就xxx
- 我方水晶被摧毁后，我就责备对友。
- 敌方水晶被摧毁后，我就夸奖自己。

如何绑定事件

直接在 html 标签上，指定事件的属性(操作)，属性值就是 js 代码
1. 事件：onclick— 单击事件
通过 js 获取元素对象，指定事件属性，设置一个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>

// 此种方法代码耦合度较高，不利于维护
<img id="light" src="img/off.gif"  onclick="fun();">

<img id="light2" src="img/off.gif">

<script>
    function fun(){
        alert('我被点了');
    }

    function fun2(){
        alert('又被点了');
    }

	//耦合度较低，易于维护
    //1.获取light2对象
    var light2 = document.getElementById("light2");
    //2.绑定事件
    light2.onclick = fun2;

</script>
</body>
</html>

案例：电灯开关
分析：
1.获取图片对象
2.绑定单击事件
3.每次点击切换图片

规则：
- 如果灯是开的 on,切换图片为 off
- 如果灯是关的 off,切换图片为 on
- 使用标记flag来完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
</head>
<body>

<img id="light" src="img/off.gif">

<script>
 
    //1.获取图片对象
    var light = document.getElementById("light");

    var flag = false;//代表灯是灭的。 off图片

    //2.绑定单击事件
    light.onclick = function(){
        if(flag){         //判断如果灯是开的，则灭掉
            light.src = "img/off.gif";
            flag = false;
        }else{
            //如果灯是灭的，则打开
            light.src = "img/on.gif";
            flag = true;
        }
    }   
</script>
</body>
</html>

三. BOM

概念：Browser Object Model 浏览器对象模型

将浏览器的各个组成部分封装成对象。

组成：
- Window：窗口对象
- Navigator：浏览器对象
- Screen：显示器屏幕对象
- History：历史记录对象
- Location：地址栏对象

3. Window：窗口对象

创建
方法
1. 与弹出框有关的方法：
  alert() 显示带有一段消息和一个确认按钮的警告框。
  confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。

 comfirm("您确定要退出吗？");

在这里插入图片描述

如果用户点击确定按钮，则方法返回 true
如果用户点击取消按钮，则方法返回 false

var flag = confirm("你确定要退出吗？");
if(flag){
	alert("欢迎下次光临！");
}else{
	alert("返回当前页面。");
}

prompt() 显示可提示用户输入的对话框。
返回值：获取用户输入的值

prompt("请输入用户名");

在这里插入图片描述
2. 与打开关闭有关的方法
close() 关闭浏览器窗口。谁调用我，我关闭谁
open() 打开一个新的浏览器窗，返回新的 Window 对象

<body>
	<input id="openbtn" type="button" values="打开窗口">
	<input id="closebtn" type="button" values="关闭窗口">
	
	<script>
	//打开新窗口
	var newwindows;
	var openbtn = document.getElementByld("openbtn");
	openbtn.onclick = function(){
		newwindows = open("http://www.baidu.com");
	}
	
	//关闭窗口
	var closebtn = document.getElementByld("closebtn");
	closebtn.onclick = function(){
		newwindows.close();
	}
	</script>
</body>

在这里插入图片描述

3. 与定时器有关的方式
setTimeout()在指定的毫秒数后调用函数或计算表达式。

参数：
1. js 代码或者方法对象
2. 毫秒值
返回值：唯一标识，用于取消定时器

clearTimeout() 取消由 setTimeout()方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()取消由 setInterval()设置的 timeout.

<script>
//一次性定时器
//等待3s，弹出boom~~
setTimeout("fun();",3000);
var id = setTimeout(fun,3000);
clearTimeout(id);

function fun(){
	alert("boom~~");
}

//循环定时器
var id = setInterval(fun,3000)；
clearInterval(id);
</script>

属性
1. 获取其他BOM对象：
history
location
Navigator
Screen
2. 获取DOM对象: document

var hi = window.history;
var hi2 = history;

window.document.getElementById("");
document.getElementById("");

特点

Window对象不需要创建可以直接使用 window使用。 window.方法名();
window 引用可以省略。 方法名();

4. Location：地址栏对象

创建(获取)：
1. window.location
2. location
方法：

reload() 重新加载当前文档。刷新

属性

href 设置或返回完整的 URL。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location对象</title>

</head>
<body>
    <input type="button" id="btn" value="刷新">

    <input type="button" id="go" value="学校">
    <script>
        //reload方法，定义一个按钮，点击按钮，刷新当前页面
        //1.获取按钮
        var btn = document.getElementById("btn");
        //2.绑定单击事件
        btn.onclick = function(){
            //3.刷新页面
            location.reload();
        }

        //获取href
        var href = location.href ;
        //1.获取按钮
        var go = document.getElementById("go");
        //2.绑定单击事件
        go.onclick = function(){
            //3.访问百度
            location.href = "https://www.baidu.com";
        }

    </script>
</body>
</html>

案例：自动跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color:red;
        }
    </style>
    
</head>
<body>
    <p>
        <span id="time">5</span>秒之后，自动跳转到首页...
    </p>

    <script>
     
       // 倒计时读秒效果实现
        var second = 5;
        var time = document.getElementById("time");

        //定义一个方法，获取span标签，修改span标签体内容，时间--
        function showTime(){
            second -- ;
            //判断时间如果 <= 0 ，则跳转到首页
            if(second <= 0){
                //跳转到首页
                location.href = "https://www.baidu.com";
            }

            time.innerHTML = second +"";
        }

        //设置定时器，每隔1秒执行一次该方法
        setInterval(showTime,1000);

    </script>
</body>
</html>

5. History：历史记录对象

创建(获取)：
1.window.history
2. history
方法：

back() 加载 history 列表中的前一个 URL。
forward()加载 history 列表中的下一个 URL。
go(参数) 加载 history 列表中的某个具体页面。
- 参数：
  - 正数：前进几个历史记录
  - 负数：后退几个历史记录

属性：

length 返回当前窗口历史列表中的 URL 数量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>History对象</title>
</head>
<body>

    <input type="button" id="btn" value="获取历史记录个数">
    <a href="History对象.html">09页面</a>
    <input type="button" id="forward" value="前进">
<script>
   
    //1.获取按钮
    var btn = document.getElementById("btn");
    //2.绑定单机事件
    btn.onclick = function(){
        //3.获取当前窗口历史记录个数
        var length = history.length;
        alert(length);
    }

    //1.获取按钮
    var forward = document.getElementById("forward");
    //2.绑定单机事件
    forward.onclick = function(){
       //前进
       // history.forward();
        history.go(1);
    }

</script>
</body>
</html>

Jesslili

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript --- 高级运用 --- BOM

JavaScript分为1. ECMAScript2. BOM3. DOM一. DOM简单学习：为了满足案例要求功能：控制 html 文档的内容获取页面标签(元素)对象：Elementdocument.getElementById("id值"):通过元素的 id 获取元素对象操作Element对象修改属性值：1. 明确获取的对象是哪一个2. 查看API文...
复制链接

扫一扫