JavaScript阶段总结：心酸与前进_前行,不择手段!javascript:;-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_80304567/article/details/143714784

这段时间学习前端的内容，中间也想过放弃，最终还是凭借我的韧性克服了遇到的一堆一堆的问题，终于要离开js了，向下了解jQuery第三方库，再学一学相关的内容，就可以离开这个让人烦躁的区域了，不过走出舒适圈还不错。

看着学了一个月的东西，结最后却并不需要我使用什么BOM和DOM的知识做一个小案例：表单验证；虽然最后觉得有点不完全，但是我的知识层面也不足以支撑我应对有多么多么高深的内容，所以就向下了解了一点 jQuery Validate这个第三方库，具体也是配置了相应的使用路径，面对我写完丑的离谱的表单，我毫不犹豫的使用ai生成了稍微整齐的表单样式，面对不知道如何调整的问题，我使用了1个小时入门了css，了解了选择器以及如何关联css内容，没想到大概就这样，今天验收具体内容的时候，成功的让我对前端进一步劝退，没关系，了解一下前端，遇到内容会改就好，套壳子就行。

具体实现效果：

如下是表单最终实例代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="jquery.validate.min.js"></script>
    <style>
        form {
            border: 1px solid #ccc;
            padding: 20px;
            background-color: #f9f9f9;
        }

        label {
            display: inline-block;
            margin-bottom: 5px;
            width: 100px;
            text-align: center;
            margin-right: 10px;
			font-size: 18px;
			vertical-align: middle;
        }

        input[type="text"],
        input[type="email"],
		select{
            width: 30%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
			font-size: 18px;
        }
		
		
		/* 调整单选按钮和文本间距及布局 */
		input[type="radio"] + label {
		    margin-left: 0px;
		    margin-right: 10px;
		    width: 20px;
		    height: 20px;
		}

		
        input[type="submit"] {
            background-color: #aa5500;
            color: white;
            padding: 10px 20px;
            border: 1px;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 50px;
        }

        

		.error {
		    color: red;
		    font-size: 15px;
		    margin-left: 10px; /* 增加左侧间距，使提示信息与输入框或其他元素隔开一定距离 */
		    display: inline-block; /* 以行内块元素显示，方便在一行排列 */
		    vertical-align: middle; /* 垂直居中对齐，使其在视觉上更整齐 */
		    white-space: nowrap; /* 禁止文本换行，确保错误提示内容不会因为太长而换行显示 */
		}
		/* 新增样式用于包裹错误提示信息，使其能在一行内排列并超出部分隐藏 */
        .error-wrapper {
            white-space: nowrap; /* 禁止文本换行 */
            overflow: visible; /* 超出部分显示出来 */
            display: inline-block; /* 设置为行内块元素显示 */
            font-size: 10px;
        }
    </style>
</head>

<body>
    <form id="commentForm" method="get" >
        <fieldset>

            <p>
                <label for="cname">姓名：</label>
                <input id="cname" name="name"  type="text">
            </p>
            <p>
                <label for="cemail">邮件：</label>
                <input id="cemail" type="email" name="email">
            </p>

            <p>
                <label for="gender" id="gender">性别：</label>

                <input type="radio" id="male" name="gender" value="male">
                <label for="male">男</label>
                <input type="radio" id="female" name="gender" value="female">
                <label for="female">女</label>

            </p>
			<p>
			    <label for="education" id="education">学历：</label>
			    <select size="1" name="education" title="学历">
			        <option value="" selected>请选择一个学历</option>
					<option value="小学">小学</option>
					<option value="初中">初中</option>
			        <option value="高中">高中</option>
			        <option value="大学">大学</option>
			        <option value="研究生">研究生</option>
			    </select><br>
			</p>
            
            <p>
                <label for="hobbies">兴趣爱好：</label>
                <input type="checkbox" id="reading" name="hobbies" value="reading">
                <label for="reading">阅读</label>
                <input type="checkbox" id="sports" name="hobbies" value="sports">
                <label for="sports">运动</label>
                <input type="checkbox" id="music" name="hobbies" value="music">
                <label for="music">音乐</label>
                <input type="checkbox" id="travel" name="hobbies" value="travel">
                <label for="travel">旅行</label>

            </p>
			
            <p>
                <label for="comment">个人介绍：</label>
                <textarea id="comment" name="comment" ></textarea>
            </p>
			
            <p>
                <input class="submit" type="submit" value="提交" onclick="alert('提交成功');">
            </p>
        </fieldset>
    </form>
    <script>
        $(document).ready(function () {
            $("#commentForm").validate({
                // 以下是验证规则及消息等代码,没有出现错漏
                rules: {
                    name: {
                        required: true,
                        minlength: 2,
                        maxlength: 8
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    comment: {
                        required: true,
                        minlength: 10
                    },
                    gender: {
                        required: true
                    },
                    education: {
                        required: true,

                    }
                },
                messages: {
                    name: {
                        required: "请输入姓名",
                        minlength: "姓名输入2 - 8个字符"
                    },
                    email: {
                        required: "请输入邮箱",
                        email: "请输入正确的邮箱格式"
                    },
                    comment: {
                        required: "请输入不少于十个字符的简介",
                        minlength: "最短长度为10"
                    },
                    gender: {
                        required: "请选择性别"
                    },
                    education: {
                        required: "请填写学历，不允许不填"
                    }
                },
                errorPlacement: function (error, element) {
                    if (element.attr('type') === 'radio') {
                        // 对于单选按钮，将错误提示信息添加到当前单选按钮所在行的最右侧
                        var parentRow = element.closest('p'); // 获取当前单选按钮所在的 <p> 元素，即所在行
                        parentRow.append(error); // 将错误提示添加到该行的末尾，也就是最右侧
                
                        // 设置错误提示元素的样式，使其能在同一行正确显示
                        error.css({
                            'float': 'right', // 让错误提示元素向右浮动，使其尽量靠右侧显示
                            'margin-right': '10px' // 设置右侧间距，使其与右侧元素有一定间隔
                        });
                
                        // 获取包裹错误提示信息的.error-wrapper元素，并设置其样式
                        var wrapper = error.parent('.error-wrapper');
                        wrapper.css({
                            'width': 'auto', // 设置宽度为自动，根据内容自适应，但受限于设置的最大宽度
                            'display': 'inline-block', // 确保以行内块方式显示
                            'vertical-align': 'left' // 垂直居中对齐
                        });
                    } else {
                        // 对于其他输入框，保持默认的错误提示放置方式
                        error.insertAfter(element);
                    }
                
                    // 将错误提示信息包裹在.error-wrapper元素内，实现一行显示且超出隐藏的效果
                    var wrapper = $('<div class="error-wrapper"></div>');
                    error.wrap(wrapper);
                }
            });
        });
    </script>
</body>

</html>

如下是对应的学习笔记：

总结

ECMAscript 是一种规范，而另外两个都是提供了“方法”，分别对应 HTML 元素与浏览器，于是我们针对 DOM 和 BOM 进行学习。

分类	What	Why	Where	How
ECMAScript	是一种标准化的脚本语言规范，定义了 JavaScript 的语法、类型、语句、关键字等。	为了实现跨不同浏览器和平台的一致的脚本编程体验。	在各种支持 JavaScript 的环境中，包括浏览器、服务器端等。	通过符合 ECMAScript 规范的解释器或编译器来执行代码，开发人员使用其定义的语法和特性进行编程。
DOM（Document Object Model）	是一种用于 HTML 和 XML 文档的编程接口，将文档表示为节点树，允许通过 JavaScript 等语言来操作文档结构、内容和样式。	方便开发人员动态地修改网页内容、响应用户交互、实现复杂的网页功能。	在浏览器环境中，用于操作网页文档。	使用 DOM 提供的方法和属性，如 `document.getElementById()`等来获取和操作文档中的元素。
BOM（Browser Object Model）	是一组用于与浏览器窗口进行交互的对象集合，包括 `window`、`location`、`history`、`navigator` 等对象。	控制浏览器窗口、进行页面导航、获取浏览器信息等，以提供更好的用户体验和实现特定的浏览器功能。	浏览器环境中，主要与浏览器窗口相关。	通过调用 BOM 对象的方法，如 `window.open()`、`location.href`等来执行相应的操作。

事件处理机制：

分类	What	Why	Where	How
事件捕获	事件传播从最外层祖先元素向目标元素传播的阶段。	可在事件到达目标元素前进行预处理或拦截操作。	网页中的元素层级结构中，从外到内。	通常与事件冒泡结合使用，可在特定元素上设置捕获阶段的事件监听器。
事件触发	特定用户操作或系统行为发生时，自动调用与之相关联的事件处理函数。	实现网页交互性，动态更新页面内容，执行特定任务等。	在网页中各种用户操作和系统行为发生的地方。	通过用户操作直接触发，或系统行为自动触发。
事件监听	一种用于捕获和响应特定事件的机制。在特定元素上注册事件处理函数，当相应事件发生时，该函数被调用。	实现交互性、动态更新页面、响应系统行为等。	网页中的各种元素上，可以为特定元素添加事件监听器。	使用`addEventListener`方法为元素添加事件监听器，也可使用内联事件处理。
事件冒泡	当一个元素上的事件被触发后，事件从目标元素向其祖先元素传播。	方便事件处理，可在父元素上统一处理子元素事件，实现复杂交互效果。	网页中的嵌套元素结构中。	事件在子元素触发后，若未阻止，会自动向上冒泡。
事件委托	利用事件冒泡特性，将事件处理程序注册在父元素上，以处理子元素的事件。	减少内存占用，处理动态生成的子元素事件更方便。	网页中的父元素与子元素关系中。	在父元素上注册事件处理程序，通过判断事件目标来确定子元素并执行相应逻辑。

以下是对var、let、const的对比：

分类	var	let	const
作用域	函数作用域或全局作用域	块级作用域	块级作用域
变量提升	存在变量提升，可在声明前使用（值为`undefined`）	不存在变量提升，在声明前使用会报错	不存在变量提升，在声明前使用会报错
可重复声明	在同一作用域内可重复声明	在同一作用域内不可重复声明	在同一作用域内不可重复声明
是否必须初始化	不必在声明时立即初始化	不必在声明时立即初始化	必须在声明时初始化
重新赋值	可以重新赋值	可以重新赋值	对于基本数据类型不能重新赋值，对于引用数据类型不能重新指向新的引用，但可以修改其内部属性或元素

原生 js 和第三方库的对比

维度	原生JS	第三方库（示例以jQuery为例）
What（是什么）	- 是一种脚本语言，用于为网页添加交互性和动态功能。 - 提供了一系列的内置对象（如Document、Window等）和函数（如setInterval、alert等）来操作DOM、处理事件、进行数据处理等。	- 是一个流行的JavaScript库，简化了许多常见的JavaScript任务，如DOM操作、事件处理、动画效果等。 - 提供了简洁易用的API，例如`$(selector)`用于选择DOM元素，`$(element).hide()`用于隐藏元素等。
Why（为什么）	- 不需要引入额外的库，减少了项目的依赖和文件体积。 - 对JavaScript语言有更深入的理解和掌握，有助于提升编程技能。 - 适合简单的、小型的项目或对性能要求极高且对代码体积敏感的场景。	- 提高开发效率，通过简洁的API可以快速实现复杂的功能，如复杂的DOM操作和动画效果，节省大量开发时间。 - 跨浏览器兼容性较好，解决了一些原生JS在不同浏览器中表现不一致的问题。 - 适合中大型项目，尤其是需要快速开发且对代码可读性和易用性有要求的场景。
When（何时）	- 当项目对代码体积有严格限制，不希望引入额外的库。 - 执行简单的、基础的任务，如显示一个简单的警告框（`alert`）、设置定时器（`setInterval`）等。 - 开发人员希望深入学习和掌握JavaScript本身的特性和功能。	- 当需要快速实现复杂的DOM操作，如动态添加、删除、修改大量DOM元素。 - 制作动画效果，如淡入淡出（`fadeIn`、`fadeOut`）、滑动（`slideUp`、`slideDown`）等。 - 处理跨浏览器兼容性问题，确保代码在不同浏览器中表现一致。
How（如何）	- 直接在HTML页面中通过`<script>`标签引入JavaScript代码，或者将JavaScript代码写在单独的`.js`文件中，再通过`<script>`标签引入。 - 使用内置对象和函数按照JavaScript语法规则进行编程操作。例如，通过`document.getElementById('id')`获取DOM元素，通过`addEventListener`处理事件等。	- 首先需要下载相应的第三方库文件（如jQuery的`.js`文件），然后通过`<script>`标签引入到HTML页面中。 - 按照第三方库提供的API文档进行编程操作。例如，使用`$(selector)`选择DOM元素后，再根据具体需求使用相关的函数，如`$(element).addClass('class-name')`添加类名等。