Java Web JavaScript （3）23.7.3

最新推荐文章于 2024-09-04 02:27:32 发布
最新推荐文章于 2024-09-04 02:27:32 发布
阅读量257 收藏
点赞数
文章标签： 前端 javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/intmain404/article/details/131524415
版权

7，事件监听

要想知道什么是事件监听，首先先聊聊什么是事件？

HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的 按钮被点击、鼠标移动到元素之上、按下键盘按键 等都是事件。

事件监听是JavaScript 可以在事件被侦测到时==执行一段逻辑代码。==例如下图当我们点击 开灯 按钮，就需要通过 js 代码实现替换图片

请添加图片描述

再比如下图输入框，当我们输入了用户名 光标离开 输入框，就需要通过 js 代码对输入的内容进行校验，没通过校验就在输入框后提示 用户名格式有误!

请添加图片描述

7.1 事件绑定

JavaScript 提供了两种事件绑定方式：

  • 方式一：通过 HTML标签中的事件属性进行绑定

    如下面代码，有一个按钮元素，我们是在该标签上定义 事件属性，在事件属性中绑定函数。onclick 就是 单击事件 的事件属性。onclick='on（）' 表示该点击事件绑定了一个名为 on() 的函数

    <input type="button" οnclick='on()’>

    下面是点击事件绑定的 on() 函数

    function on(){
	alert("我被点了");
}

  • 方式二：通过 DOM 元素属性绑定

    如下面代码是按钮标签，在该标签上我们并没有使用 事件属性，绑定事件的操作需要在 js 代码中实现

    <input type="button" id="btn">

    下面 js 代码是获取了 id='btn' 的元素对象，然后将 onclick 作为该对象的属性，并且绑定匿名函数。该函数是在事件触发后自动执行

    document.getElementById("btn").onclick = function (){
    alert("我被点了");
}

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--方式1：在下面input标签上添加 onclick 属性，并绑定 on() 函数-->
    <input type="button" value="点我" onclick="on()"> <br>
    <input type="button" value="再点我" id="btn">

    <script>
        function on(){
            alert("我被点了");
        }
      	//方式2：获取 id="btn" 元素对象，通过调用 onclick 属性 绑定点击事件
        document.getElementById("btn").onclick = function (){
            alert("我被点了");
        }
    </script>
</body>
</html>

7.2 常见事件

上面案例中使用到了 onclick 事件属性，那都有哪些事件属性供我们使用呢？下面就给大家列举一些比较常用的事件属性

事件属性名说明
onclick鼠标单击事件
onblur元素失去焦点
onfocus元素获得焦点
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开

  • onfocus 获得焦点事件。

    如下图，当点击了输入框后，输入框就获得了焦点。而下图示例是当获取焦点后会更改输入框的背景颜色。

    请添加图片描述

  • onblur 失去焦点事件。

    如下图，当点击了输入框后，输入框就获得了焦点；再点击页面其他位置，那输入框就失去焦点了。下图示例是将输入的文本转换为大写。

请添加图片描述

  • onmouseout 鼠标移出事件。

  • onmouseover 鼠标移入事件。

    如下图，当鼠标移入到 苹果 图片上时，苹果图片变大；当鼠标移出 苹果图片时，苹果图片变小。

    请添加图片描述

  • onsubmit 表单提交事件

    如下是带有表单的页面

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="register" action="#" >
        <input type="text" name="username" />
        <input type="submit" value="提交">
    </form>
    <script>
        
    </script>
</body>
</html>

    如上代码的表单，当我们点击 提交 按钮后，表单就会提交，此处默认使用的是 GET 提交方式，会将提交的数据拼接到 URL 后。现需要通过 js 代码实现阻止表单提交的功能，js 代码实现如下：

    1. 获取 form 表单元素对象。
    2. 给 form 表单元素对象绑定 onsubmit 事件，并绑定匿名函数。
    3. 该匿名函数如果返回的是true，提交表单；如果返回的是false，阻止表单提交。
    document.getElementById("register").onsubmit = function (){
    //onsubmit 返回true，则表单会被提交，返回false，则表单不提交
    return true;
}

8，表单验证案例

8.1 需求

请添加图片描述

有如下注册页面，对表单进行校验，如果输入的用户名、密码、手机号符合规则，则允许提交；如果不符合规则，则不允许提交。

完成以下需求：

  1. 当输入框失去焦点时，验证输入内容是否符合要求

  2. 当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不合符则阻止表单提交

8.2 环境准备

下面是初始页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>
    <div class="form-div">
        <div class="reg-content">
            <h1>欢迎注册</h1>
            <span>已有帐号？</span> <a href="#">登录</a>
        </div>
        <form id="reg-form" action="#" method="get">
            <table>
                <tr>
                    <td>用户名</td>
                    <td class="inputs">
                        <input name="username" type="text" id="username">
                        <br>
                        <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                    </td>
                </tr>

                <tr>
                    <td>密码</td>
                    <td class="inputs">
                        <input name="password" type="password" id="password">
                        <br>
                        <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                    </td>
                </tr>

                <tr>
                    <td>手机号</td>
                    <td class="inputs"><input name="tel" type="text" id="tel">
                        <br>
                        <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                    </td>
                </tr>
            </table>
            <div class="buttons">
                <input value="注 册" type="submit" id="reg_btn">
            </div>
            <br class="clear">
        </form>

    </div>


    <script>

    </script>
</body>
</html>

8.3 验证输入框

此小节完成如下功能：

  • 校验用户名。当用户名输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使 id='username_err' 的span标签显示出来，给出用户提示。
  • 校验密码。当密码输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使 id='password_err' 的span标签显示出来，给出用户提示。
  • 校验手机号。当手机号输入框失去焦点时，判断输入的内容是否符合 长度是 11 位 规则，不符合使 id='tel_err' 的span标签显示出来，给出用户提示。

代码如下：

//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");

//1.2 绑定onblur事件 失去焦点
usernameInput.onblur = function () {
    //1.3 获取用户输入的用户名
    var username = usernameInput.value.trim();

    //1.4 判断用户名是否符合规则：长度 6~12
    if (username.length >= 6 && username.length <= 12) {
        //符合规则
        document.getElementById("username_err").style.display = 'none';
    } else {
        //不合符规则
        document.getElementById("username_err").style.display = '';
    }
}

//1. 验证密码是否符合规则
//1.1 获取密码的输入框
var passwordInput = document.getElementById("password");

//1.2 绑定onblur事件 失去焦点
passwordInput.onblur = function() {
    //1.3 获取用户输入的密码
    var password = passwordInput.value.trim();

    //1.4 判断密码是否符合规则：长度 6~12
    if (password.length >= 6 && password.length <= 12) {
        //符合规则
        document.getElementById("password_err").style.display = 'none';
    } else {
        //不合符规则
        document.getElementById("password_err").style.display = '';
    }
}

//1. 验证手机号是否符合规则
//1.1 获取手机号的输入框
var telInput = document.getElementById("tel");

//1.2 绑定onblur事件 失去焦点
telInput.onblur = function() {
    //1.3 获取用户输入的手机号
    var tel = telInput.value.trim();

    //1.4 判断手机号是否符合规则：长度 11
    if (tel.length == 11) {
        //符合规则
        document.getElementById("tel_err").style.display = 'none';
    } else {
        //不合符规则
        document.getElementById("tel_err").style.display = '';
    }
}

8.3 验证表单

当用户点击 注册 按钮时，需要同时对输入的 用户名、密码、手机号 ，如果都符合规则，则提交表单；如果有一个不符合规则，则不允许提交表单。实现该功能需要获取表单元素对象，并绑定 onsubmit 事件

//1. 获取表单对象
var regForm = document.getElementById("reg-form");

//2. 绑定onsubmit 事件
regForm.onsubmit = function () {
    
}

onsubmit 事件绑定的函数需要对输入的 用户名、密码、手机号 进行校验，这些校验我们之前都已经实现过了，这里我们还需要再校验一次吗？不需要，只需要对之前校验的代码进行改造，把每个校验的代码专门抽象到有名字的函数中，方便调用；并且每个函数都要返回结果来去决定是提交表单还是阻止表单提交，代码如下：

//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");

//1.2 绑定onblur事件 失去焦点
usernameInput.onblur = checkUsername;

function checkUsername() {
    //1.3 获取用户输入的用户名
    var username = usernameInput.value.trim();

    //1.4 判断用户名是否符合规则：长度 6~12
    var flag = username.length >= 6 && username.length <= 12;
    if (flag) {
        //符合规则
        document.getElementById("username_err").style.display = 'none';
    } else {
        //不合符规则
        document.getElementById("username_err").style.display = '';
    }
    return flag;
}

//1. 验证密码是否符合规则
//1.1 获取密码的输入框
var passwordInput = document.getElementById("password");

//1.2 绑定onblur事件 失去焦点
passwordInput.onblur = checkPassword;

function checkPassword() {
    //1.3 获取用户输入的密码
    var password = passwordInput.value.trim();

    //1.4 判断密码是否符合规则：长度 6~12
    var flag = password.length >= 6 && password.length <= 12;
    if (flag) {
        //符合规则
        document.getElementById("password_err").style.display = 'none';
    } else {
        //不合符规则
        document.getElementById("password_err").style.display = '';
    }
    return flag;
}

//1. 验证手机号是否符合规则
//1.1 获取手机号的输入框
var telInput = document.getElementById("tel");

//1.2 绑定onblur事件 失去焦点
telInput.onblur = checkTel;

function checkTel() {
    //1.3 获取用户输入的手机号
    var tel = telInput.value.trim();

    //1.4 判断手机号是否符合规则：长度 11
    var flag = tel.length == 11;
    if (flag) {
        //符合规则
        document.getElementById("tel_err").style.display = 'none';
    } else {
        //不合符规则
        document.getElementById("tel_err").style.display = '';
    }
    return flag;
}

而 onsubmit 绑定的函数需要调用 checkUsername() 函数、checkPassword() 函数、checkTel() 函数。

//1. 获取表单对象
var regForm = document.getElementById("reg-form");

//2. 绑定onsubmit 事件
regForm.onsubmit = function () {
    //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false

    var flag = checkUsername() && checkPassword() && checkTel();

    return flag;
}

9，RegExp对象

RegExp 是正则对象。正则对象是判断指定字符串是否符合规则。

如下图是百度贴吧中的帖子

请添加图片描述

我们可以通过爬虫技术去爬取该页面源代码，然后获取页面中所有的邮箱，后期我们可以给这些邮箱地址发送推广的邮件。那么问题来了，如何才能知道页面内容中哪些事邮箱地址呢？这里就可以使用正则表达式来匹配邮箱。

在 js 中对正则表达式封装的对象就是正则对象。

9.1 正则对象使用

9.1.1 创建对象

正则对象有两种创建方式：

  • 直接量方式：注意不要加引号

    var reg = /正则表达式/;

  • 创建 RegExp 对象

    var reg = new RegExp("正则表达式");
9.1.2 函数

test(str) ：判断指定字符串是否符合规则，返回 true或 false

9.2 正则表达式

从上面创建正则对象的格式中可以看出不管哪种方式都需要正则表达式，那么什么是正则表达式呢？

正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回false。

正则表达式是和语言无关的。很多语言都支持正则表达式，Java语言也支持，只不过正则表达式在不同的语言中的使用方式不同，js 中需要使用正则对象来使用正则表达式。

正则表达式常用的规则如下：

  • ^：表示开始

  • $：表示结束

  • [ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符

  • .：代表任意单个字符，除了换行和行结束符

  • \w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]

  • \d：代表数字字符： 相当于 [0-9]

量词：

  • +：至少一个

  • *：零个或多个

  • ？：零个或一个

  • {x}：x个

  • {m,}：至少m个

  • {m,n}：至少m个，最多n个

代码演示：

// 规则：单词字符，6~12
//1,创建正则对象，对正则表达式进行封装
var reg = /^\w{6,12}$/;

var str = "abcccc";
//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
var flag = reg.test(str);
alert(flag);

9.3 改进表单校验案例

表单校验案例中的规则是我们进行一系列的判断来实现的，现在学习了正则对象后，就可以使用正则对象来改进这个案例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>


<script>

    //1. 验证用户名是否符合规则
    //1.1 获取用户名的输入框
    var usernameInput = document.getElementById("username");

    //1.2 绑定onblur事件 失去焦点
    usernameInput.onblur = checkUsername;

    function checkUsername() {
        //1.3 获取用户输入的用户名
        var username = usernameInput.value.trim();

        //1.4 判断用户名是否符合规则：长度 6~12,单词字符组成
        var reg = /^\w{6,12}$/;
        var flag = reg.test(username);

        //var flag = username.length >= 6 && username.length <= 12;
        if (flag) {
            //符合规则
            document.getElementById("username_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("username_err").style.display = '';
        }
        return flag;
    }

    //1. 验证密码是否符合规则
    //1.1 获取密码的输入框
    var passwordInput = document.getElementById("password");

    //1.2 绑定onblur事件 失去焦点
    passwordInput.onblur = checkPassword;

    function checkPassword() {
        //1.3 获取用户输入的密码
        var password = passwordInput.value.trim();

        //1.4 判断密码是否符合规则：长度 6~12
        var reg = /^\w{6,12}$/;
        var flag = reg.test(password);

        //var flag = password.length >= 6 && password.length <= 12;
        if (flag) {
            //符合规则
            document.getElementById("password_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("password_err").style.display = '';
        }
        return flag;
    }

    //1. 验证手机号是否符合规则
    //1.1 获取手机号的输入框
    var telInput = document.getElementById("tel");

    //1.2 绑定onblur事件 失去焦点
    telInput.onblur = checkTel;

    function checkTel() {
        //1.3 获取用户输入的手机号
        var tel = telInput.value.trim();

        //1.4 判断手机号是否符合规则：长度 11，数字组成，第一位是1
        //var flag = tel.length == 11;
        var reg = /^[1]\d{10}$/;
        var flag = reg.test(tel);
        if (flag) {
            //符合规则
            document.getElementById("tel_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("tel_err").style.display = '';
        
        return flag;
    }

    //1. 获取表单对象
    var regForm = document.getElementById("reg-form");

    //2. 绑定onsubmit 事件
    regForm.onsubmit = function () {
        //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false

        var flag = checkUsername() && checkPassword() && checkTel();

        return flag;
    }
</script>
</body>
</html>
码上奉先
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
java webview事件_【WebView】WebView为图片添加点击事件,查看webview中的多图
weixin_30468419的博客
03-07 297
why在日常开发过程中，有时候会遇到需要在app中嵌入网页，此时使用WebView实现效果，但在默认情况下是无法点击图片查看大图的，更无法保存图片。本文将就这一系列问题的实现进行说明。这里面主要还是用到了android原生和js交互的知识、js添加事件的知识。1、首先在andorid的页面中获取到html的字符串(bean.getContent())，然后在调用公共方法去获取到网页中的所有图片数组...
代码之美(中文完整版).pdf
11-14
13.2 通过Web跟用户保持对话 13.3. 多态的威力 13.4 滤除无关的基因 13.5 大规模美丽代码理论 13.6 结论 第14章 优雅代码随硬件发展的演化 14.1. 计算机体系结构对矩阵算法的影响 14.2 一种基于分解的方法 14.3 一个...
Java Web JavaScript （1）23.7.1
intmain404的博客
07-03 207
JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。JavaScript 是用来控制网页行为的，它能使网页可交互；那么它可以做什么呢？改变页面内容当我点击上面左图的点击我按钮，按钮上面的文本就改为上面右图内容，这就是js 改变页面内容的功能。修改指定元素的属性值当我们点击上图的开灯按钮，效果就是上面右图效果；当我点击关灯。
Java Web JavaScript （2）23.7.2
intmain404的博客
07-03 245
DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为Document：整个文档对象Element：元素对象Attribute：属性对象Text：文本对象Comment：注释对象如下图，左边是 HTML 文档内容，右边是 DOM 树。
Java Web HTTP 23.7.4
intmain404的博客
07-05 927
Web是全球广域网，也称为万维网(www)，能够通过浏览器访问的网站。在我们日常的生活中，经常会使用浏览器去访问百度京东等这些网站，这些网站统称为Web网站。如下就是通过浏览器访问百度官网的界面:我们知道了什么是Web，那么JavaWeb又是什么呢？顾名思义JavaWeb就是用Java技术来解决相关web互联网领域的技术栈。等学习完JavaWeb之后，同学们就可以使用Java语言开发我们上述所说的网站。而国内很多大型网站公司也是首选Java语言来解决web互联网相关的问题。
JavaWeb——动态 web 资源开发
胖虎虎
07-04 4433
目录Servlet01 系统架构1.1 系统架构包括什么形式？1.2 C/S架构1.3 B/S架构1.4 C/S和B/S结构的系统如何选择？1.5 开发一个WEB系统需要哪些技术？1.6 Java EE是什么？02 B/S结构的系统通信原理2.1 WEB系统的访问过程2.2 域名2.3 IP地址2.4 端口号2.5 WEB系统的通信原理2.6 URL2.7 请求、响应03 WEB服务器软件3.1 WEB服务器软件都有哪些呢？3.2 应用服务器和WEB服务器的关系3.3 Tomcat下载04 实现一个最基本的
最新 JavaScript 现状调查报告出炉
小生方勤
08-02 585
点击下方“小生方勤”，选择“设为星标”第一时间关注技术干货！今天突然看到了最新 JavaScript 的现状调查报告，看到了几个比较有意思的数据，在这里分享一下。每一年都会发布一个 Jav...
Java Web 整合开发王者归来 含源代码 PDF 电子书下载地址
热门推荐
tan3739的专栏
09-25 1万+
Java Web整合开发王者归来(含源代码) 并且源代码比光碟中的新，光盘中的代码有部分不全，有两个项目没有，现已打上补丁。 PDF文件解压缩后324M，源代码压缩文件65.5M 下载地址：https://download.csdn.net/download/tan3739/11100509 2019年04月09号上传 为了能让更多人能下载到该资源，请不要给我5星好评，因为好评会上涨下载积...
狂神说Java--Java学习笔记(基础合集)
qq_42186847的博客
10-07 2101
笔记参考来源狂神说Java视频https://www.bilibili.com/video/BV12J41137hu 本篇笔记有点长，可以根据目录定位，建议配合视频学习。 预科 什么是计算机 名称：Computer，全称电子计算机，俗称电脑。 定义：能够按照程序运行，自动、高速处理海量数据的现代化智能电子设备。 组成：由硬件和软件组成。 形式：常见显示有台式计算机、笔记本计算机、大型计算机等。 应用：科学计算、数据处理、自动控制、计算机辅助设计、人工智能、网络等领域。 硬件及冯诺依曼结构 计算机硬件
Java基础笔记
YANKUOP的博客
05-12 1510
Java基础学习记录
Java学习笔记-个人整理的
12-19
{12.21.3}foreign key}{182}{subsection.12.21.3} {12.22}view}{187}{section.12.22} {12.23}index, rowid}{187}{section.12.23} {12.24}sequence}{189}{section.12.24} {12.25}PL/SQL}{189}{section.12.25} {...
TCP/IP技术大全（中文PDF非扫描版）
08-12
16.7.3 访问权限和安全 160 16.8 LDAP服务器-服务器通信 161 16.8.1 LDAP数据互换格式(LDIF) 161 16.8.2 LDAP复制 162 16.9 设计LDAP服务 162 16.9.1 定义需求 162 16.9.2 设计策略 163 16.9.3 性能 164 16.9.4 网络...
前端的面试题
本人小可爱
08-30 779
【代码】前端的面试题。
js对象操作常用方法
m0_75276704的博客
09-02 521
2.构造函数创建 2.方括号 三、添加属性 四、删除属性 五、判断属性是否存在 1.in运算符 2.hasOwnProperty方法 六、遍历对象属性 1.for...in...循环 2.Object.keys，Object.values，Object.entries 七、深拷贝与浅拷贝 1.浅拷贝 2.深拷贝 八、合并对象 Object.assign 九、其他方法 1.Object.is() 比较两个
后端输出二进制数据，前端fetch接受二进制数据，并转化为字符输出
cdcdhj的博客
09-01 474
在这个前端代码中，我们使用fetch API请求PHP脚本，并获取二进制数据。然后，我们将ArrayBuffer转换为字符串，以便在JavaScript中使用。在PHP中，你可以将字符串或其他数据类型转换为二进制数据，并通过HTTP响应发送给前端。
从零开始：我的JaveWeb学习笔记之网页设计初探：探索 HTML 、CSS的奇妙世界（JavaWeb、HTML、CSS）
最新发布
Hanbuhuic的博客
09-04 1287
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它定义了网页的结构和内容，但不包括样式和行为。HTML 由一系列的元素组成，这些元素可以被浏览器识别并渲染成可视化的网页。CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档的样式表语言。它能够控制网页的布局、颜色、字体以及其他视觉和版式特性。CSS 允许开发者将页面的内容（HTML）与页面的表现（CSS）分离，这样可以更灵活地进行设计和维护。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1377
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
深入理解JavaScript闭包：避免常见的内存泄漏问题
官方推荐
09-02 3715
深入理解JavaScript闭包：避免常见的内存泄漏问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值