JavaScript入门6

文章目录

十七、JavaScript使用正则表达式
- 1. 正则表达式概述
- 2. 正则表达式语法
- - 2.1 元字符
  - 2.2 字符转义
  - 2.3 重复次数
  - 2.4 字符类
  - 2.5 分支条件
  - 2.6 分组
  - 2.7 反义
- 3. JS 中使用正则表达式
- - 3.1 JS 中创建正则表达式对象
  - - 3.1.1 字面量方式（推荐）
    - 3.1.2 构造函数方式
    - 3.1.3 常用标志（flags）
  - 3.2 正则表达式对象的常用方法
  - - toString() 和 source
    - test
    - exec
  - 3.3 实现邮箱地址验证
十八、DOM编程
- 1.基本DOM查询与修改
- 2. 创建和添加元素
- 3. 样式操作
- 4.表单交互
- 5. 遍历DOM
- 6. 元素的三个方法：
- 7. 动态列表操作
- 8. 简单的DOM动画

十七、JavaScript使用正则表达式

1. 正则表达式概述

正则表达式（Regular Expression，简称 regex 或 regexp）是一种用于描述字符串模式的特殊语法。它由一系列字符和特殊符号构成，用于定义搜索模式，主要用于字符串的匹配、查找、替换和分割等操作。正则表达式提供了一种灵活、高效的方式来处理文本数据。正则表达式从 1950 年代理论起源（Kleene），到 1960-70 年代 Unix 工具（grep）首次应用，再到 1980-90 年代 Perl 扩展普及，最终成为现代编程语言和工具的标准功能，广泛应用于文本处理、数据验证等领域。正则表达式主要用于文本搜索替换、数据验证、日志分析、网络爬虫、编译器设计和生物信息学等领域的模式匹配与处理。

2. 正则表达式语法

2.1 元字符

在这里插入图片描述

2.2 字符转义

正则表达式中使用 \\完成字符转义。例如：.表示普通的 .字符。

2.3 重复次数

在这里插入图片描述

2.4 字符类

在这里插入图片描述

2.5 分支条件

0\\d{2}-\\d{8}|0\\d{3}-\\d{7} 这个表达式能匹配两种以连字号分隔的电话号码：一种是三位区号，8位本地号(如010-12345678)，一种是4位区号，7位本地号(0376-2233445)。

2.6 分组

(\\d{1,3}.){3}\\d{1,3} 一个简单的IP地址匹配表达式

2.7 反义

在这里插入图片描述

3. JS 中使用正则表达式

3.1 JS 中创建正则表达式对象

在 JavaScript 中，你可以通过两种方式创建正则表达式对象：

3.1.1 字面量方式（推荐）

对于已知的、固定的模式，推荐使用字面量方式，语法更简洁使用斜杠 / 包围正则表达式模式：

const regex = /pattern/flags;
// 匹配所有数字
const numberRegex = /\\d+/g;

// 匹配邮箱
const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;

3.1.2 构造函数方式

当需要动态构建正则表达式时（如基于用户输入），必须使用构造函数方式使用 RegExp 构造函数：

// 匹配所有数字
const numberRegex = new RegExp('\\\\d+', 'g');

// 动态创建正则表达式
const searchTerm = 'hello';
const dynamicRegex = new RegExp(searchTerm, 'i');

3.1.3 常用标志（flags）

● i – 忽略大小写 ● g – 全局匹配（查找所有匹配而非在第一个匹配后停止）【不会以换行符作为分界点】 ● m – 多行模式【会以换行符作为分界点】

g和 m的区别：

const str = "a1\\na2\\na3";

// 字符串都有match方法，字符串的match方法返回数组，这个数组中都是能够匹配上正则表达式的字符串。

// 没有 m：^ 只匹配整个字符串的开头
// 你可能会有一个疑问？不是说g是全局匹配吗？怎么又变成"只匹配整个字符串的开头"了？
// g 确实是匹配全局，以下这个正则表达式只匹配开头是 ^ 符号决定的。
// 以下这个match匹配的是：不管你字符串有多少行，返回的就是整个字符串的开头。
str.match(/^a\\d/g); // ["a1"]

// 有 m：^ 匹配每行的开头（要想达到匹配每一行的开头，必须gm联合使用。单独一个m只是会获取到第一个。）
// m是以换行符作为分界点的。g不会以换行符作为分界点。
str.match(/^a\\d/gm); // ["a1", "a2", "a3"]

注意：如果正则表达式中没有 ^或 $，g和 gm没有区别。

3.2 正则表达式对象的常用方法

toString() 和 source

//toString 和 source 的区别：
let regExp1 = /^a\\d{6,}/gi;
console.log(regExp1.toString());
console.log(regExp1.source);

在这里插入图片描述

test

返回值：boolean 使用场景：快速验证字符串是否匹配模式（也可以用字符串的方法match）

//正则表达式的test方法:
let reg = /^[a-zA-Z0-9_$]{6,}$/;
console.log(reg.test("1234rgp$__"));//true
console.log(reg.test("1234rgp$__集"));//false

exec

返回值：Array或 null 使用场景：提取匹配细节（位置等信息）

//exec方法：
let reg1 = /\\d+/g;
let str1 = '123k456k789k';
console.log(reg1.exec(str1)[0]); //123
console.log(reg1.exec(str1)[1]); //undefined
console.log(reg1.exec(str1)[0]); //789
console.log(reg1.exec(str1)); //null

exec和match的比较

//exec 方法
const str = '123x456y789'
const regExp = /\\d+/g;//g标志非常重要。
let match;
while((match = regExp.exec(str)) !== null){
console.log(match[0]);
}

//match 方法
const str1 = '123x456y789'
const regExp1 = /\\d+/g;//g标志非常重要。
let result = str1.match(regExp1);
result.forEach(item => console.log(item))

3.3 实现邮箱地址验证

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
邮箱地址：<input type="text" id="email" placeholder="请输入合法的邮箱地址">
<span id="emailError"></span>

//失去焦点事件
email.addEventListener("blur",function(){
let emailValue = email.value;
const RegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
let ok = RegExp.test(emailValue);

let emailError = document.getElementById("emailError");
if(ok){
emailError.innerText = "输入地址合法";
emailError.style.color = "green";
}else{
emailError.innerText = "输入地址不合法";
emailError.style.color = "red";
}
})
})
</script>
</body>
</html>

十八、DOM编程

DOM编程是指使用JavaScript来操作文档对象模型(Document Object Model)，从而动态地改变网页内容、结构和样式的编程方式。

1.基本DOM查询与修改

// 获取元素
// 1.通过id获取,返回一个
const outer = document.getElementById("outer");
console.log(outer);
//2.通过class获取，返回数组
const allMyDiv = document.getElementsByClassName("myDiv");
console.log(allMyDiv);
//3.通过标签名字获取，返回数组
const allDiv = document.getElementsByTagName("div");
console.log(allDiv);
//4.通过name获取，返回数组
const hobbies = document.getElementsByName("hobby");
console.log(hobbies);
//5. 更加现代的写法，通过css选择器的语法，返回匹配的第一个
const firstMyDiv = document.querySelector(".myDiv");
console.log(firstMyDiv);
//6.document.querySelectorAll
const allMyDiv2 = document.querySelectorAll(".myDiv");
console.log(allMyDiv2);

//查找离element最近的祖先元素(从当前元素开始向上查找匹配指定选择器的最近的祖先元素(包括自己))
//返回一个值。从自己开始匹配，自己符合就返回自己，自己不符合再找最近的祖先。
const elt = document.getElementById("myDiv");
const myDiv = elt.closest(".myDiv");
console.log(myDiv);

//判断元素是否符合指定的选择器
const isMatch = elt.matches(".myDiv");
console.log(isMatch);

//获取父节点的第一个或最后一个子元素
const fu = document.getElementById("outer");
let firstZi = fu.firstElementChild;
let lastZi = fu.lastElementChild;
console.log(firstZi);
console.log(lastZi);

2. 创建和添加元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="addItem">向ul标签内部末尾添加一个li</button>
<button id="addItems">向ul标签内部末尾添加多个li，使用片段方式</button>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>

<button id="insertBeforeBtn">在段落标签前添加一个新的段落</button>
<div id="d">
<p id="p">123456</p>
</div>

document.addEventListener("DOMContentLoaded",()=>{
//创建节点并添加到末尾
document.getElementById("addItem").addEventListener("click",()=>{
let liNode = document.createElement("li");
liNode.textContent = "项目4";
document.querySelector("ul").appendChild(liNode);
})

//指定在某一节点前添加元素
document.getElementById("insertBeforeBtn").addEventListener("click",()=>{
let newP = document.createElement("p");
newP.textContent = "这是一个新的段落";
let fu = document.querySelector("div");
let p = document.querySelector("#p");
fu.insertBefore(newP,p);
})

//使用片段方式，添加多个节点
document.getElementById("addItems").addEventListener("click",()=>{
const fragment = document.createDocumentFragment();
for(let i = 1 ;i <= 10;i++){
const liNode = document.createElement("li");
liNode.textContent=`项目${i}`;
fragment.appendChild(liNode);
}
document.querySelector("ul").appendChild(fragment);
})
})

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

3. 样式操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{
width: 200px;
height: 200px;
border: 1px,solid,black;
background-color: aqua;
}
.class1{
width: 100px;
height: 100px;
border: 1px,solid,black;
background-color: rgb(136, 0, 255);
}
.class2{
width: 100px;
height: 100px;
border: 1px,solid,black;
background-color: rgb(222, 19, 19);
}
</style>
</head>
<body>
<button id="changeStyleBtn">修改div样式</button>
<button id="changeStyleBtnToClass1">切换class1样式</button>
<button id="changeStyleBtnToClass2">切换class2样式</button>
<button id="changeStyleBtnByClass">来回切换class样式</button>
<div id="div1"></div>
<div id="div2" class="class1">通过class修改样式</div>
<script>
document.addEventListener("DOMContentLoaded",()=>{

//元素.style.样式
document.getElementById("changeStyleBtn").addEventListener("click",()=>{
let div1 = document.getElementById("div1");
div1.style.width = '100px';
div1.style.height = '100px';
div1.style.backgroundColor = 'red';
})

//切换class
document.getElementById("changeStyleBtnToClass2").addEventListener("click",()=>{
let div2 = document.getElementById("div2");
div2.className = 'class2';
})
document.getElementById("changeStyleBtnToClass1").addEventListener("click",()=>{
let div2 = document.getElementById("div2");
div2.className = 'class1';
})
document.getElementById("changeStyleBtnByClass").addEventListener("click",()=>{
let div2 = document.getElementById("div2");
div2.classList.toggle('class2');
})
})
</script>
</body>
</html>

4.表单交互

// 示例1：获取表单输入值
document.getElementById('submit-btn').addEventListener('click', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
let input = document.getElementById('name-input');
alert('你输入的名字是: ' + input.value);
});

// 示例2：动态更新输入反馈
let textInput = document.getElementById('text-input');
let feedback = document.getElementById('feedback');
textInput.addEventListener('input', function() {
feedback.textContent = '你正在输入: ' + this.value;
});

5. 遍历DOM

元素的两个属性： ● 获取所有的子元素：element.children ● 获取当前元素的父元素：element.parentNode

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM元素遍历与父元素查找示例</title>
</head>
<body>
<!— 示例1：遍历子元素 —>
<h2>遍历子元素示例</h2>
<ul id="my-list">
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
<li>项目 4</li>
</ul>

<!— 示例2：查找父元素 —>
<h2>查找父元素示例</h2>
<div id="parent-element">
<p>这是一个父元素</p>
<div id="child-element">这是一个子元素，点击我会高亮父元素</div>
</div>

console.log("遍历子元素:");
for (let item of items) {
console.log(item.textContent);
// 为每个项目添加样式
item.style.color = 'blue';
}

// 示例2：查找父元素
let child = document.getElementById('child-element');

// 添加点击事件
child.addEventListener('click', function() {
let parent = child.parentNode;
parent.style.border = '2px solid red';
parent.style.padding = '10px';
parent.style.backgroundColor = '#f0f0f0';

console.log("父元素ID:", parent.id);
});
</script>
</body>
</html>

6. 元素的三个方法：

● 获取属性值：属性值 = element.getAttribute(“属性名”) ● 设置属性值：element.setAttribute(“属性名”, “属性值”) ● 判断是否存在某属性：element.hasAttribute(“属性名”)

<!DOCTYPE html>
<html>
<head>
<title>DOM属性操作示例</title>
</head>
<body>
<!– 示例元素 –>
<img id="my-image" src="placeholder.jpg">
<a id="my-link" href="https://example.com" target="_blank">示例链接</a>

image.setAttribute('alt', '这是一张图片描述');
console.log('新alt:', image.getAttribute('alt'));

// 示例2：检查是否有某属性
let link = document.getElementById('my-link');
if (link.hasAttribute('target')) {
console.log('这个链接有target属性');
}

if (!link.hasAttribute('title')) {
console.log('这个链接没有title属性');
}
</script>
</body>
</html>

7. 动态列表操作

元素的一个方法： ● 删除当前元素：element.remove()

<!DOCTYPE html>
<html>
<body>
<button id="btn">元素</button>
<script>
document.addEventListener("DOMContentLoaded", function(){
document.querySelector("#btn").addEventListener('click', function(e){
e.target.remove();
});
});
</script>
</body>
</html>

8. 简单的DOM动画

移动元素的话就是不断设置 left/right/top/bottom的样式，但 position属性需要设置为 relative 淡入淡出的效果主要是改变元素 opacity的样式。

<!DOCTYPE html>
<html>
<style>
.box{
position:relative;
width: 100px;
height: 100px;
background–color: black;
}
</style>
<body>
<button id="btn1">移动</button>
<div id="box1" class="box"></div>

btn1.addEventListener('click', function() {
pos += 10;
// 要实现这个功能，box的css样式中必须指定了 position 样式，例如：position:relative;
box1.style.left = pos + 'px';
});

let btn2 = document.getElementById('btn2');
let box2 = document.getElementById('box2');
let op = 1;

btn2.addEventListener('click', function() {
op = op === 1 ? 0.3 : 1;
box2.style.opacity = op;

// 设置 CSS 过渡效果，让元素属性变化时产生动画渐变，而不是瞬间变化。
// 让元素的 opacity（透明度）属性在发生变化时，以 0.5 秒的时间平滑过渡（而不是瞬间变化）。
box2.style.transition = 'opacity 0.5s';
});
</script>
</body>
</html>

文章目录

十七、JavaScript使用正则表达式

1. 正则表达式概述

2. 正则表达式语法

2.1 元字符

2.2 字符转义

2.3 重复次数

2.4 字符类

2.5 分支条件

2.6 分组

2.7 反义

3. JS 中使用正则表达式

3.1 JS 中创建正则表达式对象

3.1.1 字面量方式（推荐）

3.1.2 构造函数方式

3.1.3 常用标志（flags）

3.2 正则表达式对象的常用方法

toString() 和 source

test

exec

3.3 实现邮箱地址验证

十八、DOM编程

1.基本DOM查询与修改

2. 创建和添加元素

3. 样式操作

4.表单交互

5. 遍历DOM

6. 元素的三个方法：

7. 动态列表操作

8. 简单的DOM动画

相关推荐

评论抢沙发

评论前必须登录！

热门标签

置顶推荐

热门文章

最新文章

文章目录

十七、JavaScript使用正则表达式

1. 正则表达式概述

2. 正则表达式语法

2.1 元字符

2.2 字符转义

2.3 重复次数

2.4 字符类

2.5 分支条件

2.6 分组

2.7 反义

3. JS 中使用正则表达式

3.1 JS 中创建正则表达式对象

3.1.1 字面量方式（推荐）

3.1.2 构造函数方式

3.1.3 常用标志（flags）

3.2 正则表达式对象的常用方法

toString() 和 source

test

exec

3.3 实现邮箱地址验证

十八、DOM编程

1.基本DOM查询与修改

2. 创建和添加元素

3. 样式操作

4.表单交互

5. 遍历DOM

6. 元素的三个方法：

7. 动态列表操作

8. 简单的DOM动画

相关推荐

评论 抢沙发

评论前必须登录！

热门标签

置顶推荐

热门文章

最新文章

评论抢沙发