JavaScript（二）

最新推荐文章于 2024-06-12 11:59:04 发布
最新推荐文章于 2024-06-12 11:59:04 发布
阅读量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

Joyechen1
关注
  • 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没有二维数组.所有自定义了一个数组类，下面是实例代码，需要的朋友可以参考下。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 524
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 366
在vue.config.js中配置关闭Uncaught runtime errors显示。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1335
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
最新发布
lx_nhs的博客
06-12 449
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
workbench javascript二次开发
06-30
### 回答1： Workbench是一个用于创建和自定义业务流程的工具。通过JavaScript的二次开发，可以为Workbench添加更多功能和定制化选项。 第一步是了解Workbench的基本架构和API。Workbench使用SoqlQuery语言查询数据库，并使用JavaScript、HTML和CSS构建用户界面。理解这个架构和API是进行二次开发的基础。 之后可以根据需求进行功能的开发和定制。比如，可以添加自定义的表单和字段，以满足特定的业务需求。也可以通过JavaScript添加逻辑和流程控制，使得系统更加智能和灵活。 另外，可以通过JavaScript进行一些数据处理和操作。比如，可以通过JavaScript计算字段值、验证用户输入、处理数据关联等。这样可以扩展和增强Workbench的数据处理能力。 在进行二次开发之前，需要先对Workbench进行配置和准备。可以通过Workbench的管理界面添加自定义对象、字段和布局，以及定义业务流程和权限控制等。 最后，测试和部署是二次开发过程中的重要环节。通过测试可以保证开发的功能和逻辑是正确的。部署则是将开发好的功能发布到正式环境，供用户使用。 总的来说，Workbench的JavaScript二次开发可以通过扩展和定制功能，增加系统的灵活性和可用性。通过了解和熟悉Workbench的架构和API，以及进行开发和部署，可以实现满足特定需求的定制化系统。 ### 回答2： workbench是一个用于开发和定制Salesforce平台的工具。它提供了许多功能，使开发人员能够创建和修改JavaScript代码以扩展Salesforce应用程序的功能。 在workbench中进行JavaScript二次开发，开发人员可以使用JavaScript语言来编写自定义代码，以满足特定业务需求。他们可以通过workbench的集成开发环境（IDE）编辑和调试JavaScript代码，并使用Salesforce平台的API来访问和操作数据。 通过workbench进行JavaScript二次开发，开发人员可以创建自定义按钮、自定义页面和验证规则等，以增强和定制Salesforce应用程序的功能。他们可以使用JavaScript来处理用户的输入和操作，并对数据进行验证和处理。通过使用workbench的开发工具，如代码编辑器和调试器，开发人员可以更轻松地编写和测试JavaScript代码，以确保其正确性和可靠性。 另外，workbench还提供了一些内置函数和库，用于简化JavaScript开发过程。这些函数和库提供了许多常见的功能和操作，如字符串处理、日期计算和数据转换等。开发人员可以利用这些功能来加快开发过程，并减少出错的可能性。 总而言之，workbench是一个强大的工具，可以支持JavaScript二次开发。通过使用它，开发人员可以使用JavaScript语言来编写和修改Salesforce应用程序的代码，以实现定制的业务需求。无论是创建自定义按钮、自定义页面还是验证规则，workbench都提供了一系列的功能和工具，帮助开发人员更轻松地开发和测试JavaScript代码。 ### 回答3： Workbench JavaScript二次开发是指在Workbench平台上使用JavaScript进行自定义开发的过程。Workbench平台是一个基于Web的集成开发环境，主要用于创建、编辑和管理业务流程和工作任务。 通过JavaScript的二次开发，我们可以根据实际需求对Workbench平台进行定制化的扩展和优化。以下是几个常见的二次开发场景： 1. 自定义表单：通过JavaScript可以对Workbench平台提供的默认表单进行修改和自定义，实现更符合业务需求的数据展示和填写方式。你可以调整表单的布局、样式，增加自定义的校验和计算逻辑，甚至可以集成其他第三方控件和工具。 2. 定制动作按钮：Workbench平台通常提供了一些默认的动作按钮，比如保存、提交、撤回等。通过JavaScript的二次开发，可以新增自定义的动作按钮，并在点击事件中实现特定的逻辑处理，比如调用其他系统接口、发送消息等。 3. 高级查询和筛选：Workbench平台的默认查询功能可能无法满足复杂的查询需求。通过JavaScript二次开发，可以实现更灵活的查询和筛选功能，比如添加条件组合、动态生成查询语句等。 4. 数据处理和计算：有时需要对Workbench平台上的数据进行进一步处理和计算。通过JavaScript的二次开发，可以编写脚本来实现这些需求，比如对数据进行加减乘除、日期计算等。 总而言之，Workbench JavaScript二次开发可以帮助我们对平台进行定制，以满足特定业务需求。在开发过程中，我们需要熟悉Workbench平台的API和事件机制，并结合JavaScript的语法和功能进行开发。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值