JavaScript对象

香菜南波万

已于 2024-05-19 10:12:37 修改

阅读量684

点赞数 16

文章标签： javascript 前端

于 2024-05-19 09:47:49 首次发布

本文链接：https://blog.csdn.net/studyinstall/article/details/139035459

版权

JavaScript Window对象的方法

JavaScript中的window对象代表浏览器窗口或框架。它是全局对象，所有的表达式都在当前环境中计算。以下是一些常用的window对象属性：

closed: 返回窗口是否已被关闭
defaultStatus: 设置或返回窗口状态栏中的默认文本（仅Opera支持）。
document: 对Document对象的只读引用。
innerHeight: 返回窗口的文档显示区的高度。
innerWidth: 返回窗口的文档显示区的宽度。
length: 设置或返回窗口中的框架数量。
name: 设置或返回窗口的名称（新建的窗口，没有设置name，name默认为空字符串）。
opener: 返回对创建此窗口的引用。
outerHeight: 返回窗口的外部高度。
outerWidth: 返回窗口的外部宽度。
pageXOffset: 设置或返回当前页面相对于窗口显示区左上角的X位置（可被赋值，但没有效果）。
pageYOffset: 设置或返回当前页面相对于窗口显示区左上角的Y位置（可被赋值，但没有效果）。
parent: 返回父窗口。
self: 返回对当前窗口的引用，等价于window属性。
status: 设置窗口状态栏的文本（默认只支持Opera）。
top: 返回最顶层的祖先窗口（无论嵌套多少层窗口，使用window.top会返回最外面那一个窗口）。
screenLeft: 只读整数，声明了窗口的左上角在屏幕上的X坐标。
screenTop: 只读整数，声明了窗口的左上角在屏幕上的Y坐标。
screenX: 支持screenLeft和screenTop，而Chrome、Firefox和Safari支持screenX和screenY。
screenY: 支持screenLeft和screenTop，而Chrome、Firefox和Safari支持screenX和screenY。

JavaScript Window对象的方法

window对象提供了一系列用于操作浏览器窗口的方法：

alert(): 显示带有一段信息和一个确认按钮的警告框。
confirm(): 显示带有一段消息以及确认按钮和取消按钮的对话框。按确认返回true，按取消返回false。
prompt(): 显示可提示用户输入的对话框。按确认，返回输入的值。
setInterval(): 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout(): 在指定的毫秒后调用函数或计算表达式。
clearInterval(): 取消由setInterval设置的定时器（停止setInterval）。
clearTimeout(): 取消由setTimeout方法设置的定时器（停止setTimeout）。
close(): 关闭当前浏览器窗口。
blur(): 将键盘焦点从当前窗口移除。
focus(): 将键盘焦点赋予一个窗口。
open(): 打开一个新的浏览器窗口或查找一个已命名的窗口。
print(): 打印当前窗口的内容。
resizeBy(): 根据指定的像素值调整窗口的大小。
resizeTo(): 将窗口的大小调整到指定的宽度和高度。
scrollBy(): 根据指定的像素值滚动页面内容。
scrollTo(): 将页面内容滚动到指定的坐标。

setTimeout - 延时器

setTimeout函数用于在指定的毫秒数后执行一次特定的代码。它的语法如下：


setTimeout(function, milliseconds, param1, param2, ...)

function：要执行的函数。
milliseconds：延迟的时间，以毫秒计。
param1, param2, ...：传递给函数的参数（可选）。

示例代码：


// 在3秒后弹出一个提示框
setTimeout(function() {
    alert('三秒钟到了!');
}, 3000);

setInterval - 定时器

setInterval函数用于按照指定的时间间隔重复执行特定的代码。它的语法与setTimeout类似：


setInterval(function, milliseconds, param1, param2, ...)

function：要重复执行的函数。
milliseconds：时间间隔，以毫秒计。
param1, param2, ...：传递给函数的参数（可选）。

示例代码：


// 每秒更新一次页面上的时间显示
setInterval(function() {
    var now = new Date();
    document.getElementById('time').innerHTML = now.toLocaleTimeString();
}, 1000);

在这个例子中，我们每秒获取一次当前时间，并将其更新到页面上id为'time'的元素中。

清除定时器

如果你想要停止一个定时器或延时器，可以使用clearTimeout和clearInterval函数。这两个函数的用法如下：


var timeoutId = setTimeout(function, milliseconds);
var intervalId = setInterval(function, milliseconds);

// 清除延时器
clearTimeout(timeoutId);

// 清除定时器
clearInterval(intervalId);

在上面的代码中，timeoutId和intervalId分别存储了setTimeout和setInterval返回的定时器标识符，通过这个标识符可以清除对应的定时器。

JavaScript中改变窗口大小

在JavaScript中，您可以使用window对象的resizeTo()方法和resizeBy()方法来改变窗口的大小。resizeTo()方法允许您将窗口的大小设置为特定的宽度和高度，而resizeBy()方法则是基于当前窗口大小进行调整。

resizeTo()方法

resizeTo()方法接受两个参数：第一个参数是窗口的新宽度，第二个参数是窗口的新高度。例如，如果您想将窗口大小设置为宽度为300像素，高度为200像素，您可以这样写：


window.resizeTo(300, 200);

resizeBy()方法

resizeBy()方法也接受两个参数，但是它是基于当前窗口的大小来进行调整。第一个参数是要增加的宽度，第二个参数是要增加的高度。例如，如果您想将窗口宽度增加100像素，高度增加50像素，您可以这样写：


window.resizeBy(100, 50);

JavaScript中改变窗口位置

在JavaScript中，您可以使用window对象的moveTo()方法和moveBy()方法来改变窗口的位置。moveTo()方法允许您将窗口移动到屏幕上的特定位置，而moveBy()方法则是基于当前窗口位置进行调整。

moveTo()方法

moveTo()方法接受两个参数：第一个参数是窗口新位置的x坐标，第二个参数是窗口新位置的y坐标。例如，如果您想把窗口移动到屏幕左上角的坐标为(100, 100)，您可以这样写：


window.moveTo(100, 100);

moveBy()方法

moveBy()方法也接受两个参数，但是它是基于当前窗口位置来进行调整。第一个参数是在水平方向上移动的像素数，第二个参数是在垂直方向上移动的像素数。例如，如果您想把窗口向左移动50像素，向上移动20像素，您可以这样写：



window.moveBy(-50, 20);

Screen对象

在JavaScript中，Screen对象提供了关于用户屏幕的信息，如屏幕大小、颜色深度等。通过window.screen可以访问到Screen对象。以下是一些常用的属性和方法：

availHeight: 返回屏幕的可用高度，即不包括任务栏的高度。
availWidth: 返回屏幕的可用宽度，即不包括任务栏的宽度。
colorDepth: 返回目标设备或缓冲器上的调色板的比特深度。
height: 返回屏幕的总高度。
pixelDepth: 返回屏幕的颜色分辨率，即每像素的位数。
width: 返回屏幕的总宽度。

下面是一个简单的例子，展示了如何使用这些属性：


alert('屏幕宽度: ' + window.screen.width);
alert('屏幕高度: ' + window.screen.height);

Navigator对象

Navigator对象的主要属性和方法

Navigator对象拥有多种属性和方法，以下是一些主要的属性和方法：

Navigator.bluetooth: 返回一个当前文档的Bluetooth对象，提供对Web Bluetooth API功能的访问2。
Navigator.clipboard: 返回一个用于读写访问系统剪贴板内容的Clipboard对象2。
Navigator.connection: 返回一个包含有关网络连接信息的NetworkInformation对象2。
Navigator.contacts: 返回一个ContactsManager接口，允许用户从他们的联系人列表中选择条目，并与网站或应用程序共享所选条目的有限详细信息2。
Navigator.cookieEnabled: 如果设置cookie会被忽略则返回false，否则返回true2。
Navigator.credentials: 返回CredentialsContainer接口，该接口暴露了请求凭据及在成功登录或注销等重要事件发生时通知用户代理的方法2。
Navigator.deviceMemory: 返回设备内存的近似值2。
Navigator.geolocation: 返回一个Geolocation对象，用于访问设备位置2。
Navigator.gpu: 返回当前浏览上下文的GPU对象，是WebGPU API的入口点2。
Navigator.hardwareConcurrency: 返回可用的逻辑处理器核心数量2。
Navigator.hid: 返回一个HID对象，提供用于连接HID设备、列出已连接的HID设备以及连接的HID设备的事件处理程序的方法2。
Navigator.keyboard: 返回一个Keyboard对象，该对象可用于访问检索键盘布局映射和切换捕捉物理键盘按键的函数2。
Navigator.language: 返回一个字符串，表示用户的首选语言，通常是浏览器UI的语言2。
Navigator.locks: 返回一个LockManager对象，提供了请求新的Lock对象和查询现有的Lock对象的方法2。
Navigator.maxTouchPoints: 返回当前设备支持的最大同时触摸接触点数2。
Navigator.mediaDevices: 返回一个MediaDevices对象的引用，可用于获取有关可用媒体设备的信息2。
Navigator.onLine: 返回浏览器的在线状态2。
Navigator.pdfViewerEnabled: 如果浏览器在导航到PDF文件时可以使用它们，返回true，否则为false2。
Navigator.permissions: 返回一个Permissions对象，可以用来查询和更新受权限API支持的API的权限状态2。
Navigator.presentation: 返回一个对PresentationAPI的引用2。
Navigator.scheduling: 返回一个当前文档的Scheduling对象2。
Navigator.serial: 返回一个Serial对象，代表了进入Web Serial API的入口点2。
Navigator.serviceWorker: 返回一个ServiceWorkerContainer对象，它提供了注册、移除、升级以及与相关文档的ServiceWorker对象进行通信的功能2。
Navigator.storage: 返回用于按站点或按应用管理持久化权限及估算可用存储空间的单例StorageManager对象2。
Navigator.usb: 返回一个当前文档的USB对象，提供对WebUSB API功能的访问2。
Navigator.userActivation: 返回一个包含有关当前窗口用户激活状态的信息的UserActivation对象2。
Navigator.userAgent: 返回当前浏览器的用户代理2。
Navigator.virtualKeyboard: 返回一个VirtualKeyboardAPI的引用，以控制屏幕上的虚拟键盘2。
Navigator.wakeLock: 返回一个WakeLock接口，你可以使用它来请求屏幕唤醒锁并防止屏幕变暗、关闭或显示屏幕保护程序2。
Navigator.webdriver: 表示用户代理是否受自动化控制2。
Navigator.windowControlsOverlay: 返回WindowControlsOverlay接口，该接口暴露了桌面渐进式Web应用程序标题栏的几何信息，以及在标题栏发生变化时触发的事件2。
Navigator.xr: 返回XRSystem对象，它代表了进入WebXR API的入口点2。

如何使用Navigator对象

使用Navigator对象通常涉及到获取它的实例，然后使用它的属性和方法。例如，要检查用户的在线状态，可以这样做：


if (navigator.onLine) {
  // 用户在线
} else {
  // 用户离线
}

或者，如果你想使用用户的联系人信息，可以这样：


var contacts = navigator.contacts;
if (contacts) {
  // 使用用户的联系人信息
} else {
  // 无法访问联系人信息
}

Location对象

在JavaScript中，Location对象是window对象的一部分，它包含了当前页面的URL信息。通过这个对象，你可以获取到URL的不同组成部分，如主机名、端口、路径等。下面是如何使用Location对象的一些基本示例：

获取URL各部分

hash：获取URL中的哈希值（例如#section2）。
host：获取URL中的主机名和端口。
hostname：仅获取URL中的主机名。
href：获取完整的URL。
pathname：获取URL中的路径部分（不包括查询字符串或哈希值）。
port：获取URL中的端口号。
protocol：获取URL中的协议（例如http:或https:）。
search：获取URL中的查询字符串部分（例如?query=value）。

示例代码


var url = window.location;
console.log(url.href); // 输出完整的URL
console.log(url.host); // 输出主机名和端口
console.log(url.hostname); // 只输出主机名
console.log(url.pathname); // 输出路径部分
console.log(url.search); // 输出查询字符串部分
console.log(url.hash); // 输出哈希值部分

修改URL

除了获取URL的各个部分，你还可以使用Location对象的方法来改变页面加载的内容：

assign()：加载一个新的页面。
reload()：重新加载当前页面。
replace()：用新的页面替换当前页面。

注意事项

虽然所有的浏览器都支持Location对象，但是并没有一个公开的标准来规范它的行为。因此，在使用Location对象时，你应该考虑到不同浏览器的兼容性差异。

History对象

获取历史记录长度

要获取浏览器历史记录的长度，你可以使用history.length属性：


var historyLength = history.length;
console.log("浏览器历史记录中有 " + historyLength + " 个条目。");

获取特定的历史记录URL

如果你想获取特定位置的历史记录URL，可以使用history.back(), history.forward(), 或 history.go()方法，并传入相应的参数。例如，要获取当前位置的前一个URL，可以使用：


var previousUrl = history.back();
console.log("上一个URL是 " + previousUrl);

导航到特定的历史记录

要导航到历史记录中的某个特定点，可以使用history.go()方法，并传入相对于当前位置的偏移量。例如，要回到上一个页面，可以使用：


history.go(-1);

注意事项

在使用History对象时，需要注意的是，由于安全限制，通常无法访问除当前窗口外的其他窗口的History对象。此外，不同的浏览器可能会有不同的安全策略，这可能会影响History对象的可用性和行为。

Document对象

在JavaScript中，document 是一个非常重要的内置对象，它代表了当前浏览器窗口中的HTML文档。通过 document 对象，开发者可以访问和操作页面上的元素、属性、文本内容等。以下是一些常用的 document 对象的方法和属性：

获取元素

getElementById(id)：通过元素的ID获取一个元素。
getElementsByClassName(className)：通过类名获取一组元素。
getElementsByTagName(tagName)：通过标签名获取一组元素。
querySelector(selector)：通过CSS选择器获取第一个匹配的元素。
querySelectorAll(selector)：通过CSS选择器获取所有匹配的元素。

创建和插入元素

createElement(tagName)：创建一个新的元素。
createTextNode(text)：创建一个新的文本节点。
appendChild(childnode)：将一个子节点添加到指定节点的子节点列表的末尾。
insertBefore(newNode, referenceNode)：在指定的已有子节点之前插入新的子节点。

修改元素

innerHTML：设置或获取元素内部的HTML内容。
innerText 或 textContent：设置或获取元素内部的文本内容。
setAttribute(name, value)：设置元素的属性值。
getAttribute(name)：获取元素的属性值。
removeAttribute(name)：移除元素的属性。

删除元素

removeChild(node)：从父节点中移除指定的子节点。

其他常用方法和属性

body：访问文档的 <body> 元素。
title：获取或设置文档的标题。
URL：获取当前文档的URL。
cookie：获取或设置与当前文档关联的cookie。
write(text)：向文档写入文本内容。
writeln(text)：向文档写入文本内容并在末尾添加换行符。

使用这些方法和属性，你可以动态地操作HTML文档的内容和结构，实现丰富的交互效果和动态更新页面内容。例如，你可以创建一个新的 <p> 元素，给它添加文本内容，然后将它插入到页面的某个位置：


// 创建一个新的段落元素
var newParagraph = document.createElement("p");

// 创建一个新的文本节点
var textNode = document.createTextNode("这是一个新段落。");

// 将文本节点添加到段落元素中
newParagraph.appendChild(textNode);

// 获取body元素
var bodyElement = document.body;

// 将新段落添加到body元素中
bodyElement.appendChild(newParagraph);

Swiper插件

Swiper是一款流行的JavaScript插件，用于在移动端网站上创建滑动效果，如轮播图、触屏焦点图等。它可以为手机、平板电脑等移动设备提供丰富的交互体验。Swiper支持多种自定义选项，包括循环播放、分页器、导航按钮等，使得开发者能够轻松地集成这些功能到他们的项目中1 2。

如何在项目中使用Swiper插件

要在你的项目中使用Swiper，你可以按照以下步骤操作：

安装依赖：首先，你需要通过npm（Node Package Manager）安装Swiper。你可以使用以下命令来安装：
```
npm install swiper
```
引入Swiper：在你的HTML文件中，你需要引入Swiper的JavaScript和CSS文件。这可以通过在<head>标签内添加<link>和<script>标签来实现。例如：


<link rel="stylesheet" href="node_modules/swiper/css/swiper.css">
<script src="node_modules/swiper/dist/js/swiper.js"></script>

创建Swiper实例：在你的JavaScript文件中，你需要创建一个新的Swiper实例来初始化轮播图。例如：


var mySwiper = new Swiper('.swiper-container', {
  loop: true, // 启用循环模式
  // 如果需要分页器
  pagination: {
    el: '.swiper-pagination',
    clickable: true // 允许点击分页器的小点进行切换
  },
  // 如果需要前进后退按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

调整DOM结构：确保你的HTML结构符合Swiper的要求，以便正确显示轮播图。通常，你需要有一个容器元素（如<div class="swiper-container">）和一个包裹所有轮播项的元素（如<div class="swiper-wrapper">），每个轮播项都是一个带有特定类的<div class="swiper-slide">。