han_JavaScript

最新推荐文章于 2024-06-28 16:20:01 发布
最新推荐文章于 2024-06-28 16:20:01 发布
阅读量248 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43616155/article/details/106171205
版权

JavaScript

  • typeof 操作符
实例返回值
typeof "John"string
typeof 3.14number
typeof NaNnumber
typeof falseboolean
typeof [1,2,3,4]object
typeof {name:'John', age:34}object
typeof new Date()object
typeof function () {}function
typeof myCarundefined (如果 myCar 没有声明)
typeof nullobject
  • constructor 属性
实例返回构造函数
"John".constructorString() { [native code] }
(3.14).constructorNumber() { [native code] }
false.constructorBoolean() { [native code] }
[1,2,3,4].constructorArray() { [native code] }
{name:'John', age:34}.constructorObject() { [native code] }
new Date().constructorDate() { [native code] }
function () {}.constructorFunction(){ [native code] }

正则表达式

  1. search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
//使用正则表达式搜索 "Runoob" 字符串，且不区分大小写：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>搜索字符串 "runoob", 并显示匹配的起始位置：</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var str = "Visit Runoob!"; 
    var n = str.search(/Runoob/i);
    document.getElementById("demo").innerHTML = n;
}
</script>

</body>
</html>

/search 方法可使用字符串作为参数。字符串参数会转换为正则表达式： 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>搜索字符串 "Runoob", 并显示匹配的起始位置：</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var str = "Visit Runoob!"; 
    var n = str.search("Runoob");
    document.getElementById("demo").innerHTML = n;
}
</script>

</body>
</html>
  1. replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
//使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>替换 "microsoft" 为 "Runoob" :</p>
<button onclick="myFunction()">点我</button>
<p id="demo">Visit Microsoft!</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace(/microsoft/i,"Runoob");
    document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

//replace() 方法将接收字符串作为参数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>替换 "Microsoft" 为 "Runoob" :</p>
<button onclick="myFunction()">点我</button>
<p id="demo">请访问 Microsoft!</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace("Microsoft","Runoob");
    document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>
  • 正则表达式修饰符
修饰符描述
i执行对大小写不敏感的匹配。
g执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m执行多行匹配。
  • 正则表达式模式
表达式描述
[abc]查找方括号之间的任何字符。
[0-9]查找任何从 0 至 9 的数字。
(x|y)查找任何以
  • 元字符
元字符描述
\d查找数字。
\s查找空白字符。
\b匹配单词边界。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

什么是 RegExp？

  1. 正则表达式是描述字符模式的对象。正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
  2. 语法：var patt=new RegExp(pattern,modifiers); 或者更简单的方式: var patt=/pattern/modifiers;
  3. 参数：pattern（模式） 描述了表达式的模式；modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配；
  4. 注意：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。
  5. 例如：var re = new RegExp("\\w+"); 等价于 var re = /\w+/;

修饰符：用于执行区分大小写和全局匹配

修饰符描述
i执行对大小写不敏感的匹配。
g执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m执行多行匹配。

方括号:用于查找某个范围内的字符

表达式描述
[abc]查找方括号之间的任何字符。
[^abc]查找任何不在方括号之间的字符。
[0-9]查找任何从 0 至 9 的数字。
[a-z]查找任何从小写 a 到小写 z 的字符。
[A-Z]查找任何从大写 A 到大写 Z 的字符。
[A-z]查找任何从大写 A 到小写 z 的字符。
[adgk]查找给定集合内的任何字符。
[^adgk]查找给定集合外的任何字符。
(red|blue|green)查找任何指定的选项。

元字符

元字符描述
.查找单个字符，除了换行和行结束符。
\w查找单词字符。
\W查找非单词字符。
\d查找数字。
\D查找非数字字符。
\s查找空白字符。
\S查找非空白字符。
\b匹配单词边界。
\B匹配非单词边界。
\0查找 NULL 字符。
\n查找换行符。
\f查找换页符。
\r查找回车符。
\t查找制表符。
\v查找垂直制表符。
\xxx查找以八进制数 xxx 规定的字符。
\xdd查找以十六进制数 dd 规定的字符。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词描述
n+匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”。
n*匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。
n?匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。
n{X}匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。
n{X,}X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
n{X,Y}X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。
n$匹配任何结尾为 n 的字符串。
^n匹配任何开头为 n 的字符串。
?=n匹配任何其后紧接指定字符串 n 的字符串。
?!n匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象方法

方法描述
compile在 1.5 版本中已废弃。 编译正则表达式。
exec检索字符串中指定的值。返回找到的值，并确定其位置。
test检索字符串中指定的值。返回 true 或 false。
toString返回正则表达式的字符串。

支持正则表达式的 String 对象的方法

方法描述
search检索与正则表达式相匹配的值。
match找到一个或多个正则表达式的匹配。
replace替换与正则表达式匹配的子串。
split把字符串分割为字符串数组。

RegExp 对象属性

属性描述
constructor返回一个函数，该函数是一个创建 RegExp 对象的原型。
global判断是否设置了 “g” 修饰符
ignoreCase判断是否设置了 “i” 修饰符
lastIndex用于规定下次匹配的起始位置
multiline判断是否设置了 “m” 修饰符
source返回正则表达式的匹配模式
  • JavaScript 表单验证
    1. 必填（或必选）项目

自定义验证方法

function validateForm()
{
  var x=document.forms["myForm"]["fname"].value;
  if (x==null || x=="")
  {
    alert("姓必须填写");
    return false;
  }
}

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
  alert("姓必须填写");
  return false;
  }
}
</script>
</head>
<body>
	
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
	
</body>
</html>
  1. E-mail 验证

自定义验证方法

function validateForm(){
  var x=document.forms["myForm"]["email"].value;
  var atpos=x.indexOf("@");
  var dotpos=x.lastIndexOf(".");
  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
    alert("不是一个有效的 e-mail 地址");
    return false;
  }
}

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function validateForm(){
	var x=document.forms["myForm"]["email"].value;
	var atpos=x.indexOf("@");
	var dotpos=x.lastIndexOf(".");
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
		alert("不是一个有效的 e-mail 地址");
  		return false;
	}
}
</script>
</head>
<body>
	
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
	
</body>
</html>
  • JavaScript 计时事件
  1. setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
    - 语法:window.setInterval("javascript function",milliseconds);
    - 注意：window.setInterval()方法可以不使用 window 前缀，直接使用函数setInterval()
    - 参数： 第一个参数是函数（function）；第二个参数间隔的毫秒数

实例：显示当前时间

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>在页面显示一个时钟</p>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
	var d=new Date();
	var t=d.toLocaleTimeString();
	document.getElementById("demo").innerHTML=t;
}
</script>

</body>
</html>

如何停止执行?

  • clearInterval() 方法用于停止 setInterval() 方法执行的函数代码
  • 语法：window.clearInterval(intervalVariable)
  • 注意：window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量;

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>页面上显示时钟：</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
	var d=new Date();
	var t=d.toLocaleTimeString();
	document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
	clearInterval(myVar);
}
</script>

</body>
</html
  1. setTimeout() - 在指定的毫秒数后执行指定代码。
    - 语法：window.setTimeout("javascript function", milliseconds);

如何停止执行?
- clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
- 语法：window.clearTimeout(timeoutVariable)

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击第一个按钮等待3秒后出现"Hello"弹框。</p>
<p>点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。</p>
<button onclick="myFunction()">点我</button>
<button onclick="myStopFunction()">停止弹框</button>
<script>
var myVar;
function myFunction(){
	myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){
	clearTimeout(myVar);
}
</script>

</body>
</html>

Location 对象

  1. Location 对象包含有关当前 URL 的信息。
  2. Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。
  3. 注意： 没有应用于Location对象的公开标准，不过所有浏览器都支持该对象。

Location 对象属性

属性描述
hash返回一个URL的锚部分（从 # 号开始的部分）。
host返回一个URL的主机名和端口
hostname返回URL的主机名
href返回完整的URL
pathname返回的URL路径名。
port返回一个URL服务器使用的端口号
protocol返回一个URL协议
search返回一个URL的查询部分

Location 对象方法

方法说明
assign()载入一个新的文档
reload()重新载入当前文档
replace()用新的文档替换当前文档

Cookie

  1. 意义：用于存储web页面的用户信息
    - 当web服务器向浏览器发送web页面时，在连接关闭后，服务端不会记录用户的信息。CooKie的作用就是用于解决如何记录客户端的信息
  2. 存储：cookie以键值对方式存储
  3. 使用：当浏览器从服务器上请求web页面时，属于该页面的cookie会被添加到该请求中。服务端通过这种方式来获取用户信息
黄盖哥哥
关注
专栏目录
JavaScript的构造函数
Yangzijiand的博客
03-27 1583
构造函数是什么？ 创建一个构造函数，专门用来创建Cat对象。 1.怎么用： 构造函数（Constructor）的创建方式和普通函数一样，但通常首字母进行大写，用于和普通函数区分，构造函数和普通函数的区别就是调用方式的不同，普通函数是直接调用，而构造函数需要使用new关键字来调用 例子： 2.返回值： (1) 没有手动添加返回值，默认返回 this (2) 手动添加一个基本数据类型的返回值，最终还是返回 this (3) 手动添加一个复杂数据类型(对象)的返回值，最终返回该对象 如果指定
Han_book
03-04
除了基本的HTML结构，CSS（层叠样式表）和JavaScript常被用来增强用户体验，如调整字体、颜色、布局，以及实现交互式功能，比如搜索、高亮显示关键词、动态加载内容等。 另一方面，HTML也可以用于学术研究中的数据...
py---web学习笔记05(JS)
weixin_42569562的博客
09-04 164
一、ECMAScript基本语法 1.js中的语句 1.1while语句和do-while语句 语法： while语句 初始化表达式； while（条件表达式）{ ​ 循环体； ​ 循环之后的操作表达式； } do-while语句 初始化 表达式； do{ ​ 循环体； ​ 循环之后的操作表达式； }while(条件表达式)； 代码演示： &lt;!DOCTY...
JavaScript构造函数
torino999的博客
03-16 4556
1、什么是构造函数，2、构造函数的作用，3、构造函数的执行流程。什么是构造函数 构造函数（Constructor）的创建方式和普通函数一样。但通常首字母进行大写，用于和普通函数区分。 但是当一个函数创建好以后，我们并不知道它是不是构造函数（即使函数名的首字母为大写）。只有当它以 new 操作符来调用的时候，我们才能说它是一个构造函数。...
JavaScript常用技巧汇总
weixin_45606890的博客
01-07 1064
JavaScript常用技巧汇总
JavaScript 函数调用
hdxx2022的博客
09-30 120
在 HTML 中，默认全局对象是 HTML 页面本身，所有上面的函数“属于”HTML 页面。但是在 JavaScript 中，始终存在一种默认的全局对象。在浏览器中，这个页面对象就是浏览器窗口。上面的函数自动成为一个窗口函数。的事物，是“拥有”这段 JavaScript 代码的对象。全局变量、方法或函数很容易在全局对象中产生命名冲突和漏洞。在 JavaScript 中，您可以把函数定义为对象方法。的值，在函数中使用时，是“拥有”该函数的对象。在 web 浏览器中，全局对象就是浏览器对象。
JavaScript相关基础知识
Han_Zhou_Z的博客
11-12 232
一、脚本语言 不用专门的编译系统，代码可以在浏览器上直接运行 二、应用效果 1、验证输入内容 2、网页特效 3、窗口的应用 4、文字特效 三、如何应用 1、行内嵌入式 <a href="javascript:alert('要输入的内容')">要输入的内容</a> 其中alert()：是一个函数，作用是弹出一个消息提示框 <button onclick="alert('要输入的内容')">要输入的内容</button> onclick：表
javascript基础
全栈攻城狮JSON的博客
05-30 2188
目录 一、概述 1、概念 2、作用 二、用法 1、html页面中的javascript 2、外部的javascript 3、标签中的javascript 4、javascript显示数据 5、javascirpt注释 三、javascript基本语法 1、javascript变量 2、javascript的语句 3、javascript数据类型 3.1 值类型 3.2 引用数据类型 3.3 javascript拥有动态类型 4、javascript中运算符 四、javas
JavaScript 编码规范
青蛙king的博客
04-07 664
1、命名 “名副其实”——只做有意义的命名，规则如下： 可读 可搜索 为相同类型的变量使用统一命名 在解构中命名 力求精简，不添加不必要的上下文 属性、变量名、类名使用名词，函数名使用动词 2、函数 短小 只做一件事 函数名使用动词，要能够说明它要做什么 函数的参数不应该超过三个 函数式编程优于指令式编程 3、注释 4、格式化 5、对象和数据结构 6、单元测试 ...
前端之JavaScript
m0_62396648的博客
04-26 1911
1. JavaScript 发展历史 JavaScript（通常缩写为JS）是一种高级的、解释型的编程语言。JavaScript是一门基于原型、头等函数的语言，是一门多范式的语言，它支持面向对象程序设计，指令式编程，以及函数式编程。 它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。 它已经由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。 它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、I
Hanjst:Han JavaScript Template Engine 汉吉斯特 JavaScript模板引擎
05-05
韩语JavaScript模板语言和引擎 。 汉是我妻子的姓，也是我女儿和儿子的名字之一。 汉在汉人拼音中也是华人。 :person_raising_hand: Hanjst的目的是为了停止HTML模板引擎的“重新发明轮子”，尽管这听起来很荒谬...
链接测试工具han_XENU-1.3.5.rar
03-31
标题中的“han_XENU-1.3.5.rar”指的是XENU的汉化版本，版本号为1.3.5，通常软件的汉化版是为了方便中文用户使用而进行的本地化处理，使其界面和文档都转化为中文，以降低使用难度。 XENU的主要功能是进行链接检查...
javascript String 的扩展方法集合
10-30
使用正则表达式`\p{Han}`（Unicode属性扩展）可以更精确地匹配中文字符，如`str.replace(/[^[\p{Han}]/gu, "")`。 13. `getRealLength()`：这个方法计算字符串的实际长度，考虑到了多字节字符。这个方法在处理中文...
VSCode的Nuri语言扩展:globe_with_meridians:-JavaScript开发
05-26
这是一个语言插件，用于突出显示VSCode中的Nuri代码。 VSCode-Nuri是一个语言插件，用于突出显示VSCode中的N...贡献者CraftyDragon678 RyCont（Jeong Han）（总经理）Updatelog 20201009：第一个Beta发布-代码突出显示
jQuery 选择前、后、父元素进行操作
qq_30049249的博客
06-25 574
https://andi.cn/page/621465.html
vue elementui简易侧拉栏的使用
han_xiao_xiao的博客
06-26 357
vue简易侧拉栏的使用
uniApp vue2 vue3配置代理
最新发布
小白变怪兽
06-28 301
【代码】uniApp vue2 vue3配置代理。
Nuxt 应用的三种运行模式（五）
qq_35876316的博客
06-26 534
SPA 模式是最常见的 Web 应用模式，整个应用在加载完成后，用户的操作不会引发页面跳转，而是通过 JavaScript 动态更新页面内容。
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
08-17
这个错误的意思是 JavaScript 堆内存不足。这意味着你的程序尝试使用更多内存，但是电脑上可用的内存不足以满足需求。 这种情况通常发生在你的程序中存在内存泄露（memory leak）或者你的程序使用了过多的内存。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值