JavaScript

于 2024-07-24 08:40:12 发布
阅读量566 收藏 4
点赞数 18
分类专栏： JavaScript笔记 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51644244/article/details/140652244
版权

JavaScript

概念：是运行于浏览器中客户端脚本编程语言，浏览器中js引擎。可以对我们的js代码进行解析,进而在浏览器 中展示出我们想要的效果。
能做什么用：客户端数据计算
客户端表单合法性验证
浏览器**对象的调用
浏览器事件的触发
网页特殊显示效果制作 **

JavaScript基本语法

基本语法组成：

程序是为了模拟现实
注释 变量 运算符 数据类型 流程控制 对象

使用方式

① 引入外部js文件< script src=“路径” >< /script>
②可以写在head标签内；或者之上

注释

//单行注释
/* */多行注释

变量

  1. **概念：**变量是可以通过变量名来访问的，通常是可变的。
  2. **变量的定义和使用：**

声明变量(定义变量)：
** var a = 5;**
**var 声明变量的关键字 **

  3. **变量的命名规范：**

变量命名的规范：
- 硬性规范
1.必须以 字母 _ $ 开头
2.组成变量的字符之间不能有空格
3.不能以 关键字/保留字 作为变量的名字
关键字：在js中具有特殊含义的 单词
var if else for console …
保留字：就是未来的关键字
4.不能出现同名变量
- 软性规范
1.英文有意义 (语义化)
2.遵循 小驼峰 命名法 （推荐使用）
小驼峰：由多个单词组成的变量名字 开头第一个单词的首字母小写 剩余单词的首字母大写
大驼峰：由多个单词组成的变量名字 所有单词开头字母都是大写

输入输出语句

     1. **console.log(内容);**控制台输出
     2. **alert(内容);** 弹框输出
     3. **document.write(内容);** 向文档中写入
     4. **prompt('提示文本',默认值)**; 带有输入框的 弹出框  会把用户输入的值 返回输入的都是字符串类型
     5. **confirm('提示文本')**;带有确定和取消按钮的弹出框  点击确定 返回 true  点击取消 返回 false
  1. typeof   检测数据类型

数据类型 （重点）

     1. **number  数字类型**
     2. **string  字符串类型**

所有的 但凡是 使用 单引号 或者 双引号 包括的 全部都是 字符串

     3. **boolean 布尔类型**
     4. **null    空**

			typeof null == object<br />				历史遗留问题！

     5. **undefined 未定义**

			var e = undefined;<br />				var e;<br />		null和 undefined区别：<br />null:表示此处不应该有值 <br />undefined:表示此处应该有值 但是没有给

运算符

     1. **算术运算符**![](assets/wps3.jpg#id=C7RzQ&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)

wps3.jpg

     2. **赋值运算符**

wps4.jpg

     3. **比较运算符**

wps5.jpg

     4. **逻辑运算符**

//逻辑运算符 一般用于连接多个条件 取出结果
// && 与 当多个条件同时为true 最终结果才为true 全真为真，一假则假
//&& 具有短路功能（如果第一个条件不成立，第二个不会进行判断）
// || 或 当多个条件有一个为true 最终结果为true 一真为真，全假为假
// ! 取反
wps6.jpg

     5. **三元运算符**

let a = 10;<br />			let b = 50;<br />			let c = a < b ? (a == b ? a + b : a - b) : a / b; <br />a == b ? a + b : a - b；a是否等于b如果a等于 b返回a+b的值否则返回a-b的值<br />**数据类型的转换：**<br />Number() / +<br />parseInt()<br />parsefloat()

字符运算的注意事项

当两个运算的数据只要有一个字符串 此时 进行拼接运算 不进行数学运算.
+
1.正常 就是做 数学运算：
** 2.+ 也做 拼接运算
只要参与运算的 两个数据 有一个 是 字符串类型 那么此时进行 拼接运算。
 3. + 数据类型转换**
** + 变量 可以把 字符串类型的数字 转换成 number类型**
** var a = ‘发送到发送到’
//模板字符串**
** //模板字符串中可以写变量 不需要 + 拼接**
** // 表达式大括号中可以直接写表达式进行一些数学运算 ∗ ∗ < b r / > ∗ ∗ 其余数据类型转字符串： ∗ ∗ < b r / > ∗ ∗ 1.5 + ′ ′ 直接把一个数字与一个空字符串拼接就可以 ‘ {表达式} 大括号中可以直接写表达式 进行一些数学运算**<br />**其余数据类型转字符串：**<br />** 1. 5 + '' 直接把一个数字与 一个 空 字符串拼接 就可以 ` 表达式大括号中可以直接写表达式进行一些数学运算∗∗<br/>∗∗其余数据类型转字符串：∗∗<br/>∗∗1.5+′′直接把一个数字与一个空字符串拼接就可以‘{变量}`
 2. String(变量)
 3. 变量.toString()**
parseInt() 取整数部分
parseFloat() 取小数部分

流程控制

概念：执行顺序。我们的程序 从上往下，从右到左 （如果右边是表达式 （左到
作用：控制代码何时执行。控制代码执行多少次。

三种程序结构
  1. **顺序结构：**从上往下，（等式）从右到左 （如果右边是表达式 （左到右））
  2. **分支结构：**控制代码何时执行，是否执行。
  3. **循环结构：**控制代码执行多少次。
分支结构
  1. 单分支

语法格式：
image.png
**执行流程：**当条件表达式①成立时，才会执行代码块。否则：不执行。

  1. 双分支

语法格式：
image.png
**执行流程：**先判断条件表达式①是否成立，如果成立 执行代码块①， 否则，执行代码块②；

  1. 多分支

语法格式：
image.png
**执行流程：**先判断条件表达式①是否成立，如果成立 执行代码块①，
否则 ，判断条件表达式②是否成立，如果成立 执行代码块②
否则 ，判断条件表达式③是否成立，如果成立 执行代码块③
否则 ，判断条件表达式④是否成立，如果成立 执行代码块④
…
一直到 最后一个else 执行最后一个代码块 程序结束。

switch - case

只做等值判断
语法
image.png
执行流程：拿 switch后边括号中的 变量 与 下边的case所对应的值 挨个 比较
** 先比较 值1 如果满足 就执行代码块1 break表示 中断代码执行**
** 如果值1 不满足 接着比较 值2 依次类推**
** 如果所有的case值 都不满足 那么 就进入 default的最终代码块;
 注意：case比较 是 全等 比较**

if else 既可以做等值 判断 更多的可以做区间 判断

switch case 只做 等值判断。

循环控制

while循环

语法：
image.png
循环的四要素：
① 初始化变量
先想清楚 初始化变量 在整个循环过程中 具体的作用是什么？
② 循环条件
③ 循环代码块
** ④ 初始化变量的重新赋值**
注意事项：
while(true/1){}
while(false/0){}
① 初始化变量
** 先想清楚 初始化变量 在整个循环过程中 具体的作用是什么？
 i sum**
** ② 循环条件**
** 一般都是用来控制循环次数的**
** 有些 需要根据 逻辑 需求 分析出 循环的次数**
** ③ 循环代码块**
** 累加求和**
** ④ 初始化变量的重新赋值**

do while

语法：
image.png

for

语法：image.png
外循环执行一次内循环执行多次

break 和continue 的区别

break 中断
- 中断当前所处的循环
- 中断 指定 循环
break 名字;
continue 中断再继续
中断当前所在 这一次 的循环，继续进行下一次

函数/方法，事件，对象

函数/方法

概念：一段具有特定功能的代码块，函数必须调用 才可以执行 ，函数可以被重复调用

函数也可以被另一个函数所调用。

作用：特定功能：开发者根据需求 定制 具有特定功能的函数代码块

分类：

系统函数/库函数/内置函数
	alert()  log()  Number()  parseInt() .....<br />		由 js 内部提供的 具有特定功能的函数，供开发者使用。

自定义函数
	自己按照自己的需求 定以具有特定功能的函数。**	 **<br />**怎么样去定义函数：**<br />**①具名函数**<br />**	function 函数名(参数列表){**<br />**	代码块;**<br />**	return 返回值;（可以没有返回值）**<br />**	}**<br />**②匿名函数**<br />**		var fn = function(){}**<br />**函数参数：**<br />**	- 形参 与 实参 要一一对应**<br />**	- 形参不能同名**<br />**返回值：可以有也可以没有  看需求**<br />**函数运行完毕之后的结果。**<br />**有返回值 可以使用变量接收  否则 接收到 undefined**

封装函数的三要素：

** - 函数名**
** - 参数列表**
** - 返回值 **

函数的调用
  • 直接调用
    函数名();
    - 把函数跟页面中的DOM元素 绑定 由 DOM元素通过事件 去触发函数的执行 直接绑定
    通过 事件 绑定点我
    - 与DOM绑定 匿名函数
    可以先在 js 中 获取到 页面中的DOM元素 然后再操作
    document.getElementById(“id值”);
    document.getElementById(“btn”).onclick = function(){
    console.log(2222);}

事件

概念：事件是可以被控件(标签元素)识别的操作，如按下确定按钮，选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件，如窗体的加载、单击、双击等事件，编辑框（文本框）的文本改变事件，等等。
发生的某件事情。通过html元素触发的事情。

鼠标事件
onclick单击事件
ondblclick双击事件
onmousedown鼠标按下
onmouseup鼠标松开
onmouseover鼠标移入
onmouseout鼠标移出

键盘事件
onkeydown按下
onkeyup松开
onkeypress按下并松开

浏览器事件
onload页面加载完成时触发
onunload页面退出时触发

表单事件
onblur元素失去焦点时触发
onchange该事件在表单元素的内容改变时触发(input keygen,select ,textarea)
onfocus元素获取焦点时触发
oninput元素获取用户输入时触发
onreset表单重置时触发
onsearch用户向搜索域输入文本时触发 ( <input=“search”>)
onselect用户选取文本时触发 ( 和
onsubmit表单提交时触发

总结：
document.body document.documentElement 获取html document.title
这三个比较特殊；别的正常获取；
①表单元素
DOM元素.value disabled required …
表单元素的值操作 都用 value
eg：更改表单元素的值，document.getElementById(“id名称”).value
②非表单元素的 文本 操作：
·innerText:（标签之内的文本）
·innerHTML（标签内的所有东西）
·outerHTML（连标签的所有东西）
eg：更改非表单元素的值，document.getElementById(“id名称”).innerText

数组

数组常识

**概念：**数组：就是用来存储多个数据的，其中的每一个数据 都一个 编号 叫做下标 可以通过下标来区分数组中的数据。数据结构 数组 是 类 每一个 具体的数组 就是一个对象。
使用：1. new Array() 创建一个空数组
**new ** 关键字 用来创建对象
**Array() **构造函数 构建创造
**new Array(6) **创建一个 初始容量 为 6 的空数组
new Array(1,2,3,4,5) 创建一个具有初始数据的 数组
2.字面量创建
var arr = []; 空数组
**var arr = [1,2,3,4,5] **初始数据的数组
数组的取值和赋值
通过下标操作
数组下标：从 0 开始 依次向后排列
取值 var i = arr[下标]
赋值 arr[下标] = 要赋的值
数组的遍历 ：循环遍历
把数组的每个数据 挨个 过一遍
每个数组身上都有一个 length 属性 来表示自身的长度
- 普通 for 循环
 - for in
- for of ES6新增的

数组的 增、删、改、查

查：
指定数据在指定数组中的 下标 位置
增：
在指定数组中 指定数据的前或者后 插入 一个新的数据
(需要考虑的是插入一个数据，后面的数据整体要往后延一位，而且只能从后往前移)
删：
在指定数数组的 删除指定的数据
（需要考虑，把元素删除后，要把空出的位置去除，）

数组的常用方法：

includes（数据）：查找数组是否包含某个数据

用法：数组名.includes(数据)
在数组中查找指定的元素值；如果存在返回true 不存在返回 false
image.png
image.png

indexOf（数据）：查找数组出现’数据’的第一个位置的下标

用法：数组名.indexOf(数据)注意返回值是该数据的下标；若数组中不存在该数据会返回-1
image.png
image.png

lastIndexOf（）：查找数组出现’数据’的最后一个位置的下标

**用法：**数组名.lastIndexOf()
image.png
image.png

pop() ：删除数组的最后以为元素并返回最后一位的值

** 用法：**数组名.pop() 会改变原数组，把最后一个元素删除掉
image.png
image.png

reverse（）：数组反转，头尾调过来

** 用法：**数组名.reverse()
image.png
image.png

slice(a,b); ：从a截取到b前面一位，不包含b

**用法：**数组名.slice(a,b)
image.png
image.png

toString() ：将数组转换成字符串

**用法：**数组名.toString（）
image.png
image.png

every（）：检测数值元素的每个元素是否都符合条件。（特殊）参数是一个回调函数

用法：数组名.every（function( a){ return a }）
image.png

some（）：检测数组元素中是否有元素符合指定条件 （特殊）参数是一个回调函数

用法：数组名.some（function( a){ return a }）
image.png
image.png

filter（）过滤 ：把数组中满足条件的数据 过滤出来 返回一个新数组

用法 ： 数组名.filter（function( a){ return a }）
image.png

forEach（） 作用 与普通for循环一样 就是 普通的遍历

image.png
image.png

from() Array.from() 把一个伪数组 转换成 真数组
		**// 真数组 可以调用数组内置的方法 ，但是伪数组不行！**<br />**			//伪数组 可以被循环遍历  也具有 length属性**

map() 对数组 中的每一个数据 进行二次加工

用法：数组.map(i=>i+10)
//需求 让数组中的每一个数据 都 + 10
image.png
image.png

reduce() 计算数组的数据和

用法： arr.reduce（）
image.png
image.png

sort() 排序

image.png

箭头函数

ES6:新特性 箭头函数
- 箭头函数 只是一种新的写法形式
- 箭头函数都是 匿名函数
- 箭头函数的调用跟普通函数一样
- 箭头函数 如果只有一个参数 小括号 可以省略
- 箭头函数 如果 代码块只有一行 {} 可以省略
- 箭头函数 如果代码块只有一样，且 这一行是返回值 return 可以省略
image.png
image.png

获取页面标签对象的常用方法（一般获取多个是为 伪数组）

document.getElementById(“id值”)//根据id获取标签对象 获取到的是1个

document.getElementsByClassName(“类名”)//根据类名获取相应的标签 多个

接收过来是一个伪数组image.png

document.getElementsByName(“”)// 根据name属性 获取相应的标签 多个 用的少

Tag 标签
document.getElementsByTagName(“”)//根据标签名字 获取相应的标签 多个
**query查询 **
document.querySelector(“.aaa”);//根据选择器获取标签 第1个
image.png
image.png
document.querySelectorAll(“.aaa”);//根据选择器获取标签 全部
image.png

BOM编程

概念：browser object model 浏览器对象模型；
学bom就是学习对浏览器窗口的操作：
我们所学习的内容：主要三大部分：History,Location,DOM
浏览器页面的组成部分：
window 是整个 html页面 的 顶层对象
所有的内容 都是 window的成员
window可以省略。
表示整个浏览器窗口。
history 历史管理对象
location 地址对象
document 文档对象

统一资源占位符/定位符：
www.runoob.com 域名 = IP地址+端口
https://www.runoob.com/jsref/obj-location.html#aaa

http://127.0.0.1:8848/project/02-javascript/js-07/bom.html?name=zhangsan&age=18&address=郑州#aaa
http:// https:// 网络传输协议
127.0.0.1 ip地址 在网络环境中 定位 主机
8848 端口
/project/02-javascript/js-07/ 资源路径
? 分隔符 分隔路径与 表单数据的
name=zhangsan&age=18&address=郑州 发送get请求时 表单的数据。使用 & 连接
#aaa 锚点

Window对象

windows对象的方法：

名称描述
alert显示自定义消息的对话框
confirm显示确认对话框
prompt显示输入对话框
setTimeout 重点经过指定毫秒值后计算表达式，并返回该事件对象
setInterval 重点每过一定时间间隔调用一次指定函数
close关闭当前浏览器窗口

setTimeout(参数一,参数二) 延时器
参数一：回调 函数
参数二：时间 毫秒
迟 一定时间之后 自动 执行 其中的回调函数
clearTimeout() 关闭延时器

var timer = setInterval(参数一,参数二) 定时器
参数一：回调 函数
参数二：时间 毫秒
每隔 一定时间之后 自动 执行 其中的回调函数
clearInterval(timer); 关闭定时器

event 代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态(周围的整体的环境信息！) 事件发生时周围的情况
<button onclick="fn()">点我</button>
		<script>
			function fn(){
				/* 
					event:事件对象
						事件发生时 周围的 环境信息
				 */
				var e = window.event;
				console.log(e);
			}
			
			document.onkeydown = function(e){
				var e = window.event || e;
				console.log(e);
			}
		</script>

image.png

navigator 获取浏览器的相关信息

检测当前的浏览器是移动端还是pc端
image.png

!(function (){
        const useragent = navigator.useragent
    
        const android = useragent.match(/(android);[\s\/]+([\d.]+)?/)
        const iphone = useragent.match(/(iphone\sos)\s([\d_]+)/)
    
        if(android  || iphone) {
        location.href ='http://www.baidu.com'
        }
     })();

history 包含了用户已浏览的 URL 的信息
forward()前进
back()后退
go()go(1) 前进 go(-1)后退 go(0）刷新
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<a href="http://www.baidu.com">百度</a>
			<button onclick="aaa()">前进</button>
			<button onclick="bbb()">后退</button>
			<script type="text/javascript">
				function aaa(){
					//前进
					//window.history.forward();
					//go(1) <==> forward();
					window.history.go(1);
				}
				function bbb(){
					//后退
					//window.history.back();
					//go(-1) <==> back();
					window.history.go(-1);
				}
				function ff(){
					//前进
					//window.history.forward();
					//写几代表前进几个页面
					window.history.go(2);
				}
				function bb(){
					//后退
					//window.history.back();
					window.history.go(-1);
					//写几代表后退几个页面
				}
			</script>
		</body>
</html>

location 包含关于当前 URL 的信息 （拆分保存了URL地址信息 ）
window.location.href改变当前页面的地址（有历史）
window.location.replace()替换当前页面的地址（无历史）
window.location.reload()重新加载当前页面
window.location.assgin()改变当前页面的地址（有历史）
location.search获取URL里？及其后面的值，会自动忽略前面的
location.hash获取URL里#及其后面的值，会自动忽略前面的
<body>
		<button onclick="jump()">点我</button>
		<script type="text/javascript">
			//window可以省略不写
			//window.alert();
			
			//页面跳转  有几种方式？
			/*html中
				1.超链接
				2.form表单
			js中：
				window.location
				ajax
			*/
			function jump(){
				//带有历史
				window.location.href = "http://www.baidu.com";
				//直接替换  没有历史
				window.location.replace("http://www.baidu.com");
				//刷新当前页面
				window.location.reload();
			}
		</script>
	</body>

对Date的理解和用法

使用方法： var 名称 = new Date(); 括号内写开始时间，不写默认获取当前系统时间想要使用下面方法第一步先弄好⬆;(创建Date对象)
名称.getDay() 返回星期几（注意0为周日）
名称.getFullYear() 年
名称.getMonth() 月 注意月0-11；没有12使用时要+1
名称…getDate() 日
名称.getHours() 小时
名称.getMinutes 分钟
名称.getSeconds 秒
名称.getMilliseconds 毫秒

DOM编程

概念：主要是对页面中标签的增删改查。购物车
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中。

学习DOM操作 就是 操作页面中的 标签/节点/元素/标记 的。
增删改查
新增：新增什么？ 各种标签 本来不存在，但是我们又想用， 无中生有！

  1.  造标签   此时没有样式                           创建 
  2.  美化（设置样式，添加内容）               美化 
  3.  将造好的标签 添加到  该添加的地方！添加

删除：删除标签
修改：1.修改样式 2.内容 3. 替换 4.属性
节点标签从哪里来？要把这个节点放到哪里去？
- 节点存在吗？ 创建
- 创建
document.createElement(‘标签名字’)
- 美化
- 内容修饰
- 样式修饰
- 是否存在子元素
- 添加
父元素.appendChild(子元素)

节点新增的三步

**①创建 ：**document.createElement(‘标签名字’)
**②美化 ： **内容样式修饰
**③添加 ： **父元素.appendChild(子元素)

节点操作（标签）

标签节点对象的获取：

get系列
document.getElementById() id名
**document.getElementsByClassName() **根据类名
document.getElementsByName() 不常用 根据name属性
document.getElementsByTagName() 根据标签名
query系列
document.querySelector() 根据选择器 获取 一个
document.querySelectorAll() 根据选择器 获取 全部

增加 操作、
document.createElement(标签名)创建一个节点
父.insertBefore(新标签,哪个标签之前)在哪个标签之前插入节点image.png
父.appendChild(新标签)在父节点的里边追加子节点image.png
cloneNode()复制节点，如果参数为true，还会复制当前节点的子孙节点，否则只复制当前节点。image.png
image.png
image.png

删除操作
父.removeChild（子标签）删除指定的子标签/子节点
image.pngimage.png
自己.remove()删除自身
image.png
image.png

修改操作：
parent.replaceChild(新标签, 旧标签);将父标签中的旧标签用新标签替换掉

image.png
image.png

节点具有的属性 无 （）
childNodes所有直接子节点（文本节点和元素节点）(空格/回车也会获取到)
children所有元素子节点——获取所有的子标签（只获取元素节点）
firstElementChild第一个元素节点
firstChild第一个子节点
lastElementChild最后一个元素节点
lastChild最后一个子节点
parentNode父节点
nextSibling返回当前元素紧跟的下一个同级节点(包含文本/标签等)
nextElementSibling返回指定元素之后的下一个兄弟元素节点（相同节点树层中的下一个元素节点）。
previousSibling返回当前元素上一个节点紧挨着的
previousElementSibling返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）

节点的属性修改
id标签的id属性值
name表单元素的name属性值
classNameclass属性值
innerHTML标签中的所有内容(包含标签)
outerHTML包含标签本身以及标签体
innerText标签中的所有文本内容(不包含标签本身)
getAttribute(“属性名”)获取标签属性
setAttribute(“属性名”,“属性值”)为标签设置属性值
nodeValue节点值 （文本节点的值）

image.png
image.png
nodeType节点类型。1标签节点 2 属性节点 3文本节点
nodeName节点名称

表单验证和正则表达

表单验证

**概念：**表单 收集用户信息，并将信息发送给服务器。信息必须符合才能向后台提交；如果没有JavaScript，此时的数据校验 只能在服务器完成；
后果：浪费资源，浪费时间，降低服务器的效率，降低客户体验度。在js校验数据格式。如果符合格式，可以提交，否则，不能提交。
如果有javaScript : 直接在客户端进行 数据格式的校验，不需要经过后台，也就是说，只要数据能发送到后台，就说明这个数据一定是后台需要的数据
**作用：**验证数据格式，将符合数据标准格式的数据，发送到后台。

字符串的操作 String 对象

内置对象：

Array Date Math Number Boolean Function Object …

string 对象专门用来处理字符串的。
方法描述效果
charAt（）返回指定下标位置的字符image.png
concat()连接两个或更多字符串，并返回新的字符串。image.png
indexOf()*返回某个指定的子字符串值在字符串中首次出现的位置。image.png
includes()*查找字符串中是否包含指定的子字符串。是返回true,否则falseimage.png
lastIndexOf()从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。image.pngimage.png
replace()用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。只会替换首次出现的位置
image.png
slice()提取字image.png符串的片断，并在新的字符串中返回被提取的部分。image.pngimage.png
split()把字符串分割为字符串数组。image.png
startsWith()查看字符串是否以指定的子字符串开头。image.png
image.png
endsWith()查看字符串是否以指定的子字符串结尾。image.png
image.png
*substr(起始索引,提取的长度)从起始索引号提取字符串中指定数目的字符。image.png
image.png
*substring()提取字符串中两个指定的索引号之间的字符。image.pngimage.png
toLowerCase()把字符串转换为小写。
toUpperCase()把字符串转换为大写。
trim()去除字符串两边的空格。只能去除两边的image.png
image.png
toString()返回一个字符串。

正则表达式

概念：

正则表达式，又称规则表达式**。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换**那些符合某个模式(规则)的文本。

使用：

创建：
① 字面量创建
** let reg = /表达式/;
② 构造函数
 let reg = new RegExp(‘a.c’);**

.  匹配任意的单个 字符
\  转义符  让具有特殊作用的符号，失去特殊作用  只保留  本身的符号
[] 表范围区间  [0-9] [a-z] 
    [^0-9] 取反  任意的非数字字符  [^a-z0-9A-Z]除数字 字母 之外任意字符
|  表或者    [1|3|5|7|9]
{} 表位数  {3}  {3,}至少3次   {3,6} 3到6位
*  匹配前边子表达式任意次
+  匹配前边子表达式至少1次
?  匹配前边子表达式0或1次
^  以。。。。开头
$  以。。。。结尾
.匹配任意字符 一位
\转义字符：在正则中有很多符号都有特殊含义，当我们不想使用特殊含义，只需要使用符号本身时，可以使用\转义符。
[]表示范围
{}限定位数 {n}代表匹配n位；{n,}代表至少匹配n位；{n,m}匹配n-m位
*****匹配前边子表达式任意次
+匹配前边子表达式1次或者多次 （大于等于1次）
?匹配前边子表达式0次或者1次
^匹配行首 以 XXX 开头
$匹配末尾 以XXX结尾
|表示或者
()表示一个整体
[^…]不在括号字符范围内的任意字符
\w任何单字字符, 等价于[a-zA-Z0-9]
\W任何非单字字符,等价于[ ^a-zA-Z0-9]
\s任何空白符,等价于[\t \n \r \f \v]
\S任何非空白符,等价于[ ^\ t \ n \ r \ f \ v]
\d任何数字,等价于[0-9]
\D除了数字之外的任何字符,等价于[ ^0-9]
gyhwjy
关注
  • 18
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript
02-10
javascript官方文档，web前端师的权威文档，web前端的
JavaScript JavaScript JavaScript
最新发布
06-26
JavaScript JavaScript JavaScript
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
java小白翻身
10-06 17万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
19 JavaScript学习：调试
百锦再的博客
04-28 7万+
使用控制台：在浏览器的开发工中的控台输入代码实时查看的函数等信息，帮调试程序4. 使用调试工具一些开环境（）或者浏览器插件提供了专门的调试工具，如Chrome DevTools、Firefox Developer Tools等，可以更，开发者可以发的错误，并及时修复，代码质量和开发效率。使用断点：在浏览器的开发者工具中设置断点，当程序执行到断点处时暂停执行，开发者可以查看当前变量的值、调用栈等信息，帮助定位问题。关键字可以手动触发断点，不需要依赖开发者工具中的设置断点功能，方便在代码中灵活地进行调试。
10 JavaScript学习：函数
百锦再的博客
04-23 7万+
使用 function 关键字：// 函数体使用函数表达式：// 函数体使用箭头函数（ES6）：// 函数体// result 等于 5// result 等于 6。
学习JavaScript这一篇就够了
热门推荐
轻松的小希
11-25 76万+
目录第一章 JavaScript简介1.1、JavaScript的起源1.2、JavaScript的组成1.3、JavaScript的特点1.4、JavaScript的使用1.4.1、标签引用1.4.2、文件引用1.5、JavaScript的输出1.5.1、页面输出1.5.2、控制台输出1.5.3、弹出窗口输出1.6、JavaScript的注释1.6.1、单行注释1.6.2、多行注释第二章 JavaScript基础语法2.1、标识符2.2、字面量和变量2.2.1、字面量2.2.2、变量2.3、数据类型2.3
03 JavaScript学习：浏览器中执行 JavaScript
百锦再的博客
04-19 6万+
我比较习惯Chrome浏览器。Chrome 是由 Google 开发的免费网页浏览器，调试代码非常方便。Chrome 官网地址：https://www.google.com/intl/zh-CN/chrome/。
JavaScript详解
weixin_48373085的博客
01-25 2万+
HTML对象，定时器，表单验证，正则表达式
JavaScript简介
wsdhy_的博客
04-02 4456
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言 脚本语言：最开始从 Script 单词翻译过来的。 java、c、c## c++ 都是非脚本语言 脚本和非脚本语言的区别：在于执行方式。 脚本语言：直接浏览器解析执行。 非脚本的：有一个先编译的过程。会生成中间的可执行代码文件。 动态语言：解释执行JavaScript代码的时候才去确定数据的类型。 弱类型语言： 1：变量的类型由实际的数值来确定。任何的变量可以保存任意的数据的类型。 2：不同数据...
26 JavaScript学习：JSON和void
百锦再的博客
05-03 8万+
在 JavaScript 中，JSON 格式是一种常见的数据交换格式，它与 JavaScript 对象有着相似的结构，但在一些细节上有所不同。在 JSON 中，每个键值对由一个名称和一个值组成，名称是一个字符串，值可以是字符串、数字、布尔值、Null、数组或嵌套对象等不同类型的数据。是一个特殊的表达式，通常用于在 href 属性中作为超链接的 URL，以防止页面跳转。在 JavaScript 中，可以使用内置的 JSON 对象提供的方法将 JSON 字符串转换为 JavaScript 对象。
JavaScript实例大全
12-19
这个压缩包“JavaScript实例大全”显然是一份集合了多种JavaScript相关资源的宝典，包括“JavaScript网页设计300例”、“javascript源码大全”以及“jquery 1.7 中文 api 修正版”。 首先，“JavaScript网页设计300...
JAVASCRIPT HashTable
10-31
JAVASCRIPT HashTable
javaScript
08-09
javaScript所能实现屏蔽功能总汇
JavaScript基础
10-22
JavaScript基础
JavaScript学习
08-10
JavaScript学习
JavaScript 正则
04-21
JavaScript 正则
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值