JavaScript笔记（二）：正则表达式事件

蔚蓝色的风暴

已于 2022-01-30 16:55:56 修改

阅读量154

点赞数

分类专栏： web前端 javascript 文章标签： javascript 正则表达式 html

于 2021-08-21 15:32:49 首次发布

本文链接：https://blog.csdn.net/qq_37831759/article/details/119837718

版权

web前端同时被 2 个专栏收录

15 篇文章 1 订阅

订阅专栏

javascript

5 篇文章 0 订阅

订阅专栏

正则表达式

定义：正则表达式用于定义一些字符串的规则。

作用：计算机可以根据正则表达式，来检查一个字符串是否符合指定的规则；或者将字符串中符合规则的内容提取出来。

	var 变量 = new RegExp("正则表达式"); // 注意，参数是字符串

	var 变量 = new RegExp("正则表达式", "匹配模式"); // 注意，两个参数都是字符串

示例

只传一个参数时

	var reg = new RegExp("a"); // 定义一个正则表达式：检查一个字符串中是否含有 a

	var str1 = "hiahia";
	var str2 = "smyh";

	// 通过 test()方法，判断字符串是否符合 上面定义的 reg 规则
	console.log(reg.test(str1)); // 打印结果：true
	console.log(reg.test(str2)); // 打印结果：false

传两个参数

i 忽略大小写。这里的 i 指的是 ignore。

g 全局匹配模式。这里的 g 指的是 global。

我们再来看更复杂的表达式

最基础的’\d’可以表示匹配一个数字 '\w’可以表示匹配一个字母 '.'表示匹配任何一个字符

注意上面的情况都表示只匹配一个字符如’\d\d’可以匹配’00’，但’000’显然是不行的

这时候，加上*可以表示匹配任意个数(包括0)，+表示至少一个，?表示0个或1个，{n}表示n个，{n,m}表示n到m个

注意特殊字符是需要转义的比如 ‘-’ 我们应该使用’-'来匹配它

\s匹配一个空格

更复杂的情况，我们可以用[]来表示范围

[0-9a-zA-Z\_]这样一个式子表示匹配一个数字、字母或下划线

[0-9a-zA-Z\_]+则表示至少一个数字、字母或下划线如’0_z’此时是可以匹配的

[a-zA-Z\_\$][0-9a-zA-Z\_\$]*匹配的字符串以字母或下划线或$开头，后面跟任意个数字、字母、下划线或$

[a-zA-Z\_\$][0-9a-zA-Z\_\$]{0, 19}表示字符串的长度为1-20个（以字母或下划线或$开头，后面跟0-19个字母）

事件

事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。

事件的三要素：事件源、事件、事件驱动程序。

代码书写步骤如下：（重要）

（1）获取事件源：document.getElementById(“box”); // 类似于Android里面的findViewById

（2）绑定事件：事件源box.事件onclick = function(){ 事件驱动程序 };

（3）书写事件驱动程序：关于DOM的操作。

<body>
<div id="box1"></div>

<script type="text/javascript">
    // 1、获取事件源
    var div = document.getElementById("box1");
    // 2、绑定事件
    div.onclick = function () {
        // 3、书写事件驱动程序
        alert("我是弹出的内容");
    }
</script>

</body>

常用事件：
在这里插入图片描述
获取事件源

var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签

var arr1 = document.getElementsByTagName("div");     //方式二：通过 标签名 获得 标签数组，所以有s

var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

绑定事件方式
1、匿名函数

<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第一种方式
    div1.onclick = function () {
        alert("我是弹出的内容");
    }
</script>

2、先定义函数

 <div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第二种方式
    div1.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。
    //单独定义函数
    function fn() {
        alert("我是弹出的内容");
    }
</script>

3、行内绑定

<!--行内绑定-->
<div id="box1" onclick="fn()"></div>

<script type="text/javascript">

    function fn() {
        alert("我是弹出的内容");
    }

</script>

驱动程序示例

    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            cursor: pointer;
        }
    </style>
</head>

<body>

<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //点击鼠标时，原本粉色的div变大了，背景变红了
    div1.onclick = function () {
        div1.style.width = "200px";   //属性值要写引号
        div1.style.height = "200px";
        div1.style.backgroundColor = "red";   //属性名是backgroundColor，不是background-color
    }
</script>

DOM

JavaScript基础分为三个部分：

ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

DOM：文档对象模型（Document object Model），操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

BOM：浏览器对象模型（Browser Object Model），操作浏览器部分功能的API。比如让浏览器自动滚动。

什么是DOM

DOM：Document Object Model，文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM就是由节点组成的。

解析过程： HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

DOM树：（一切都是节点）

DOM的数据结构如下：

在这里插入图片描述
暂时不深入学习JS了，之后有空继续

蔚蓝色的风暴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript笔记（二）：正则表达式事件

正则表达式定义：正则表达式用于定义一些字符串的规则。作用：计算机可以根据正则表达式，来检查一个字符串是否符合指定的规则；或者将字符串中符合规则的内容提取出来。 var 变量 = new RegExp("正则表达式"); // 注意，参数是字符串 var 变量 = new RegExp("正则表达式", "匹配模式"); // 注意，两个参数都是字符串示例只传一个参数时 var reg = new RegExp("a"); // 定义一个正则表达式：检查一个字符串中是否含有 a var
复制链接

扫一扫