JavaScript（二）

最新推荐文章于 2024-06-10 22:18:41 发布
最新推荐文章于 2024-06-10 22:18:41 发布
阅读量152 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Joyechen1/article/details/127971783
版权

JavaScript

一、BOM浏览器对象模型

1.1 BOM介绍

  • Browser Object Model浏览器对象型
  • JS编写在网页文档(document)中，网页文档运行在浏览器窗口(window)中，像document、window这样的对象也成为JS的宿主对象

在这里插入图片描述

1.2 window对象

  • window对象是BOM模型中的顶层容器，表示打开的浏览器窗口
  • window对象调用属性、函数都可以省略

在这里插入图片描述

1.2.1 获取window对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <button onclick="testWindow()">测试window</button>
    <script type="text/javascript">
        function testWindow(){
            console.log(window);
        }
    </script>
</body>
</html>

在这里插入图片描述

1.2.2 window对象属性

1. BOM对象属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <button onclick="testWindow()">测试window</button>
    <script type="text/javascript">
        function testWindow(){
            console.log(window);

            //获取BOM对象属性
            var v = window.navigator;
            var s = window.screen;
            var l = window.location;
            var h = window.history;
            var d = window.document;

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

2. 浏览器窗口属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <button onclick="testWindow()">测试window</button>
    <script type="text/javascript">
        function testWindow(){
            console.log(window);
            
            //获取当前刘览器窗口的名字
            window.name = "w1";
            var name = window.name;
            console.log(name); 

            //获取/设置当前刘览器窗口的状态栏
            window.status="☆";

            //获取当前窗口是否关闭
            var s = window.closed;

            //innerwidth:获取刘览器的内部宽度
            //innerHeight:
            获取刘览器的内部高度
            var w = window.innerWidth;
            var h = window.innerHeight;

            //outerWidth:获取浏览器的外部宽度
            //innerHeight:获取刘览器的外部高度
            var ow = window.outeriidth;
            var oh = window.outerHeight;
        }
    </script>
</body>
</html>

3. 窗口对象属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <button onclick="testWindow()">测试window</button>
    <script type="text/javascript">
        function testWindow(){
            //seLf就是当前窗口本身，等价五windows对像
            var w = window.self;
            
            //parent:加果当前网页是现在另一个网页的frame中，parent.属性就表示获取当前窗口的上一级窗口
            var p = window.parent;
            
            //top,获取当前窗口的顶层窗口
            var t = window.top;
        }
    </script>
</body>
</html>

在这里插入图片描述

1.2.3 window对象函数

1. 弹窗函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <button onclick="testWindow()">测试window</button>
    <script type="text/javascript">
        function testWindow(){
           
            //弹窗函数
            //alert: 警告提示框，当用户在网页中进行错误燥作时用于提示
            window.alert("清注意，倒车！");

            //confirm:·消息确认框，当用户进行不可逆、且影响数据的操作，进行用户确认
            //此弹窗有返回值，当用户点击“确定时，返回tru
            var v = window.confirm("请问你确定册除这个信息吗？");

            //promt:用户交互输入框，参数1（弹框问题提示信息），参数2（输入框默认值)          
            //此弹窗有返回值，加果点击确定返回值为输入框中的值，点击取消返回值为null
            var v = window.prompt("请输入你的出生年份：","2021");
           
        }
    </script>
</body>
</html>

2. 打开/关闭窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <button onclick="testWindow()">测试window</button>
    <script type="text/javascript">
        function testWindow(){
            //close:关闭当前窗口对象 (IE有确认提示，谷歌就直接关了)
            window.close();

            //open(URL,name,features,.repLace):f打开一个新窗口
            //参数1：新打开的窗口显示的网址
            //参数2：新打开窗口的名字
            //参数3：新打开的窗口的属性
            //参数4：是否替换当前窗口
            //返回值：打开的窗口对象
            var URL = "https://www.baidu.com";
            window.open(URL);
            window.open(URL,"百度");
            window.open(URL,name,features);
            window.open(URL,name,features,replace);
        }
    </script>
</body>
</html>

3. 窗口操作函数

在这里插入图片描述

4. 延时/循环任务
在这里插入图片描述
在这里插入图片描述

1.3 screen对象

  • screen对象，表示网页显示的硬件设备的屏幕。
  • screen是一个只读对象，它收集硬件屏幕的相关参数，我们可以通过此对像获取当前终端屏幕的相关参数。

在这里插入图片描述

1.4 navigator对象

navigator 对象包含了浏览器相关的信息

在这里插入图片描述

1.5 location对象

表示当前浏览器窗口的地址信息，通过此对象可以获取地址栏信息、设置地址栏信息
在这里插入图片描述

1.6 history对象

history对象包含了用户在当前浏览器窗口中访问过的URL

在这里插入图片描述
在这里插入图片描述

二、DOM 文档对象模型

2.1 文档对象模型介绍

DOM树一一对于一个网页文件，我们可以类比做一颗树，根标签HTML看做树根，文档中所有的标签都可以理解为这棵树上的树枝或叶子。
通过DOM树结构，我们可以从根标签有序的获取、操作文档中任何一个子标签。

2.1.1 DOM树

在这里插入图片描述

2.1.2 相关术语

  • 元素：标签以及标签所包含的内容
  • 元素属性：标签的属性
  • 节点：元素、属性、文本统称为节点（元素一标签节点、属性一属性节点、文本一文本节点)
  • 节点名称：标签节点的节点名就是标签名，属性节点的节点名就是属性名，文本节点的节点名是text

2.2 document对象

document对象指代的就是一个网页文档，document对象提供属性、函数大多都是获取网页文档中的元素

2.2.1 属性

在这里插入图片描述

2.2.2 方法

1. 流操作
在这里插入图片描述
2. 获取网页元素的函数
在这里插入图片描述

2.3 对HTML标签的操作

2.3.1 属性/样式操作

在这里插入图片描述
在这里插入图片描述

2.3.2 案例：表单数据校验

在这里插入图片描述

2.4 节点操作

//1.获取标签属性
var arr1 = tag.attributes;
//2.获取标签的子标签
var arr2 = tag.childNodes;

在这里插入图片描述

在这里插入图片描述

2.4.1 创建节点

网页中原来没有这个节点，通过JS代码新建一个节点

在这里插入图片描述

2.4.2 插入节点

1.标签节点的属性操作
在这里插入图片描述

2.拼接子节点、插入子节点
在这里插入图片描述

2.4.3 替换节点

  • 如果使用新创建的节点去替换某个父节点的子节点则直接替换;
  • 如果使用网页中已经存在的标签A去替换标签B，A会发生移动（并不是拷贝A去替换B)

在这里插入图片描述

2.4.4 删除节点

在这里插入图片描述

三、 JavaScript事件

3.1 JS事件绑定

JS函数是通过网页事件驱动的，驱动的方式有两种：内联方式和外联方式

3.1.1 HTML内联绑定和JS脚本外联绑定

在这里插入图片描述

3.1 HTML常用事件

  • 鼠标事件
  • 键盘事件（表单标签）
  • window事件
  • 表单事件

3.1.1 鼠标事件

用户的鼠标在HTML标签上产生点击、双击、移动、放上、离开等动作

  • onclick 单击
  • ondblclick 双击
  • onmouseover 鼠标移动到HTML元素上
  • onmouseout 鼠标从HTML元素上移走
  • onmousemove 鼠标在HTML元素上移动
  • onmousedown 鼠标在HTML元素上左键按下
  • onmouseup 鼠标在HTML元素上左键松开

在这里插入图片描述

3.1.2 键盘事件

键盘事件主要是针对于表单中的输入标签

  • onkeydown 键盘按键按下（如果按下去不松开则一直触发）
  • onkeyup键盘按键抬起
  • onkeypress键盘按键按下（只支持字符键）

3.1.3 window事件

window对象触发的时间，window对象并不是一个HTML标签，window对象的事件通常使用JS脚本绑定

在这里插入图片描述

3.1.4 表单事件

  • onfocus 获取焦点
  • onblur失去焦点
  • onchange内容发生改变
  • onselect内容被选中
  • onsubmit表单提交（必须绑定在form元素上）
  • onreset重置表单（必须绑定在form元素上）

3.2 Event事件对象

获取event对象、event对象属性
在这里插入图片描述

3.3 阻止事件冒泡

在这里插入图片描述

四、综合案例-锅打灰太狼

4.1 介绍

在这里插入图片描述
案例视频地址https://www.bilibili.com/video/BV11U4y1u7L3?p=92&spm_id_from=pageDriver&vd_source=542714f3fa7ce361185bf823979b82ad

一兴一熠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript二维数组转置实例
10-24
主要介绍了javascript二维数组转置方法,实例分析了数组行列交换的转置技巧,具有一定参考借鉴价值,需要的朋友可以参考下
Javascript 二维数组
10-29
Javascript二维数组的实现代码，需要的朋友可以参考下。
JavaScript二级联动
jjjndk1314的博客
03-25 2万+
代码演示： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt
JavaScript-二维数组
Will_Season的博客
10-23 8910
javascript二维数组
JavaScript之二维数组
HNUYSY的博客
06-27 1万+
JavaScript本身只支持一维数组，不支持直接定义二维数组，但是我们可以间接地实现二维数组 将一维数组的每个元素又定义为一个数组，即为数组中的元素也是数组，就是二维数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
【JavaScript】关于二维数组去重
Erdon_Jia_N的博客
04-07 3542
对于一维数组的去重，最简单的方式就是 let a = [1, 2, 2, 3]; a = [...new Set(a)]; console.log(a); // [1, 2, 3] 但是今天刷题，遇到二维的数组需要去重，本想套用这个方法，结果不行了。 let aa = [[1, 2], [2, 3], [1, 2]] aa = [...new Set(aa)]; console.log(aa); // [[1, 2] // [2, 3] // [1, 2]] 原因是 [1, 2] !== [1, 2
JavaScript基础大总结
热门推荐
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
javascript读写二进制
大猪的博客
01-04 8158
javascript里有两个内置对象，一个是ArrayBuffer；一个是DataView。 读写二进制数据都需要使用这两个对象。 ArrayBuffer：         ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 不能直接操作，而是要通过类型数组对象或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些
JavaScript实现二级联动下拉菜单
MistyWood的博客
09-19 9731
最近学习前端js，做了一个二级联动下拉菜单。二级下拉菜单的内容随着一级下拉菜单选项的更改而更改。菜单的内容是手动存在js的数组里的，随便写了几个数据。 效果图： 实现源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> ...
JavaScript中的二维数组
KysonLai的博客
05-31 1万+
二维数组其实就是数组中的数组创建：①var a = [ [ 1,2 ], [ 3,4 ] ];②var a = new Array( new Array(1,2), new Array(3,4) );③var a = new Array(); //先声明一维数组 for(var i=0;i&lt;5;i++) { a[i] = new Array(i); //再声明二维数组 ...
javaScript简介
weixin_69252724的博客
04-16 3903
它是一种直译式的语言, 用来为网页添加各种各样的动态功能不需要编译直接通过浏览器直接运行, 通常javaScript脚本是通过嵌入HTML里来实现功能的。
TypeScript与JavaScript
qq_57756904的博客
04-26 5407
有些语言根本不允许那些有缺陷的程序运行。在不运行代码的情况下检测代码中的错误称为静态检查。根据正在操作的值的种类来确定什么是错误，什么不是错误，这被称为静态类型检查。
javascript 二进制运算技巧解析
10-27
javascript 中的二进制运算的一些技巧，晒出来和你们分享一下，希望可以帮助你们
JavaScript二分搜索1
08-08
JavaScript二分搜索二分搜索概述二分搜索（Binary search），也叫折半搜索(half-interval search)，是一种在有序数组中把数
javascript 二维数组的实现与应用
10-29
javascript没有二维数组.所有自定义了一个数组类，下面是实例代码，需要的朋友可以参考下。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 359
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 521
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
最新发布
乐闻世界
06-10 1333
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
vue3如何定义一个组件
Java程序员专栏
06-09 552
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
workbench javascript二次开发
06-30
通过workbench进行JavaScript二次开发，开发人员可以创建自定义按钮、自定义页面和验证规则等，以增强和定制Salesforce应用程序的功能。他们可以使用JavaScript来处理用户的输入和操作，并对数据进行验证和处理。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值