day02 JavaScript

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

day02 JavaScript

1. JavaScript

1.1 JavaScript的起源

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。Netscape在最初将其脚本语言命名为LiveScript，因为Netscape与Sun合作，网景公司管理层希望蹭Java的热度，因此取名为JavaScript。

JavaScript总共分成三部分: ECMAScript(基本语法)、BOM(浏览器对象模型)、DOM(文档对象模型)

1.2 JavaScript的特性

1.2.1 脚本语言

JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。

1.2.2 基于对象

JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。

1.2.3 弱类型

JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。

1.2.4 事件驱动

JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。

1.2.5 跨平台性

JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。

1.3 HelloWorld

1.3.1 功能效果图

在这里插入图片描述

1.3.2 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的入门程序</title>
</head>
<body>
    <!-- 在HTML代码中定义一个按钮 -->
    <button type="button" id="helloBtn">SayHello</button>
    <!--
        目标: 点击按钮的时候弹出一个警告框
    -->
    <script type="text/javascript">
        //1. 通过js代码获取到按钮对象
        //document代表当前HTML文档
        var btn = document.getElementById("helloBtn");
        //2. 给获取到的btn对象绑定点击事件
        btn.onclick = function () {
            //弹出警告框
            alert("hello world");
        }
    </script>
</body>
</html>

1.4 JavaScript的基本语法

1.4.1 JavaScript的引入方式
① 内部脚本方式
  • JavaScript代码要写在script标签内
  • script标签可以写在文档内的任意位置
  • 为了能够方便查询或操作HTML标签（元素）script标签可以写在body标签后面

在我们的入门程序中使用的就是内部脚本方式引入的JavaScript

② 外部脚本方式

在script标签内通过src属性指定外部xxx.js文件的路径即可。但是要注意以下两点：

  • 引用外部JavaScript文件的script标签里面不能写JavaScript代码
  • 先引入，再使用
  • script标签不能写成单标签
    在这里插入图片描述

引入方式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的引入方式</title>
    <!--
        建议在head中引入外部的js文件
    -->
    <script src="../js/outer.js"></script>
</head>
<body>

    <!--
        第一种引入方式: 内部引入方式，在HTML文档内部，通过script标签去编写js代码
    -->
    <!--
        第二种引入方式: 外部引入方式，在当前项目中创建一个js文件，然后在需要引入的HTML里面使用script标签引入
        一个script标签要么负责编写内部的js代码，要么负责引入外部的js文件
    -->
    <script type="text/javascript">
        //调用外部js文件中的方法
        showMessage();
        alert("hello world");
    </script>
</body>
</html>
1.4.2 声明和使用变量
① JavaScript数据类型

  • 基本数据类型

    • 数值型number：JavaScript不区分整数、小数

    • 字符串string：JavaScript不区分字符、字符串；单引号、双引号意思一样。

    • 布尔型boolean：true、false

      在JavaScript中，其他类型和布尔类型的自动转换。

      true：非零的数值，非空字符串，非空对象

      false：零，空字符串，null，undefined

      例如："false"放在if判断中

      // "false"是一个非空字符串，直接放在if判断中会被当作『真』处理
if("false"){
	alert("true");
}else{
	alert("false");
}

  • 引用类型(后面详细讲解)

    • 所有new出来的对象
    • 用[]声明的数组
    • 用{}声明的对象
② 变量

  • 关键字：var,其实ECMAScript6之后建议使用let

  • 数据类型：JavaScript变量是弱类型的，可以接收任意类型的数据

  • 标识符：严格区分大小写

  • 变量使用规则

    • 如果使用了一个没有声明的变量，那么会在运行时报错

      Uncaught ReferenceError: b is not defined

    • 如果声明一个变量没有初始化，那么这个变量的值就是undefined

1.4.3 函数(重点)
① 内置函数

内置函数就是JavaScript中内置好的函数，我们可以直接使用

  • 弹出警告框
alert("警告框内容");
  • 弹出确认框
var result = confirm("确定要删除吗？");
if(result) {
    // 执行删除
}

用户点击『确定』返回true，点击『取消』返回false

var result = confirm("老板，你真的不加个钟吗？");
if(result) {
	console.log("老板点了确定，表示要加钟");
}else{
	console.log("老板点了确定，表示不加钟");
}
  • 在控制台打印日志
console.log("日志内容");

在这里插入图片描述

② 声明函数

声明函数就是使用者自己定义一个函数，它有两种写法:

写法1：

function sum(a, b) {
    return a+b;
}

写法2：

var total = function() {
    return a+b;
};

写法2可以这样解读：声明一个函数，相当于创建了一个『函数对象』，将这个对象的『引用』赋值给变量total。如果不给这个对象赋值，我们可以将其作为匿名函数使用(在后续学习内容中会用到)

③ 调用函数

JavaScript中函数本身就是一种对象，函数名就是这个『对象』的『引用』。而调用函数的格式是：函数引用()。

//函数的声明
function sum(a, b) {
    return a+b;
}
//调用函数并接收返回值
var result = sum(2, 3);
//控制台打印返回值内容
console.log("result="+result);

或：

//函数的声明
var total = function() {
    return a+b;
}
//调用函数并接收返回值
var totalResult = total(3,6);
//控制台打印返回值内容
console.log("totalResult="+totalResult);
1.4.4 对象(重点)

JavaScript中没有『类』的概念，对于系统内置的对象可以直接创建使用。

① 使用new关键字创建对象
// 创建对象
var obj01 = new Object();

// 给对象设置属性和属性值
obj01.stuName = "tom";
obj01.stuAge = 20;
obj01.stuSubject = "java";

// 在控制台输出对象
console.log(obj01);
② 使用{}创建对象(常用)
// 创建对象
var obj02 = {
    "soldierName":"john",
    "soldierAge":35,
    "soldierWeapon":"gun"
};

// 在控制台输出对象
console.log(obj02);
③ 给对象设置函数属性
// 创建对象
var obj01 = new Object();

// 给对象设置属性和属性值
obj01.stuName = "tom";
obj01.stuAge = 20;
obj01.stuSubject = "java";

obj01.study = function() {
	console.log(this.stuName + " is studying");
};

// 在控制台输出对象
console.log(obj01);
// 调用函数
obj01.study();

或者

// 创建对象
var obj02 = {
	"soldierName":"john",
	"soldierAge":35,
	"soldierWeapon":"gun",
	"soldierShoot":function(){
		console.log(this.soldierName + " is using " + this.soldierWeapon);
	}
};

// 在控制台输出对象
console.log(obj02);
// 调用函数
obj02.soldierShoot();
④ this关键字

this关键字只有两种情况：

  • 在函数外面：this关键字指向window对象（代表当前浏览器窗口）
  • 在函数里面：this关键字指向调用函数的对象
// 直接打印this
console.log(this);

// 函数中的this
// 1.声明函数
function getName() {
	console.log(this.name);
}

// 2.创建对象
var obj01 = {
	"name":"tom",
	"getName":getName
};
var obj02 = {
	"name":"jerry",
	"getName":getName
};

// 3.调用函数
obj01.getName();
obj02.getName();
1.4.5 数组(重点)
① 使用new关键字创建数组
// 1.创建数组对象
var arr01 = new Array();

// 2.压入数据
arr01.push("apple");
arr01.push("orange");
arr01.push("banana");
arr01.push("grape");

// 3.遍历数组
for (var i = 0; i < arr01.length; i++) {
	console.log(arr01[i]);
}

// 4.数组元素反序
arr01.reverse();
for (var i = 0; i < arr01.length; i++) {
	console.log(arr01[i]);
}

// 5.数组元素拼接成字符串
var arrStr = arr01.join(",");
console.log(arrStr);

// 6.字符串拆分成数组
var arr02 = arrStr.split(",");
for (var i = 0; i < arr02.length; i++) {
	console.log(arr02[i]);
}

//  7.删除数组元素，从index为1的位置开始删，删2个  ★
arr01.splice(1,2);
for (var i = 0; i < arr01.length; i++) {
    console.log(arr01[i]);
}
② 使用[]创建数组(常用)
// 8.使用[]创建数组
var arr03 = ["cat","dog","tiger"];
console.log(arr03);
//后续操作和上述一致
1.4.6 JSON(最重点)
① JSON格式的用途

在开发中凡是涉及到『跨平台数据传输』，JSON格式一定是首选。

② JSON格式的说明
  • JSON数据两端要么是{}，要么是[]
  • {}定义JSON对象
  • []定义JSON数组
  • JSON对象的格式是：
{key:value,key:value,...,key:value}
  • JOSN数组的格式是：
[value,value,...,value]
  • key的类型固定是字符串
  • value的类型可以是：
    • 基本数据类型
    • 引用类型：JSON对象或JSON数组

正因为JSON格式中value部分还可以继续使用JSON对象或JSON数组，所以JSON格式是可以『多层嵌套』的，所以JSON格式不论多么复杂的数据类型都可以表达。

//json的格式: {key:value,key:value}
var person1 = {
    "name":"张三疯",
    "age":189,
    "address":"武当山"
}
//其实JSON对于前端而言，就是一个对象
console.log(person1.name)

var person2 = {
    "name":"张三疯",
    "age":189,
    "address":"武当山",
    "wife":{
        "name":"小花",
        "age":18,
        "address":"武当山下的小村庄"
    }
}
//console.log(person2.wife.name)

var person3 = {
    "name":"张三疯",
    "age":189,
    "address":"武当山",
    "wife":{
        "name":"小花",
        "age":18,
        "address":"武当山下的小村庄"
    },
    "sons":[
        {
            "name":"奥巴马",
            "age":1,
            "address":"武当山"
        },
        {
            "name":"奥拉夫",
            "age":2,
            "address":"少林寺"
        }
    ]
}

//json数组的格式: [{key:value,key:value},{key:value,key:value}]
//var personList = [person1,person2]
③ JSON对象和JSON字符串互转
  • JSON对象转JSON字符串
var jsonObj = {"stuName":"tom","stuAge":20};
var jsonStr = JSON.stringify(jsonObj);

console.log(typeof jsonObj); // object
console.log(typeof jsonStr); // string
  • JSON字符串转JSON对象
jsonObj = JSON.parse(jsonStr);
console.log(jsonObj); // {stuName: "tom", stuAge: 20}

1.5 JavaScript的DOM(最重点)

1.5.1 DOM的概念

DOM是Document Object Model的缩写，意思是『文档对象模型』——将HTML文档抽象成模型，再封装成对象方便用程序操作。

这是一种非常常用的编程思想：将现实世界的事物抽象成模型，这样就非常容易使用对象来量化的描述现实事物，从而把生活中的问题转化成一个程序问题，最终实现用应用软件协助解决现实问题。而在这其中『模型』就是那个连通现实世界和代码世界的桥梁。

1.5.2 DOM树的概念

浏览器把HTML文档从服务器上下载下来之后就开始按照『从上到下』的顺序『读取HTML标签』。每一个标签都会被封装成一个『对象』。

而第一个读取到的肯定是根标签html，然后是它的子标签head，再然后是head标签里的子标签……所以从html标签开始，整个文档中的所有标签都会根据它们之间的『父子关系』被放到一个『树形结构』的对象中。

在这里插入图片描述

这个包含了所有标签对象的整个树形结构对象就是JavaScript中的一个可以直接使用的内置对象：document。

例如，下面的标签结构：

在这里插入图片描述

会被解析为：

在这里插入图片描述

1.5.3 各个组成部分的类型

整个文档中的一切都可以看做Node。各个具体组成部分的具体类型可以看做Node类型的子类。

其实严格来说，JavaScript并不支持真正意义上的『继承』，这里我们借用Java中的『继承』概念，从逻辑上来帮助我们理解各个类型之间的关系。

组成部分节点类型具体类型
整个文档文档节点Document
HTML标签元素节点Element
HTML标签内的文本文本节点Text
HTML标签内的属性属性节点Attr
注释注释节点Comment
1.5.4 父子关系

在这里插入图片描述

1.5.5 先辈后代关系

在这里插入图片描述

1.5.6 DOM操作

由于实际开发时基本上都是使用JavaScript的各种框架来操作，而框架中的操作方式和我们现在看到的原生操作完全不同，所以下面罗列的API仅供参考，不做要求。

① 在整个文档范围内查询元素节点
功能API返回值
根据id值查询document.getElementById(“id值”)一个具体的元素节
根据标签名查询document.getElementsByTagName(“标签名”)元素节点数组
根据name属性值查询document.getElementsByName(“name值”)元素节点数组
根据类名查询document.getElementsByClassName(“类名”)元素节点数组
② 在具体元素节点范围内查找子节点
功能API返回值
查找子标签element.children返回子标签数组
查找第一个子标签element.firstElementChild标签对象
查找最后一个子标签element.lastElementChild节点对象
③ 查找指定元素节点的父节点
功能API返回值
查找指定元素节点的父标签element.parentElement标签对象
④ 查找指定元素节点的兄弟节点
功能API返回值
查找前一个兄弟标签node.previousElementSibling标签对象
查找后一个兄弟标签node.nextElementSibling标签对象
⑤ DOM操作之查找元素案例
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOM查找节点</title>
    </head>
    <body>
        <input type="text" id="username">
        <input type="text" class="c1">
        <input type="text" class="c1">
        <div>
            <div></div>
            <div></div>
        </div>
        <script>
            //根据id查询标签
            var elementById = document.getElementById("username");
            //console.log(elementById)
            //根据类名查询标签
            var elementsByClassName = document.getElementsByClassName("c1");
            //console.log(elementsByClassName)
            //根据标签名查询标签
            var elementsByTagName = document.getElementsByTagName("input");
            //console.log(elementsByTagName)

            //查找子节点: 查找body的所有子标签,要注意文本也属于子节点
            /*var childNodes = document.getElementsByTagName("body")[0].childNodes;
        console.log(childNodes)*/

            //查找子标签: children
            var children = document.getElementsByTagName("body")[0].children;
            //console.log(children)

            //查找id为username的标签的父节点
            var parentNode = document.getElementById("username").parentNode;
            //console.log(parentNode)

            //查找id为username的标签的前一个兄弟标签
            var previousElementSibling = document.getElementById("username").previousElementSibling;
            //console.log(previousElementSibling)

            //查找id为username的标签的后一个兄弟标签
            var nextElementSibling = document.getElementById("username").nextElementSibling;
            //console.log(nextElementSibling)
        </script>
    </body>
</html>
⑥ 属性操作
需求操作方式
读取属性值元素对象.属性名
修改属性值元素对象.属性名=新的属性值
⑦ 标签体的操作
需求操作方式
获取或者设置标签体的文本内容element.innerText
获取或者设置标签体的内容element.innerHTML
⑧ DOM操作之属性标签体操作案例
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>操作标签的属性和文本</title>
    </head>
    <body>
        <input type="text" id="username" name="username" />
        <div id="d1">
            <h1>你好世界</h1>
        </div>
        <script>
            //目标: 获取id为username的输入框的value
            //1. 找到要操作的标签
            var ipt = document.getElementById("username");

            //2. 设置标签的value属性值
            ipt.value = "张三"

            //3. 获取标签的value属性的值
            var value = ipt.value;
            console.log(value)

            //获取id为d1的div中的文本内容
            //获取标签的文本: element.innerText,获取文本的时候会将左右两端的空格去掉
            var innerText = document.getElementById("d1").innerText;
            console.log(innerText)

            //获取标签体的内容: element.innerHTML,获取标签体的内容
            var innerHTML = document.getElementById("d1").innerHTML;
            console.log(innerHTML)

            //设置标签体的内容:建议使用innerHTML，如果是使用innerText的话它会将标签当做普通文本处理
            document.getElementById("d1").innerHTML = "<h1>hello world</h1>"
        </script>
    </body>
</html>
⑨ DOM增删改操作
API功能
document.createElement(“标签名”)创建元素节点并返回，但不会自动添加到文档中
document.createTextNode(“文本值”)创建文本节点并返回，但不会自动添加到文档中
element.appendChild(ele)将ele添加到element所有子节点后面
parentEle.insertBefore(newEle,targetEle)将newEle插入到targetEle前面
parentEle.replaceChild(newEle, oldEle)用新节点替换原有的旧子节点
element.remove()删除某个标签
⑩DOM操作之增删改案例
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>创建和删除标签</title>
    </head>
    <body>
        <ul id="city">
            <li id="bj">北京</li>
            <li id="sh">上海</li>
            <li id="sz">深圳</li>
            <li id="gz">广州</li>
        </ul>
        <script>
            //目标1: 在城市列表的最后添加一个子标签 <li id="cs">长沙</li>
            //1. 创建一个li标签  <li></li>
            var liElement = document.createElement("li");
            //2. 给创建的li标签设置id属性和文本 <li id="cs">长沙</li>
            liElement.id = "cs"
            liElement.innerText = "长沙"
            //3. 将创建的li标签添加到城市列表中（ul）
            var cityUl = document.getElementById("city");

            //父.appendChild(子)将子标签添加到父标签的最后面
            //cityUl.appendChild(liElement)

            //目标2:在城市列表的深圳之前添加一个子标签 <li id="cs">长沙</li>
            //获取到深圳这个标签
            var szElement = document.getElementById("sz");
            //父.insertBefore(新标签,参照标签)
            //cityUl.insertBefore(liElement,szElement)

            //目标3: 在城市列表中添加一个子标签替换深圳 <li id="cs">长沙</li>
            //父.replaceChild(新标签,被替换的标签)
            //cityUl.replaceChild(liElement,szElement)

            //目标4: 在城市列表中删除深圳
            //szElement.remove()

            //目标5: 清除城市列表中的所有城市,保留城市列表标签ul
            cityUl.innerHTML = ""
        </script>
    </body>
</html>
1.5.7 JavaScript的事件驱动(很重要)
① 事件的概念
  • HTML 事件是发生在 HTML 元素上的“事情”， 是浏览器或用户做的某些事情
  • 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。
② 常见事件
属性此事件发生在何时…
onclick当用户点击某个对象时调用的事件句柄。
ondblclick当用户双击某个对象时调用的事件句柄。
onchange域的内容被改变。
onblur元素失去焦点。
onfocus元素获得焦点。
onload一张页面或一幅图像完成加载。
onsubmit确认按钮被点击；表单被提交。
onkeydown某个键盘按键被按下。
onkeyup某个键盘按键被松开。
onmousedown鼠标按钮被按下。
onmouseup鼠标按键被松开。
onmouseout鼠标从某元素移开。
omouseover鼠标移到某元素之上。
onmousemove鼠标被移动。
③ 事件绑定的方式

​ a. 普通函数方式(设置标签的属性)

<标签 属性="js代码，调用函数"></标签>

​ b. 匿名函数方式

<script>
    标签对象.事件属性 = function(){
        //执行一段代码
    }
</script>

④ 事件的使用介绍

  • 点击事件

    需求: 没点击一次按钮 弹出hello…

<input type="button" value="按钮" onclick="fn1()">

    <input type="button" value="另一个按钮" id="btn">
        <script>
        //当点击的时候要调用的函数
        function fn1() {
        alert("我被点击了...")
    }

//给另外一个按钮，绑定点击事件:
//1.先根据id获取标签
var btn = document.getElementById("btn");
//2. 设置btn的onclick属性(绑定事件)
//绑定命名函数
//btn.onclick = fn1

//绑定匿名函数
btn.onclick = function () {
    console.log("点击了另外一个按钮")
}
</script>

  • 获得焦点(onfocus)和失去焦点(onblur)

    需求:给输入框设置获得和失去焦点

var ipt = document.getElementById("ipt");

//绑定获取焦点事件
ipt.onfocus = function () {
    console.log("获取焦点了...")
}

//绑定失去焦点事件
ipt.onblur = function () {
    console.log("失去焦点了...")
}

  • 内容改变(onchange)

    需求: 给select设置内容改变事件

<body>
    <!--内容改变(onchange)-->
    <select onchange="changeCity(this)">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="sz">深圳</option>
    </select>

</body>
<script>
    function changeCity(obj) {
        console.log("城市改变了"+obj.value);
    }
</script>
  • 键盘相关的, 键盘按下(onkeydown) 键盘抬起(onkeyup)
//给输入框绑定键盘按键按下和抬起事件
ipt.onkeydown = function () {
    //当按键按下的时候，数据并没有到达输入框
    //输出输入框里面的内容
    //console.log(ipt.value)
}

ipt.onkeyup = function () {
    //输出输入框的内容:当键盘按键抬起的时候，数据已经到达了输入框
    console.log(ipt.value)
}
  • 鼠标相关的, 鼠标在xx之上(onmouseover ), 鼠标按下(onmousedown),鼠标离开(onmouseout)
//给输入框绑定鼠标移入事件
ipt.onmouseover = function () {
    console.log("鼠标移入了...")
}
//给输入框绑定鼠标移出事件
ipt.onmouseout = function () {
    console.log("鼠标移出了...")
}

2. 正则表达式

2.1 正则表达式的概念

正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。用我们自己的话来说: 正则表达式用来校验字符串是否满足一定的规则的公式

2.2 正则表达式的用途

  • 模式验证: 检测某个字符串是否符合规则，例如检测手机号、身份证号等等是否符合规范
  • 匹配读取:读取字符串中符合规则的内容
  • 匹配替换:替换字符串中符合规则的内容

2.3 正则表达式的语法

  • 对象形式：var reg = new RegExp("正则表达式")当正则表达式中有"/"那么就使用这种

    // 类似创建数组可以new Array()、创建对象可以使用new Object()
var reg = new RegExp("a");

  • 直接量形式：var reg = /正则表达式/一般使用这种声明方式

    // 类似创建数组时可以使用[]、创建对象可以使用{}
var reg = /a/;
2.3.1 正则表达式的组成

正则表达式本身也是一个字符串，它由两种字符组成：

  • 普通字符，例如大、小写英文字母；数字等。
  • 元字符：被系统赋予特殊含义的字符。例如：^表示以某个字符串开始，$表示以某个字符串结束
2.3.2 字符集合
语法格式示例说明
[字符列表]正则表达式：[abc] 含义：目标字符串包含abc中的任何一个字符 目标字符串：plain 是否匹配：是 原因：plain中的“a”在列表“abc”中目标字符串中任何一个字符出现在字符列表中就算匹配。
[^字符列表][^abc] 含义：目标字符串包含abc以外的任何一个字符 目标字符串：plain 是否匹配：是 原因：plain中包含“p”、“l”、“i”、“n”匹配字符列表中未包含的任意字符。
[字符范围]正则表达式：[a-z] 含义：所有小写英文字符组成的字符列表 正则表达式：[A-Z] 含义：所有大写英文字符组成的字符列表匹配指定范围内的任意字符。
2.3.3 元字符

在正则表达式中被赋予特殊含义的字符，不能被直接当做普通字符使用。如果要匹配元字符本身，需要对元字符进行转义，转义的方式是在元字符前面加上“\”，例如：^

代码说明
.匹配除换行字符以外的任意字符。
\w匹配字母或数字或下划线等价于[a-zA-Z0-9_]
\W匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s匹配任意的空白符，包括空格、制表符、换页符等等。等价于[\f\n\r\t\v]。
\S匹配任何非空白字符。等价于[^\f\n\r\t\v]。
\d匹配数字。等价于[0-9]。
\D匹配一个非数字字符。等价于[^0-9]
\b匹配单词的开始或结束
^匹配字符串的开始，但在[]中使用表示取反
$匹配字符串的结束
2.3.4 出现次数
代码说明
*出现零次或多次
+出现一次或多次
?出现零次或一次
{n}出现n次
{n,}出现n次或多次
{n,m}出现n到m次
2.3.5 正则表达式使用体验
① 模式验证

注意：这里是使用正则表达式对象来调用方法。

// 创建一个最简单的正则表达式对象
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
// 调用正则表达式对象的test()方法验证目标字符串是否满足我们指定的这个模式，返回结果true
console.log("/o/.test('Hello World!')="+reg.test(str));
② 匹配读取

注意：这里是使用字符串对象来调用方法。

// 在目标字符串中查找匹配的字符，返回匹配结果组成的数组
var resultArr = str.match(reg);
// 数组长度为1
console.log("resultArr.length="+resultArr.length);

// 数组内容是o
console.log("resultArr[0]="+resultArr[0]);
③ 替换

注意：这里是使用字符串对象来调用方法。

var newStr = str.replace(reg,'@');
// 只有第一个o被替换了，说明我们这个正则表达式只能匹配第一个满足的字符串
console.log("str.replace(reg)="+newStr);//Hell@ World!

// 原字符串并没有变化，只是返回了一个新字符串
console.log("str="+str);//str=Hello World!
④ 全文查找

如果不使用g对正则表达式对象进行修饰，则使用正则表达式进行查找时，仅返回第一个匹配；使用g后，返回所有匹配。

// 目标字符串
var targetStr = 'Hello World!';

// 没有使用全局匹配的正则表达式
var reg = /[A-Z]/;
// 获取全部匹配
var resultArr = targetStr.match(reg);
// 数组长度为1
console.log("resultArr.length="+resultArr.length);

// 遍历数组，发现只能得到'H'
for(var i = 0; i < resultArr.length; i++){
	console.log("resultArr["+i+"]="+resultArr[i]);
}

对比

// 目标字符串
var targetStr = 'Hello World!';

// 使用了全局匹配的正则表达式
var reg = /[A-Z]/g;
// 获取全部匹配
var resultArr = targetStr.match(reg);
// 数组长度为2
console.log("resultArr.length="+resultArr.length);

// 遍历数组，发现可以获取到“H”和“W”
for(var i = 0; i < resultArr.length; i++){
	console.log("resultArr["+i+"]="+resultArr[i]);
}
⑤ 忽略大小写
//目标字符串
var targetStr = 'Hello WORLD!';

//没有使用忽略大小写的正则表达式
var reg = /o/g;
//获取全部匹配
var resultArr = targetStr.match(reg);
//数组长度为1
console.log("resultArr.length="+resultArr.length);
//遍历数组，仅得到'o'
for(var i = 0; i < resultArr.length; i++){
	console.log("resultArr["+i+"]="+resultArr[i]);
}

对比

//目标字符串
var targetStr = 'Hello WORLD!';

//使用了忽略大小写的正则表达式
var reg = /o/gi;
//获取全部匹配
var resultArr = targetStr.match(reg);
//数组长度为2
console.log("resultArr.length="+resultArr.length);
//遍历数组，得到'o'和'O'
for(var i = 0; i < resultArr.length; i++){
	console.log("resultArr["+i+"]="+resultArr[i]);
}
⑥ 元字符使用
var str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java开头
var reg = /^Java/g;
console.log('reg.test(str01)='+reg.test(str01)); // flase
console.log("<br />");
console.log('reg.test(str02)='+reg.test(str02)); // true

var str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java结尾
var reg = /Java$/g;
console.log('reg.test(str01)='+reg.test(str01)); // true
console.log("<br />");
console.log('reg.test(str02)='+reg.test(str02)); // flase
⑦ 字符集合的使用
//n位数字的正则
var targetStr="123456789";
var reg=/^[0-9]{0,}$/;
//或者 ： var reg=/^\d*$/;
var b = reg.test(targetStr);//true

//数字+字母+下划线，6-16位
var targetStr="HelloWorld";
var reg=/^[a-z0-9A-Z_]{6,16}$/;
var b = reg.test(targetStr);//true

2.4 常用正则表达式

需求正则表达式
用户名/^[a-zA-Z_][a-zA-Z_-0-9]{5,9}$/
密码/1{6,12}$/
前后空格/^\s+|\s+$/g
电子邮箱/2+@([a-zA-Z0-9-]+[.]{1})+[a-zA-Z]+$/

  1. a-zA-Z0-9_-@#&* ↩︎

  2. a-zA-Z0-9_.- ↩︎

Libra_97
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript第二天
qq_41943654的博客
03-29 234
javascript第二天 +(正号)数据 可以把其他类型转换为数据类型 1.代码练习 2.运行结果 常见错误 1.运行结果 代码 错误分析： 变量没有声明 2.运行结果 代码 错误分析： 变量多次声明 3.运行结果 代码 错误分析： 缺少括号 ...
JavaScript 二
weixin_69028584的博客
05-18 179
分组方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
[JSON] JSON基础知识
Hudas的博客
11-05 6621
本专栏主要讲解JSON知识
01.初学JavaScript
qq_37636795的博客
01-02 1142
1 JavaScript的起源 JavaScript总共分成三部分: ECMAScript(基本语法)、BOM(浏览器对象模型)、DOM(文档对象模型) 2 JavaScript的特性 脚本语言 JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。 基于对象 面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它
JSON数组
风一样的少年
08-26 1万+
一、对于JSON的理解： JSON，大部分都是用来处理JavaScript和web服务器端之间的数据交换，把后台web服务器的数据传递到前台，然后使用JavaScript进行处理，例如ajax等。 JSON，就是一种数据传输格式而已，无它，非常容易掌握。但是大家不要误以为JSON最大的用处是在前端，其实JSON最大的用处是处理JavaScript和web服务器端之间数据交换。 二、json结...
JSON数组，JSON对象，数组的区别
热门推荐
gao_sl的博客
08-15 7万+
一、JSON 语法规则： JSON 是存储和交换文本信息的语法 在开发过程中，经常需要和别的系统交换数据，数据交换的格式有XML、JSON等， JSON作为一个轻量级的数据格式比xml效率要高，XML需要很多的标签，这无疑占据了网络流量。 1、JSON可以有两种格式 一种是对象格式的： {"name":"JSON","address":"北京市西城区","age":25}//JSON...
JavaScript Day_02
03-24
javascript第二天笔记
Day02
03-10
在"Day02-main"这个文件中，可能是继续讲解JavaScript的一些核心概念或者实践案例，比如变量、数据类型、函数的使用等。随着学习的深入，理解并掌握这些知识点对于任何想要在IT行业，特别是Web开发领域有所建树的人...
JS.rar_day3lb_javascript
09-23
在"JS.rar_day3lb_javascript"这个压缩包中，我们很显然关注的是JavaScript技术，特别是与“futdraft”程序相关的应用。"futdraft"可能是一个足球模拟选秀或者阵容构建的应用，这需要对JavaScript有深入的理解以及对...
day1_javascript_
09-30
"day1_javascript_"这个标题可能指的是一个学习序列的开始，聚焦于JavaScript的基础知识。描述中提到的"javaweb的编程资料"表明这组资料不仅限于JavaScript，可能还涉及到将JavaScript应用于JavaWeb开发的场景。 ...
JavaScript Day_03
03-24
javascript学习第三天笔记
js 更改json数组的属性名称
ing的博客
05-08 1511
需求：从后台获取到JSON数据，因为属性名字太长了，想.的时候简短一些。记录一下 知识点：map()根据当前数组映射出一个新的数组，map和forEach等遍历方法不同，在forEach中return语句是没有任何效果的，而map则可以改变当前循环的值，返回一个新的被改变过值之后的数组（map需return），一般用来处理需要修改某一个数组的值。 let newTable = _this.fuelList.map((item) => { let obj = { .
JSON数组，JSON对象，数组的区别与基本操作整理
weixin_34403693的博客
01-01 964
JSON 语法规则 JSON 语法是 javascript 对象表示语法的子集。 数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 JSON 名称/值对 JSON 数据的书写格式是：名称/值对。 名称/值对组合中的名称写在前面（在双引号中），值对写在后面(同样在双引号中)，中间用冒号隔开： "firstName":"John" JSON...
json数组的遍历（获取属性名和属性值）
winner_xyy的博客
08-20 2万+
后台传递给前台的数据大多是json,所以前台需要解析json中的数据来获取值。 之前一直迷糊，现在做个总结： 以代码为例： &lt;script type="text/javaScript"&gt; //数据为jsonArray var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d&quo
json数组遍历并修改属性名
thisReally的博客
12-13 5342
json数组，修改属性名 不多说，直接上代码。 //把“name”属性名修改为“title”，并删除“name”这一项 var json = [ {id:0,name:'aa'}, {id:1,name:'bb'}, {id:2,name:'cc'}, {id:3,name:'dd'}, {id:4,name:'ee'} ] for(var i in json){ for(var j ...
Webkit简介以及工作流程
最新发布
读心悦
07-10 310
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
day10_JavaScript高级1
08-08
本节课主要学习了JavaScript高级的内容，包括BOM对象和DOM对象的使用以及四个案例的实践。下面对每个部分进行详细总结： 1. BOM对象：BOM对象是JavaScript的浏览器对象模型，通过BOM可以控制浏览器的行为和属性。本...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值