【H2O2|全栈】JS进阶知识(三)jQuery(3)

目录

前言

开篇语

准备工作

$ 拷贝

浅拷贝和深拷贝

节点拷贝

$ 正则表达式

概念

创建

正则校验

匹配条件

边界符

范围匹配

量词

值类型

字符串正则匹配替换

$ 遍历

结束语


前言

开篇语

本系列博客主要分享JavaScript的进阶语法知识,本期为第三期,主要分享的内容为:jQuery拷贝、正则表达式和遍历。

从进阶部分开始,我们将脱离原生的JS,使用一些包装的第三方库来完成我们的需求。这些JS库需要在文档的开头引入,暂时的引入格式为script标签加src地址。

与基础部分的语法相比,进阶部分的语法会有较大的差别,注意最好不要混用原生方法与第三方库内容,以免出现不必要的麻烦。

准备工作

软件:【参考版本】Visual Studio Code

插件(扩展包):Open in browser, Live Preview, Live Server, Tencent Cloud AI Code Assistant, htmltagwrap

提示:在不熟练的阶段建议关闭AI助手

第三方JS库:jquery.min.js

提示:请站内搜索下载、引入方式

浏览器版本:Chrome

系统版本: Win10/11/其他非Windows版本

$ 拷贝

浅拷贝和深拷贝

根据变量类型的不同,复制变量通常有两种方式—— 浅拷贝深拷贝

就浅拷贝而言,它的形式上类似下面这样——

var a = 'aaa'

var b = a

它只能复制栈内存中的内容,于是在复制时会出现下面两种状况——

  • 对于字面量类型的数据,由于它只存储在栈内存中,所以直接复制本身
  • 而对于引用类型的数据,栈内存里只存储堆内存中实际存储数据的地址,所以实质上是地址被复制了,两个变量实际上还是在对同一组数据进行操作

如果想要真正复制引用类型的数据,则需要使用深拷贝,即将堆内存中的数据复制一份,存到新的地址中。

$提供的深拷贝方法形式如下——

$.extend(true, targetObj, obj)

可以实现把obj复制一份新的数据,存储到targetObj中。该方法需要使用最高级节点$调用。 

节点拷贝

$提供了将元素节点拷贝的方法clone(),又叫节点克隆。该方法直接返回复制之后的新节点。

如果不填参数,则只复制元素节点,不复制该节点绑定的事件。

填写参数true,则新的节点还可以具有原节点绑定事件。 

$ 正则表达式

概念

正则表达式是一种用于匹配和操作文本的强大工具,它是由一系列字符和特殊字符组成的模式,用于描述要匹配的文本模式。

正则表达式可以在文本中查找、替换、提取和验证特定的模式。

创建

创建正则表达式有两种方式——使用 RegExp 对象的构造函数创建和通过字面量创建。

调用构造函数创建正则表达式示例——

var reg1 = new RegExp (/xxx/)

var reg2 = RegExp(/xxx/)

使用字面量创建示例——

var reg3 = /xxx/ 

其中xxx代表正则匹配条件。

正则校验

当我们拿到正则表达式之后,我们就可以对指定的字符串进行正则校验,如果符合正则表达式的条件,则返回true。

正则校验的格式如下——

正则表达式.test('待校验字符串')

注意,正则校验是区分大小写的。 

匹配条件

边界符

表达式作用
/abc/包含abc的字符串可通过
/^abc/以abc开头的字符串可通过
/abc$/以abc结尾的字符串可通过
/^abc$/只能匹配字符串abc

范围匹配

[] 表示有一系列字符可供选择,只要匹配[]里的任意一个字符即可。

表达式作用
/[abc]/包含a, b, c中的任意字符即可通过
/^[abc]/首字母为a, b, c中的任意字符即可通过
/[a-z]/包含a到z中的任意字符即可通过
/^[a-z]$/包含a到z中的任意字符即可通过,但是只能匹配一个

^[a-zA-Z0-9]$

包含大小写、数字中的任意字符即可通过,但是只能匹配一个

量词

量词符用来设定某个模式出现的次数,简单来说就是指定条件重复出现多少次。

表达式作用

/^a*$/

字符a重复0次或多次
/^a+$/字符a重复1次或多次
/^a?$/字符a重复0次或1次
/^a{num}$/字符a重复num次

/^a{num,}$/

字符a重复num次即以上
/^a{start, end}$/字符a重复[start, end]次

值类型

我们还可以用值类型来判断字符是否为某一类字符。

值类型作用
\d判断是否为十进制数字
\D判断非数字
\w判断是否为十进制数字、大小写字母或下划线
\W判断除\w之外的字符
\s判断空白字符(空格,tab,换页符等)
\S判断非空白字符

字符串正则匹配替换

replace() 方法用于把字符串中正则匹配通过的字符串替换为目标字符串。

使用方式如下——

原字符串.replace(正则表达式, 替换字符串)

$ 遍历

之前我们知道,对一个元素进行遍历,有三种方式——for-i,for-in,for-of。

比如,我们对一个数组元素arr进行遍历,可以这么做——

for (var i = 0; i < arr.length; i++) { } // i为索引

for (var i in arr) { } // i为索引

for (var item of arr) { } // item为元素

现在,$也提供了一种遍历方法each(),该方法由最高级节点$调用。 

采用该方式遍历数组,类似下面的格式——

$.each(arr, function(i, item) { })

其中i为索引,item为元素。

当然,该方式也可以用于遍历对象,类似下面的格式——

$.each(obj, function(key, value) { }) 

其中key为属性,value为值。 

结束语

本期内容到此结束。关于本系列的其他博客,可以查看我的JS进阶专栏。

在全栈领域,博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历,然后把自己领悟到的一些东西总结一下,分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的,一些定义性的文字加入了笔者自己的很多理解在里面,所以仅供参考。如果有说的不对的地方,还请谅解。

==期待与你在下一期博客中再次相遇==

——临期的【H2O2】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/58798.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

flask+celery处理异步任务

celery是一个强大的分布式任务队列&#xff0c;在这里我们介绍一下它最基本的处理异步任务的功能&#xff0c;包含以下几个&#xff1a; 创建Celery实例 创建一个异步任务 查询异步任务的信息 取消异步任务 使用的环境是flask3.0Celery5.4 1. 创建Celery实例 celery通过…

巨好看的登录注册界面源码

展示效果 源码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"widthdevic…

Redis-发布/订阅交互模式

文章目录 一、消息代理介绍二、Redis中客户端、服务器之间的交互模式介绍三、Redis发布/订阅交互模式的操作 一、消息代理介绍 “消息代理”&#xff08;Message Broker&#xff09;是一种软件组件&#xff0c;它在不同的应用程序之间传递消息。在Redis的上下文中&#xff0c;…

利用Kubernetes原生特性实现简单的灰度发布和蓝绿发布

部分借鉴地址: https://support.huaweicloud.com/intl/zh-cn/bestpractice-cce/cce_bestpractice_10002.html 1.原理介绍 用户通常使用无状态负载 Deployment、有状态负载 StatefulSet等Kubernetes对象来部署业务&#xff0c;每个工作负载管理一组Pod。以Deployment为例&#x…

SpringBoot集成Shiro+Jwt+Redis

概述 首先需要知道为什么使用 ShiroJwtRedis 进行登录认证和权限控制。 1. 为什么用Shiro&#xff1f; 主要用的是 shiro 里面的登录认证和权限控制功能。 2. 为什么用Jwt&#xff1f; Shiro 默认的 Session 机制来帮助实现权限管理&#xff0c;用于维护用户的状态信息。而 …

Docker Compose --- 管理多容器应用

用于定义和运行多容器 Docker 应用程序。通过 Compose&#xff0c;用户可以使用 YAML 文件来配置应用程序的服务、网络和卷等资源 简化多容器的管理和部署过程 以下compose.yaml示例展示如何部署两个服务WordPress 和 MySQL的环境 version: 3.8 # 指定 Docker Compose 文件的…

18.04Ubuntu遇到Unable to locate package

解决办法&#xff1a; 要先升级你的apt Sudo apt-get update

Django ORM详解:外键使用(外键逻辑关联)与查询优化

Django数据库迁移 # 创建迁移 python manage.py makemigrations your_app_name # 应用迁移 python manage.py migrate # 查看迁移状态 python manage.py showmigrations # 回滚迁移 python manage.py migrate your_app_name 0001 # 修改表后,删除迁移记录和表删除迁移记录后重…

redis做缓存,mysql的数据怎么与redis进行同步(双写一致性)

基于业务做选择,强一致性和允许延迟再加消息队列 强一致性:当修改了数据库的数据同时更新缓存的数据,缓存和数据库的数据保持一致 读操作:缓存命中,直接返回数据,缓存没有命中,查询数据库,写入缓存,设定过期时间 写操作:延迟双删 :先删除缓存,修改数据库,等待延迟(数据库主从节…

《安全基石:等保测评的全方位解读》

在数字化转型的浪潮中&#xff0c;网络安全已成为企业生存与发展的核心议题。等保测评&#xff0c;作为我国网络安全等级保护制度的重要组成部分&#xff0c;不仅是企业安全的基石&#xff0c;更是推动企业高质量发展的关键。本文将全面解读等保测评的内涵、作用及其对企业的深…

(五)Spark大数据开发实战:灵活运用PySpark常用DataFrame API

目录 一、PySpark 二、数据介绍 三、PySpark大数据开发实战 1、数据文件上传HDFS 2、导入模块及数据 3、数据统计与分析 ①、计算演员参演电影数 ②、依次罗列电影番位前十的演员 ③、按照番位计算演员参演电影数 ④、求每位演员所有参演电影中的最早、最晚上映时间及…

一些CSS的基础知识点

写在前面 Cascading Style Sheets&#xff08;CSS&#xff09;是用于描述网页样式和布局的标记语言。它允许开发者将内容与表示分离&#xff0c;从而使得网页的设计和结构更加清晰和易于维护。本文将详细介绍CSS的基础知识点&#xff0c;帮助初学者快速掌握CSS的核心概念和应用…

SpringFactoriesLoader

1.什么是SPI (面试题) SPI全名Service Provider interface&#xff0c;翻译过来就是“服务提供接口”&#xff0c;再说简单就是提供某一个服务的接口&#xff0c; 提供给服务开发者或者服务生产商来进行实现。 Java SPI 是JDK内置的一种动态加载扩展点的实现。 这个机制在一…

Apifox 10月更新|测试步骤支持添加脚本和数据库操作、测试场景支持回收站、变量支持「秘密」类型

Apifox 新版本上线啦&#xff01; 看看本次版本更新主要涵盖的重点内容&#xff0c;有没有你所关注的功能特性&#xff1a; 自动化测试模块能力持续升级 测试步骤支持添加「脚本」和「数据库操作」 测试场景和定时任务支持回收站内恢复 定时任务支持设置以分钟频率运行 导入…

「C/C++」C++标准库之#include<fstream>文件流

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「C/C」C/C程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…

liunx网络套接字 | 实现基于tcp协议的echo服务

前言&#xff1a;本节讲述linux网络下的tcp协议套接字相关内容。博主以实现tcp服务为主线&#xff0c;穿插一些小知识点。以先粗略实现&#xff0c;后精雕细琢为思路讲述实现服务的过程。下面开始我们的学习吧。 ps&#xff1a;本节内容建议了解网络端口号的友友们观看哦。 目录…

第十六课 Vue中的组件

Vue中的组件 Vue中可以自定义模板组件&#xff0c;组件的写法有很多种 组件写法 1&#xff09;在components上拓展组件 <div id"app"><test></test></div><script>new Vue({el:#app,components: {test: {template: <h1>这是一…

nmcli、ip、ifcfg配置网络区分方法

文章目录 一、检查NetworkManager状态使用nmcli命令&#xff1a;检查NetworkManager服务状态&#xff1a; 二、检查ip命令的使用三、检查ifcfg文件查看/etc/sysconfig/network-scripts/目录&#xff1a;查看/etc/network/interfaces文件&#xff08;针对Debian系&#xff09;&a…

redis详细教程(5.AOP和RDB持久化)

AOF&#xff08;Append Only File&#xff09;日志和RDB&#xff08;Redis Database Backup&#xff09;持久化是Redis中两种重要的数据持久化机制。 RDB持久化机制原理RDB是Redis提供的一种数据快照保存机制&#xff0c;它将某个时间点的数据库状态保存到一个RDB文件中。这个…

uni-app 运行HarmonyOS项目

1. uni-app 运行HarmonyOS项目 文档中心 1.1. HarmonyOS端 1.1.1. 准备工作 &#xff08;1&#xff09;下载DevEco Studio开发工具。   &#xff08;2&#xff09;在 DevEco Studio 中打开任意一个项目&#xff08;也可以新建一个空项目&#xff09;。   &#xff08;3&…