JS核心——BOM

最新推荐文章于 2024-08-11 18:40:36 发布
最新推荐文章于 2024-08-11 18:40:36 发布
阅读量237 收藏 2
点赞数 2
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/secret010/article/details/140353024
版权

Window

window对象的理解： 全局变量均自动成为window对象的属性 全局函数均自动成为window对象的函数

Location

   <body>
        
        <button onclick="fun01()">跳转页面</button>
        <button onclick="fun02()">刷新页面</button>
        
        <script type="text/javascript">
​
            function fun01(){
                //window.location.href = "http://www.baidu.com";
                //location.href = "http://www.baidu.com";
                location = "http://www.baidu.com";
            }
            
            function fun02(){
                window.location.reload();
            }
        </script>
        
    </body>

History

    <body>
        
        <button onclick="fun01()">上两页</button>
        <button onclick="fun02()">上一页</button>
        <button onclick="fun03()">刷新</button>
        <button onclick="fun04()">下一页</button>
        <button onclick="fun05()">下两页</button>
        
        <script type="text/javascript">
            
            function fun01(){
                window.history.go(-2);
            }
            
            function fun02(){
//              window.history.go(-1);
                window.history.back();
            }
            
            function fun03(){
                window.history.go(0);
            }
            
            function fun04(){
//              window.history.go(1);
                window.history.forward();
            }
            
            function fun05(){
                window.history.go(2);
            }
            
        </script>
        
    </body>

open

    <body>
        
        <h1>一定不要点这里</h1>
        
        <script type="text/javascript">
            window.open("http://www.baidu.com","baidu");
        </script>
        
    </body>

各种弹框

    <body>
        
        <button onclick="fun01()">警告框</button>
        <button onclick="fun02()">确认框</button>
        <button onclick="fun03()">提示框</button>
        
        <script type="text/javascript">
            
            function fun01(){
                alert("警告框");
            }
            
            function fun02(){
                //点击确认 -- 返回true
                //点击取消 -- 返回false
                var bool = confirm("确认框");
                console.log(bool);
            }
            
            function fun03(){
                //点击确认 -- 返回输入的数据
                //点击取消 -- 返回null
                var v = prompt("提示框","默认值");
                console.log(v);
            }
        </script>
    </body>

定时器

<body>
        
        <button onclick="fun()">取消定时器</button>
        <br />
        <img src="../img/王也02.jpg" width="100px" height="100px"/>
        
        <script type="text/javascript">
            
            var img = document.getElementsByTagName("img")[0];
            
            //5000毫秒后触发定时器内的函数
            var timeout = setTimeout(function(){
                img.setAttribute("src","../img/王也03.jpeg");
                img.setAttribute("width","200px");
                img.setAttribute("height","200px");
            },5000);
            
            
            
            function fun(){
                clearTimeout(timeout);
            }
            
        </script>
        
    </body>

Cookie

/* * 知识点： * 理解：以键值对的形式存储在当前浏览器下的纯文本数据 * * 注意： * 1.不同的浏览器不能共享Cookie里的数据 * 2.同一个浏览器下，不同域名不能共享Cookie里的数据 * 3.同一个浏览器下，同一个域名可以共享该域名下的Cookie里的数据 * * 缺点： * 1.浏览器可以禁用该域名下的Cookie * 2.Cookie其实是该浏览器下的一个文件，可能会被误删 * 3.以键值对形式存储的纯文本数据，可能存在解密的风险 */

    <body>
        
        <button onclick="fun01()">添加Cookie</button>
        <button onclick="fun02()">删除Cookie</button>
        <button onclick="fun03()">修改Cookie</button>
        <button onclick="fun04()">查询Cookie</button>
        
        <script type="text/javascript">
​
            
            function fun01(){
                var date = new Date();
                date.setTime(date.getTime() + 1000*60*60*24*10);
                document.cookie = "username=hhy;expires=" + date.toGMTString();
                document.cookie = "password=123123;expires=" + date.toGMTString();
            }
            
            function fun02(){
                var date = new Date();
                date.setTime(date.getTime());
                document.cookie = "username=hhy;expires=" + date.toGMTString();
                document.cookie = "password=123123;expires=" + date.toGMTString();
            }
            
            function fun03(){
                var date = new Date();
                date.setTime(date.getTime() + 1000*60*60*24*10);
                document.cookie = "username=xiaohong;expires=" + date.toGMTString();
                document.cookie = "password=123456;expires=" + date.toGMTString();
            }
            
            function fun04(){
                alert(document.cookie);
            }
            
        </script>
        
    </body>

JS对象

       <script type="text/javascript">
            //创建学生对象
            var stu = {
                "name":"薛之谦",
                "age":40,
                "sing":function(){
                    console.log(this.name + "一展歌喉");
                },
                "sleep":function(){
                    console.log(this.name + "长睡不起");
                }
            }
            
            //调用函数
            stu.sing();
            stu.sleep();
            
            //遍历对象
            //注意：可以使用for-in遍历对象里所有的属性和函数
            for(var v in stu){
                console.log(v);
            }
            
        </script>

0号程序员
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript基础教程——入门必看篇
10-22
JavaScript的核心语法包括： 1. **变量声明和赋值**：使用`var`关键字声明变量，如`var num = 1;`。虽然可以直接使用变量而不声明，但这样做不推荐。 2. **数据类型**：JavaScript有六种原始数据类型（Undefined、...
3.js.BOM.rar
08-24
《3.js.BOM——前端开发的核心知识解析》 在前端开发的世界里，JavaScript（简称JS）扮演着至关重要的角色，而BOM（Browser Object Model，浏览器对象模型）则是JS与浏览器交互的重要接口。本文件“3.js.BOM.rar”...
JS——Bom 和 Dom详解
一将终成
12-12 492
BOM:浏览器对象模型----- Browser Object Model 主要提供访问和操作浏览器各组件的方式 浏览器各组件：window（浏览器窗口）、location（地址栏）、history（浏览历史） screen（显示器屏幕）、navigator（浏览器软件）、document（网页） DOM:文档对象模型—Document Object Model 主要提供访问和操作htm...
javascript知识分享——BOM对象
DS153的博客
12-06 1027
前言 在学习完前面的DOM对象之后，我们知道，webAPI里面还有一个BOM对象没有学习。所以现在，就让我们来学习和了解BOM对象是什么，BOM对象有什么样的用法，我们通过BOM对象，可以去实现什么样的网页效果。 一、BOM对象 BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM 缺乏标准，JavaS...
JavaScript基础——BOM和DOM
T030606的博客
04-22 1446
BOM的核心对象是window对象，它代表了浏览器窗口，并提供了许多属性和方法来操作窗口、导航、处理事件等。可以通过innerTEXT属性来设置元素内部的内容，该属性会将后面字符串中的内容原样修改到元素中去。通过DOM的对象和方法可以完成对网页中元素的增删改，让网页产生动态效果。由于元素的 ID 在指定时必须是独一无二的，因此这是快速访问特定元素的有效方法。方法，它将返回的是以当前元素为根节点，所有指定类名的子元素。的方法时才能起作用，而在 DOM 中的其他元素上无法生效。对象是文档本身的根。
JavaScript 核心之一 —— BOM
lalalala~
10-23 199
window 对象 BOM 的核心对象是 window，它表示浏览器的一个实例。 由于 window 对象同时扮演着 ECMAScript 中 Global 对象的角色，因此所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。 如果页面中包含框架，则每个框架都拥有自己的 window 对象，并且保存在 frames 集合中。在 frames 集合中，可以通过数值索引(从 0...
JS基础——BOM
Small_sesame的博客
09-06 379
JS = ES + BOM + DOM，其中ES是JS的核心。 所谓的BOM即 浏览器对象模型（Browser Object Model）。BOM赋予了JS操作浏览器的能力，即window操作。 DOM则用于创建删除节点，操作HTML文档。 BOM尚无正式的标准，导致个浏览器对于BOM方法的支持各有不同，因此需要具体问题具体对待。 ...
JavaScript基础学习——BOM操作
qq_41890177的博客
03-14 316
一、认识BOM JS是由ECMAScript（ECMA）、DOM（W3C）和BOM（无规范）。BOM(Browser Object Model：浏览器对象模型)，提供了独立于内容而与浏览器进行交互的对象，用它来实现窗口与窗口之间的通信。BOM的核心对象是window。 1、BOM组成 window- frames history location navigator screen 2、BOM与DOM的区别 （1）DOM通过脚本动态地访问和更新文档内容、结构和样式的接口。 （2）BOM通过脚本操作.
JavaScript基础——BOM基础
爱前端的程序媛的博客
03-13 337
目录 写在前面的反思 BOM笔记 案例说明 常用事件 定时器 this指向问题 JS执行机制 写在前面的反思 用了大概一个星期的时间吧，把DOM的基础知识点和对应的一些案例过了一遍。其实我也没有严格要求自己在多长多长时间内去学完多少多少知识或者看完哪部分知识。我都是看视频、记笔记，然后再整理整理笔记，练习练习视频里面的案例，敲敲代码，整理思路。就是在敲代码的过程中要试着去复...
JavaScrip——BOM和DOM
测试
03-14 135
JavaScrip
JavaScript15——BOM
小白的学习路
11-15 127
1.2. BOM 1.2.1. 什么是BOM BOM(Browser Object Model)即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互 的对象，其核心对象是 window。 BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。 BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是 Netscape 浏览器标准的一部分。 1.2.3. 顶级对象window 1.2.4. window对象的常
Javascript高级编程学习笔记27——BOM1window对象1.docx
07-05
在浏览器环境中，JavaScript的核心语法是ECMAScript，但BOM提供了与浏览器功能交互的一系列对象。尽管各个浏览器厂商可能有不同的实现，但其中一部分已经标准化，并被纳入HTML5规范。 BOM的核心是`window`对象，它...
JavaScript_——DOM总结.txt
12-13
#### 五、BOM 的核心对象 —— window `window` 对象是 BOM 中最重要的对象，它是所有其他 BOM 对象的父对象。`window` 对象表示当前浏览器窗口，并且提供了许多有用的属性和方法。 - **基本属性**： - `window....
Arco Design for Vue 3 - 快速上手指南与实战技巧
最新发布
qq_42072014的博客
08-11 283
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
.eslintrc.js 有什么作用
weixin_64684095的博客
08-08 272
可以启用、禁用或修改特定的 ESLint 规则，以适应项目的特定需求和编码风格。
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 344
注释很详细，直接上代码……
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 288
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
深入理解JavaScript：DOM、BOM与核心语法详解
本篇JS笔记详细介绍了JavaScript的基础概念、组成部分以及核心语法。首先，JavaScript主要由ECMAScript(ES)定义的语法和两个浏览器相关的模型——Document Object Model (DOM)和Browser Object Model (BOM)构成。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值