JavaScript进阶学习

目录

一.正则对象 RegExp

1.声明正则表达式的方式一

2.声明正则表达式的方式二

3.匹配数据

4.正则的bug

全局模式的指针移动

匹配数据为空时

 5.math对象

二.DOM和BOM

1.什么是DOM和BOM

2.Window对象

（1）open()：

（2）close():

（3）setTimeout():

（4）setInterval():

（5）alert():

(6)confirm():

（7）prompt():

（8）innerHeight属性

（9）innerWidth属性

（10）监听resize事件

（11）window.opener

3.Window子对象

（1）window.document:

（2）window.location:

window.location.href:*

window.location.protocol:

window.location.host:

window.location.hostname:

window.location.port:

window.location.pathname:

window.lacation.search:

window.location.hash:

window.location.assign():

window.location.reload():*

window.history:

window.history.length:

window.history.back():*

window.history.forward():*

window.history.go():

window.history.pushState():

window.history.replaceState():

window.navigator:

window.navigator.userAgent:*

window.navigator.platform:*

window.navigator.vendor:

window.navigator.language:

window.navigator.cookieEnabled:

window.navigator.plugins:

4.查找标签

三.事件

---

一.正则对象 RegExp

在python中如果需要使用正则，需要借助re模块

在js中需要创建正则对象

1.声明正则表达式的方式一

let reg = new RegExp

2.声明正则表达式的方式二

let reg1 = /正则表达式/

3.匹配数据

let reg = new RegExp(正则表达式)
reg.test(待匹配内容)

// 获取字符串中的某个字母
let str = "dream eam eam eam"
//字符串内置方法
str.match(/m/)  // 拿到第一个字母并返回索引，不会继续匹配
str.match(/m/g)  // 全局匹配 g表示全局模式
// 获取字符串中的某个字母
let str = "dream eam eam eam"
undefined
str.match(/m/) // 拿到第一个字母并返回索引，不会继续匹配
// ['m', index: 4, input: 'dream eam eam eam', groups: undefined]
str.match(/m/g) // 全局匹配 g表示全局模式
// (4) ['m', 'm', 'm', 'm']

4.正则的bug

let reg = /^[a-zA-Z][A-Za-z0-9]/g

reg.test("dream");

全局模式的指针移动

let reg = /^[a-zA-Z][A-Za-z0-9]/g

// 第一次匹配成功 -- 有数据 -- 指针移动到尾端
reg.test("dream");
// true

//第二次匹配失败 -- 指针在尾端向后匹配 -- 无数据
reg.test("dream");
// false

// 第三次匹配成功 -- 有数据 -- 指针回到头部
reg.test("dream");
// true
reg.test("dream");
// false

// 第二次匹配失败 -- 指针在尾端向后匹配 -- 无数据
reg.lastIndex
// 0
reg.test("dream");
// true

// 第三次匹配成功 -- 有数据 -- 指针回到头部
reg.lastIndex
// 2

匹配数据为空时

let reg = /^[a-zA-Z][A-Za-z0-9]/

reg.test();

let reg = /^[a-zA-Z][A-Za-z0-9]/

// 针对上述表达式：没有数据时，默认传进去的参数是  underfined -- 匹配成功
reg.test();
// true
reg.test();
// true

 5.math对象

abs(x)	返回数的绝对值
exp(x)	返回e的指数
floor(x)	对数进行下舍入
log(x)	返回数的自然对数（底为e）
max(x,y)	返沪x和y中的最高值
min(x,y)	返回x和y中的最低值
pow(x,y)	返回x的y次幂
random(0，1)	返回0~1之间的随机数
round(x)	把数四舍五入为最接近的整数
sin(x)	返回数的正弦
sqrt(x)	返回数的平方根
tan(x)	返回角的正切

二.DOM和BOM

1.什么是DOM和BOM

• BOM（Browser Object Model）
  • 浏览器对象模型
    • js代码操作浏览器
• DOM（Docunment Object Model）
  • 文档对象模型
    • js代码操作标签

2.Window对象

Window对象是JavaScript中表示浏览器窗口的全局对象，它提供了一系列方法来操作和管理窗口

（1）open()：

• 打开新窗口或者获取对一个已经存在的窗口的引用
• 第一个参数是目标网址，第二个参数可以为空，第三个参数为窗口大小

let newWindow = window.open("https://www.baidu.com","_blank");
let newWindow = window.open("https://www.baidu.com","_blank",'height=400px,width=400px');

（2）close():

• 关闭当前窗口

window.close();

（3）setTimeout():

• 在指定的时间延迟后执行一次指定的函数或者一段代码

setTimeout(function(){
    // 执行代码
},100);  // 1秒后执行

（4）setInterval():

• 以固定的时间间隔重复执行指定的函数或者一段代码

setInterval(function(){
    // 执行代码
},200); // 每2秒执行一次

（5）alert():

• 显示一个带有指定消息和一个确认按钮的警告框

window.alert("Hello,World!");

(6)confirm():

• 显示一个带有指定消息和两个按钮（确认和取消）的对话框

if (window.confirm("Are you sure?")){
    // 用户点击了确认按钮
} else {
    // 用户点击了取消按钮
}

（7）prompt():

• 显示一个带有指定消息和一个文本输入框的对话框

let name = window.prompt("Please enter your name:");

（8）innerHeight属性

• 返回浏览器窗口的内部高度（即视口的高度），以像素为单位，不包括浏览器的工具栏、滚动条等元素
• 使用示例：

let windowHeight = window.innerHeight;
console.log(windowHeight); // 输出当前窗口的视口高度

（9）innerWidth属性

• 返回浏览器窗口的内部宽度（即视口的宽度），以像素为单位，不包括浏览器的工具栏、滚动条等元素
• 使用示例：

let windowWidth = window.innerWidth;
console.log(windowWidth); // 输出当前窗口的视口宽度

（10）监听resize事件

• 需要注意的是，这两个属性返回的值会随着窗口的大小调整而改变
  • 因此如果需要监控窗口大小的改变，可以通过监听resize事件来实现

window.addEventListener("resize",function() {
    let windowHeight = window.innerHeight;
    let windowWidth = window.innerWidth;
    console.log("Window Height:", windowHeight)
    console.log("Window Width:", windowWidth);
});

• 在使用这两个属性时，可以根据返回的数值进行相应的布局或调整操作，以适应当前窗口的尺寸

（11）window.opener

• 是指打开当前窗口是通过使用JavaScript的window.open()方法打开的弹出窗口时，可以使用window.opener来引用打开它的父窗口

在以下情况下可以使用window.opener：

• [1]当窗口是通过JavaScript 的window.open()方法打开的弹出窗口时，可以使用window.opener来引用打开它的父窗口。
  • 例如，在父窗口中的JavaScript代码中执行以下代码：

let popup = window.open("popup.html"); // 打开一个弹出窗口

• 然后在弹出窗口popup.html中的JavaScript代码中，可以通过window.opener引用到父窗口：

let parentWindow = window.opener;
console.log(parentWindow); // 输出父窗口对象

• [2]当窗口是通过其他窗口向其发送消息（使用postMessage()方法）时，可以使用event.sourse属性来获取消息来源窗口，并通过window.opener来引用该来源窗口
  • 例如，在来源窗口的JavaScript代码中，向当前窗口发送消息：

let currentWindow = window.open("current.html"); // 打开当前窗口

// 向当前窗口发送消息
currentWindow.postMessage("Hello", "http://example.com");

• 然后，在当前窗口current.html中的JavaScript代码中，通过监听message事件接收来自来源窗口的消息，并使用event.source和window.opener引用到来源窗口：

window.addEventListener("message", function(event) {
  let message = event.data;
  let sourceWindow = event.source;
  let openerWindow = window.opener;

  console.log("Message:", message);
  console.log("Source Window:", sourceWindow);
  console.log("Opener Window:", openerWindow);
});

3.Window子对象

如果是Window的子对象，Window可以不写

（1）window.document:

• 此子对象表示当前窗口中的文档对象，用于对页面内容进行读取和修改操作

• 通过window.document，可以使用各种方法来查询和修改当前页面的 HTML 结构、CSS 样式和 DOM 元素。

• 例如，要获取页面标题：

let pageTitle = window.document.title;
console.log(pageTitle);

（2）window.location:

• 此子对象包含有关当前页面 URL 的信息，并提供了一些与页面导航相关的方法。

• 通过window.location，可以获取当前页面的 URL、查询字符串参数、路径等信息，并且可以使用一些方法来导航到其他页面。

• 例如，要在新标签页中打开一个 URL：

window.location.href = 'https://example.com';

window.location.href:*

• 获取当前页面的完整 URL（包括协议、域名、路径等）。
• 示例：

let currentURL = window.location.href;
console.log(currentURL);

window.href = url // 跳转到目标地址

window.location.protocol:

• 获取当前页面的协议部分（例如 'http:' 或 'https:'）。
• 示例：

let protocol = window.location.protocol;
console.log(protocol);

window.location.host:

• 获取当前页面的主机（域名和端口号）部分。
• 示例：

let host = window.location.host;
console.log(host);

window.location.hostname:

• 获取当前页面的主机名部分。
• 示例：

let hostname = window.location.hostname;
console.log(hostname);

window.location.port:

• 获取当前页面的端口号部分。
• 示例：

let port = window.location.port;
console.log(port);

window.location.pathname:

• 获取当前页面的路径部分。
• 示例：

let pathname = window.location.pathname;
console.log(pathname);

window.lacation.search:

• 获取当前页面的查询参数部分（即 URL 中问号后面的内容）。
• 示例：

let searchParams = window.location.search;
console.log(searchParams);

window.location.hash:

• 获取当前页面的片段标识部分（即 URL 中井号后面的内容）。
• 示例：

let hash = window.location.hash;
console.log(hash);

window.location.assign():

• 将当前页面重定向到指定的 URL。
• 示例：

// 将当前页面重定向到 example.com
window.location.assign("http://example.com");

window.location.reload():*

• 重新加载当前页面。
• 示例：

// 重新加载当前页面
window.location.reload();

window.history:

• 此子对象用于操作浏览器的历史记录，包括向前和向后导航。
  • 通过window.history，可以使用一些方法来在历史记录中向前或向后导航，以及获取当前历史记录的状态数量。
• 例如，要后退到上一个页面：

window.history.back();

window.history.length:

• 返回当前会话的历史记录条目数。
• 示例：

let historyLength = window.history.length;
console.log(historyLength);

window.history.back():*

• 加载上一个历史记录。相当于用户点击浏览器的后退按钮。
• 示例：

window.history.back();

window.history.forward():*

• 加载下一个历史记录。相当于用户点击浏览器的前进按钮。
• 示例：

window.history.forward();

window.history.go():

• 根据传入的整数参数，加载相对于当前历史记录的某个条目。负数表示后退，正数表示前进， 表示重新加载当前页。
• 示例：

// 后退两个历史记录
window.history.go(-2);

// 前进一个历史记录
window.history.go(1);

// 重新加载当前页
window.history.go();

window.history.pushState():

• 向浏览器历史记录中添加新的状态，并且不会触发页面的重新加载。它接受三个参数：state、title 和 URL。
• 示例：

// 添加新的历史记录状态
window.history.pushState({ page: 1 }, "Page 1", "/page1.html");

window.history.replaceState():

• 替换当前的历史记录状态，不会触发页面的重新加载。它接受三个参数：state、title 和 URL。
• 示例：

// 替换当前历史记录状态
window.history.replaceState({ page: 2 }, "Page 2", "/page2.html");

window.navigator:

• 此子对象提供有关浏览器环境和设备的信息，包括用户代理字符串、浏览器版本、操作系统等。
• 例如，要获取用户代理字符串：

let userAgent = window.navigator.userAgent;
console.log(userAgent);

window.navigator.userAgent:*

• 返回浏览器的用户代理字符串，该字符串包含了有关浏览器厂商、版本号以及操作系统等信息。

该方法可以用来校验反爬程序

• 示例：

let userAgent = window.navigator.userAgent;
console.log(userAgent);

window.navigator.platform:*

• 返回操作系统平台，如 "Win32"、"MacIntel" 等。
• 示例：

let platform = window.navigator.platform;
console.log(platform);

window.navigator.vendor:

• 返回浏览器的厂商或供应商名称。
• 示例：

let vendor = window.navigator.vendor;
console.log(vendor);

window.navigator.language:

• 返回浏览器的首选语言，通常是用户操作系统的默认语言。
• 示例：

let language = window.navigator.language;
console.log(language);

window.navigator.cookieEnabled:

• 返回一个布尔值，表示浏览器是否启用了 cookie。
• 示例：

let cookieEnabled = window.navigator.cookieEnabled;
console.log(cookieEnabled);

window.navigator.plugins:

• 返回一个包含浏览器插件列表的 PluginArray 对象。
• 示例：

let plugins = window.navigator.plugins;
console.log(plugins);

4.查找标签

直接查找：

document.getElementById	根据ID获取一个标签
document.getElementsByClassName	根据class属性获取
document.getElementsByTagName	根据标签名获取标签合集

间接查找：

parentElement	父节点标签元素
children	所有子标签
firstElementChild	第一个子标签元素
lastElementChild	最后一个子标签元素
nextElementSibling	下一个兄弟标签元素
previousElementSibling	上一个兄弟标签元素

三.事件

常用事件：

onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onfocus	元素获得焦点。
onblur	元素失去焦点。（应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.）
onchange	域的内容被改变。 （应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动））
onkeydown	某个键盘按键被按下。 （应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.）
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onselect	在文本框中的文本被选中时发生。
onsubmit	确认按钮被点击，使用的对象是form。