Web APIs - 第6天笔记

最新推荐文章于 2024-11-11 09:45:18 发布
最新推荐文章于 2024-11-11 09:45:18 发布
阅读量604 收藏 4
点赞数 16
文章标签： 前端 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65357520/article/details/139108138
版权

Web APIs - 第6天笔记

目标：能够利用正则表达式完成小兔鲜注册页面的表单验证，具备常见的表单验证能力

  • 正则表达式
  • 综合案例
  • 阶段案例

正则表达式

正则表达式（Regular Expression）是一种字符串匹配的模式（规则）

使用场景：

  • 例如验证表单：手机号表单要求用户只能输入11位的数字 (匹配)
  • 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等

在这里插入图片描述

正则基本使用

  1. 定义规则

    const reg =  /表达式/
    • 其中/ /是正则表达式字面量
    • 正则表达式也是对象

  2. 使用正则

    • test()方法 用来查看正则表达式与指定的字符串是否匹配
    • 如果正则表达式与指定的字符串匹配 ，返回true，否则false
<body>
  <script>
    // 正则表达式的基本使用
    const str = 'web前端开发'
    // 1. 定义规则
    const reg = /web/

    // 2. 使用正则  test()
    console.log(reg.test(str))  // true  如果符合规则匹配上则返回true
    console.log(reg.test('java开发'))  // false  如果不符合规则匹配上则返回 false
  </script>
</body>

元字符

  1. 普通字符:
  • 大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
  • 普通字符只能够匹配字符串中与它们相同的字符。
  • 比如，规定用户只能输入英文26个英文字母，普通字符的话 /[abcdefghijklmnopqrstuvwxyz]/
  1. 元字符(特殊字符）
  • 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
  • 比如，规定用户只能输入英文26个英文字母，换成元字符写法： /[a-z]/
边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

在这里插入图片描述

如果 ^ 和 $ 在一起，表示必须是精确匹配

<body>
  <script>
    // 元字符之边界符
    // 1. 匹配开头的位置 ^
    const reg = /^web/
    console.log(reg.test('web前端'))  // true
    console.log(reg.test('前端web'))  // false
    console.log(reg.test('前端web学习'))  // false
    console.log(reg.test('we'))  // false

    // 2. 匹配结束的位置 $
    const reg1 = /web$/
    console.log(reg1.test('web前端'))  //  false
    console.log(reg1.test('前端web'))  // true
    console.log(reg1.test('前端web学习'))  // false
    console.log(reg1.test('we'))  // false  

    // 3. 精确匹配 ^ $
    const reg2 = /^web$/
    console.log(reg2.test('web前端'))  //  false
    console.log(reg2.test('前端web'))  // false
    console.log(reg2.test('前端web学习'))  // false
    console.log(reg2.test('we'))  // false 
    console.log(reg2.test('web'))  // true
    console.log(reg2.test('webweb'))  // flase 
  </script>
</body>
量词

量词用来设定某个模式重复次数

在这里插入图片描述

注意： 逗号左右两侧千万不要出现空格

<body>
  <script>
    // 元字符之量词
    // 1. * 重复次数 >= 0 次
    const reg1 = /^w*$/
    console.log(reg1.test(''))  // true
    console.log(reg1.test('w'))  // true
    console.log(reg1.test('ww'))  // true
    console.log('-----------------------')

    // 2. + 重复次数 >= 1 次
    const reg2 = /^w+$/
    console.log(reg2.test(''))  // false
    console.log(reg2.test('w'))  // true
    console.log(reg2.test('ww'))  // true
    console.log('-----------------------')

    // 3. ? 重复次数  0 || 1 
    const reg3 = /^w?$/
    console.log(reg3.test(''))  // true
    console.log(reg3.test('w'))  // true
    console.log(reg3.test('ww'))  // false
    console.log('-----------------------')


    // 4. {n} 重复 n 次
    const reg4 = /^w{3}$/
    console.log(reg4.test(''))  // false
    console.log(reg4.test('w'))  // flase
    console.log(reg4.test('ww'))  // false
    console.log(reg4.test('www'))  // true
    console.log(reg4.test('wwww'))  // false
    console.log('-----------------------')

    // 5. {n,} 重复次数 >= n 
    const reg5 = /^w{2,}$/
    console.log(reg5.test(''))  // false
    console.log(reg5.test('w'))  // false
    console.log(reg5.test('ww'))  // true
    console.log(reg5.test('www'))  // true
    console.log('-----------------------')

    // 6. {n,m}   n =< 重复次数 <= m
    const reg6 = /^w{2,4}$/
    console.log(reg6.test('w'))  // false
    console.log(reg6.test('ww'))  // true
    console.log(reg6.test('www'))  // true
    console.log(reg6.test('wwww'))  // true
    console.log(reg6.test('wwwww'))  // false

    // 7. 注意事项： 逗号两侧千万不要加空格否则会匹配失败

  </script>
范围

表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围

在这里插入图片描述

<body>
  <script>
    // 元字符之范围  []  
    // 1. [abc] 匹配包含的单个字符， 多选1
    const reg1 = /^[abc]$/
    console.log(reg1.test('a'))  // true
    console.log(reg1.test('b'))  // true
    console.log(reg1.test('c'))  // true
    console.log(reg1.test('d'))  // false
    console.log(reg1.test('ab'))  // false

    // 2. [a-z] 连字符 单个
    const reg2 = /^[a-z]$/
    console.log(reg2.test('a'))  // true
    console.log(reg2.test('p'))  // true
    console.log(reg2.test('0'))  // false
    console.log(reg2.test('A'))  // false
    // 想要包含小写字母，大写字母 ，数字
    const reg3 = /^[a-zA-Z0-9]$/
    console.log(reg3.test('B'))  // true
    console.log(reg3.test('b'))  // true
    console.log(reg3.test(9))  // true
    console.log(reg3.test(','))  // flase

    // 用户名可以输入英文字母，数字，可以加下划线，要求 6~16位
    const reg4 = /^[a-zA-Z0-9_]{6,16}$/
    console.log(reg4.test('abcd1'))  // false 
    console.log(reg4.test('abcd12'))  // true
    console.log(reg4.test('ABcd12'))  // true
    console.log(reg4.test('ABcd12_'))  // true

    // 3. [^a-z] 取反符
    const reg5 = /^[^a-z]$/
    console.log(reg5.test('a'))  // false 
    console.log(reg5.test('A'))  // true
    console.log(reg5.test(8))  // true

  </script>
</body>
字符类

某些常见模式的简写方式，区分字母和数字

在这里插入图片描述

在这里插入图片描述

替换和修饰符

replace 替换方法，可以完成字符的替换

在这里插入图片描述

<body>
  <script>
    // 替换和修饰符
    const str = '欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神'
    // 1. 替换  replace  需求：把前端替换为 web
    // 1.1 replace 返回值是替换完毕的字符串
    // const strEnd = str.replace(/前端/, 'web') 只能替换一个
  </script>
</body>

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等

  • i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
  • g 是单词 global 的缩写，匹配所有满足正则表达式的结果
<body>
  <script>
    // 替换和修饰符
    const str = '欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神'
    // 1. 替换  replace  需求：把前端替换为 web
    // 1.1 replace 返回值是替换完毕的字符串
    // const strEnd = str.replace(/前端/, 'web') 只能替换一个

    // 2. 修饰符 g 全部替换
    const strEnd = str.replace(/前端/g, 'web')
    console.log(strEnd) 
  </script>
</body>

正则插件

在这里插入图片描述

change 事件

给input注册 change 事件，值被修改并且失去焦点后触发

判断是否有类

在这里插入图片描述

元素.classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false

onsole.log(strEnd)

~~~

正则插件

[外链图片转存中…(img-ZfO9ItUT-1716341339900)]

change 事件

给input注册 change 事件，值被修改并且失去焦点后触发

判断是否有类

[外链图片转存中…(img-bVE6UsvI-1716341339900)]

元素.classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false

敲代码的小李同学
关注
Web APIs - 第6天笔记（黑马笔记）
weixin_53720617的博客
10-27 887
表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围。过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符。是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。g 是单词 global 的缩写，匹配所有满足正则表达式的结果。如果正则表达式与指定的字符串匹配 ，返回。
WebAPIs-第05天笔记
一个前端开发者
04-19 710
元素偏移量 offset 系列、offset 概述、offset 与 style 区别 、案例：获取鼠标在盒子内的坐标、 案例：模态框拖拽案例：仿京东放大镜🔥、 元素可视区 client 系列🔥、淘宝 flexible.js 源码分析🔥、元素滚动 scroll 系列🔥、scroll 概述🔥、 页面被卷去的头部🔥、案例：仿淘宝固定右侧侧边栏🔥、页面被卷去的头部兼容性解决方案🔥、mouseenter 和mouseover的区别🔥、动画函数封装🔥动画实现原理 动画函数给不同元素记录不同定时器
WebAPIs-第01天笔记
一个前端开发者
04-13 729
Web APIs 和 Js基础的关联性、JS 基础阶段以及 Web APIs 阶段 、API的概念、 什么是DOM、DOM树、 获取元素、 根据ID获取、 根据标签名获取某类元素、H5新增获取元素方式、获取特殊元素、事件基础、事件概述、事件三要素、执行事件的步骤、 分析事件三要素、常见的鼠标事件、操作元素、### 改变元素内容（获取或设置） 、innerText和innerHTML的区别、元素的常用属性操作、表单元素的属性操作、获取属性的值、样式属性操作、 显示隐藏文本内容通过操作className属性
WebAPIs-第02天笔记
一个前端开发者
04-13 677
排他操作、 排他思想(算法)、案例：百度换肤 、案例：表格隔行变色 、## 案例：全选、自定义属性操作、获取属性值、设置属性值、移出属性、案例：tab栏、H5自定义属性、节点操作、节点概述、节点层级、父级节点、 子节点、所有子节点、子元素节点、第1个子节点、最后1个子节点、第1个子元素节点、最后1个子元素节点、 案例：新浪下拉菜单 、兄弟节点、上一个兄弟节点、下一个兄弟节点、下一个兄弟元素节点（有兼容性问题）、上一个兄弟元素节点（有兼容性问题）、创建节点、添加节点、案例：简单版发布留言 、
Web APIs - 第4天笔记（黑马笔记）
weixin_53720617的博客
10-23 740
在已有的 DOM 节点中插入新的 DOM 节点时，需要关注两个关键因素：首先要得到新的 DOM 节点，其次在哪个位置插入这个节点。回顾之前 DOM 的操作都是针对元素节点的属性或文本的，除此之外也有专门针对元素节点本身的操作，如插入、复制、删除、替换等。DOM 树中的任意节点都不是孤立存在的，它们要么是父子关系，要么是兄弟关系，不仅如此，我们可以依据节点之间的关系查找节点。删除现有的 DOM 节点，也需要关注两个因素：首先由父节点删除子节点，其次是要删除哪个子节点。
WebAPIs-第06天笔记
一个前端开发者
04-20 399
学习目标:：能够封装简单动画函数、能够理解缓动动画的封装、能够使用动画函数、动画函数封装、能够写出网页轮播图案例、能够写出移动 缓动效果原理 、动画函数多个目标值之间移动、动函数添加回调函数、常见网页特效案例、网页轮播图、实现鼠标经过轮播图，左右按钮显示，离开隐藏、实现动态生成底部小圆圈、底部小圆圈之排他思想、点击小圆圈滚动图片、点击右侧按钮一次，就让图片滚动一张、克隆第一张图片点击右侧按钮， 小圆圈跟随变化、自动播放功能、节流阀、 案例：返回顶部、筋头云案例、触屏事件概述 、触摸事件对象、移动端拖动元素
WebAPIs-第07天笔记
一个前端开发者
04-22 679
WebAPIs笔记 地址 🔥WebAPIs第一天 https://blog.csdn.net/weixin_46862327/article/details/124139754 🔥WebAPIs第二天 https://blog.csdn.net/weixin_46862327/article/details/124154254 🔥WebAPIs第三天 https://blog.csdn.net/weixin_46862327/article/details/124201245 🔥...
WebAPIs-第03天笔记
一个前端开发者
04-15 282
节点操作、删除节点、 案例：删除留言、复制节点、案例：动态生成表格、 创建元素的三种方式、innerTHML和createElement效率对比、DOM的核心总结、 创建、增加、删、改、查、属性操作、事件操作、事件高级、注册事件（2种方式）、、 事件监听、 事件监听兼容性解决方案、删除事件（解绑事件）、删除事件兼容性解决方案、 DOM事件流、事件冒泡、事件捕获、事件对象、事件对象的使用、事件对象的属性和方法、e.target 和 this 的区别、 阻止默认行为、 阻止事件冒泡、事件委托、 事件委托的原理
WebAPIs-第04天笔记
一个前端开发者
04-16 846
常用的键盘事件、键盘事件、键盘事件对象、模拟京东按键输入内容、模拟京东快递单号查询、BOM、什么是BOM、BOM的构成、顶级对象window、window对象的常见事件、页面（窗口）加载事件、调整窗口大小事件、定时器（两种）、setTimeout()、开启定时器、停止定时器、setInterval() 、开启定时器、案例：倒计时、停止定时器、this指向问题、URL、location 对象的属性、获取URL参数、navigator对象、history对象、 JS执行机制、同步任务和异步任务、JS执行机制（事
JS-WebAPIs-DOM基础
Fky_mie的博客
03-07 992
JS-WebAPIs第1天-DOM 参考: pink老师JS基础 JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新） MDN-Web API接口参考 文档对象模型 文章目录JS-WebAPIs第1天-DOMWeb APIs 和JS基础的关联性一. 什么是DOM(Document Object Model)二. 事件-获取页面元素当事件源2.1 document.getElementById()根
WebApis学习笔记 更新完毕 2022最新黑马程序员
专注于 前端开发 知识分享
07-20 2041
黑马程序员WebApis学习笔记-复习笔记
Web API - day01【笔记+代码】
weixin_41700993的博客
06-13 707
文章目录1. Web APIs 和 JS 基础关联性2. API 和 Web API1. DOM 简介2. 获取元素01 - getElementById获取元素02 - getElementsByTagName获取某些元素03 - H5新增获取元素方式04 - 获取特殊元素3. 事件基础05 - 事件三要素06 - 执行事件步骤4. 操作元素07 - 操作元素之改变元素内容08 - innerText和innerHTML的区别09 - 操作元素之修改元素属性 1. Web APIs 和 JS 基础关联性
前端学习笔记 - Web APIs(DOM) 文档对象模型
fengxm0309的博客
10-11 673
Web APIs 和 JS API API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能 Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM ) 主要是针对于浏览
【学习笔记】「Web APIs」JavaScript进阶
weixin_44802075的博客
08-27 383
前言 1.1 JS的组成 1.2 JS基础阶段及Web APIs阶段 2.1 API 2.2 Web API 2.3 API和Web API总结 一、DOM 1、DOM简介 1.1、什么是DOM 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 1.2...
前端 Flex 布局语法详解
ning的博客
11-10 919
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
@RestController 源码解读：解决 Web 开发中 REST 服务的疑难杂症
最新发布
狼堡灰太狼的博客
11-11 474
这里可以理解成，注解MyInterface2的value属性重写了注解MyInterface1的value属性，但重新的属性的返回类型必须相同。可以看出对于value这个属性来说，@Configuration注解中的值会重写@Component的value属性值，这有点像类之间的继承，子类可以重父类的方法。达到 @MyInterface1(value2="number1") 和 @MyInterface1(value1="number1") 的效果相同。JDK 17 引入 records 新特性。
【Java Web】JSP实现数据传递和保存（上）九大内置对象 request
m0_66584716的博客
11-07 935
JSP（JavaServer Pages）提供了九个内置对象，这些对象在JSP页面中可以直接使用，无需显式声明。这些内置对象提供了对请求、响应、会话等常用功能的访问，使得开发者可以更方便地处理Web应用程序中的各种任务。
基于 SpringBoot 实现QQ邮箱验证码注册功能
2301_79201049的博客
11-06 677
找到并开通以下的邮件协议服务，而且服务开启也较为简单，需要我们发送一个短信到指定的号码，开启后平台会提供一个授权码，一定要记住这个授权码，发邮件的时候需要这个。host 是根据服务主机区分，网易邮箱是 smtp.163.com, qq邮箱是 smtp.qq.com。其中的 username 是你第一步中操作的邮箱账号，nickname 是接收者收到邮件中显示的发件人。发送邮件的核心依赖是 mail ，由于该项目还涉及其他依赖就全都导进来了。（1）首先打开QQ邮箱，点击设置并来到账号页面。
Mybatis拦截器中获取@RequestBody表单的值修改查询SQL
十二的博客
11-06 491
Slf4j/*** 存储body数据的容器*/// 将body数据存储起来try {try {= null) {if (reader!
Python库googleapis-artman-0.5.7下载指南
资源摘要信息: "PyPI 官网下载 | googleapis-artman-0.5.7.tar.gz" 是一款Python库，全名为googleapis-artman-0.5.7.tar.gz，该资源来自pypi官网。PyPI（Python Package Index）是Python的官方软件包索引，类似于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值