2024/11/5日 日志 关于BOM浏览器对象模型和DOM文档对象模型的学习与笔记整理
1.2024/10/16 日 日志 --》关于MySQL的中 基础操作的整理以及 DQL的初步学习笔记与整理2.2024/10/17日 日志 --》关于MySQL中的 约束、多表查询的初步学习笔记与整理3.2024/10/18日 日志 --》关于MySQL中的 事务 以及JDBC的初步学习笔记与整理4.2024/10/19日 日志--》关于MySQL中 JDBC的API 详解的整理简述5.2024/10/21 日 日志 --》关于Mysql中的数据库连接池 简述笔记整理6.2024/10/22日 日志 --》关于Maven的基础学习 笔记整理7.2024/10/23日 日志--》关于Maven的基础学习--2 坐标与依赖范围8.2024/10/24日 日志 --》关于Mybatis的学习笔记整理 - 环境与性质 以及ResultMap9.2024/10/25日 日志 --》关于使用Mybatis进行增删改查 ---1 查询10.2024/10/26 日 使用Mybatic --》关于Mybatis 进行增删改查 ---2 添加、修改与删除11.2024/10/28日 使用Mybatic --》关于Mybatis 的参数传递与注解开发12.2024/10/29 HTML --》关于HTML的快速入门与标签13.2024/10/30 日 日志 --》关于CSS的学习14.2024/11/1日 日志 关于JavaScript简介&引入方式 以及基础语法的学习15.2024/11/4日 日志 关于JavaScript 变量、数据类型、类型转换和流程控制语句以及对象的学习
16.2024/11/5日 日志 关于BOM浏览器对象模型和DOM文档对象模型的学习与笔记整理
17.2024/11/6日 日志 正则表达式,web与HTTP18.2024/11/7日 日志 Tomcat简介&基本使用19.2024/11/8日 日志 关于Servlet ----（上）20.2024/11/11日 日志 关于Servlet ----HttpServlet（下）21.2024/11/12日 日志 关于Servlet ---- Request(请求)& Response(响应) 的补充22.2024/11/13日 日志 代码优化 以及 JSP 的快速入门、原理、脚本、缺点 和 EL表达式 以及 JSTL标签23.2024/11/14日 日志 关于 MVC 分层开发模式24.2024/11/15日 日志 关于 会话跟踪技术--- Cookie & Session25.2024/11/20日 日志 关于 Filter & Listener26.2024/11/21日 日志 关于AJAX & Axious异步框架 & JSON27.2024/11/27日 日志 关于Vue && Element28.JavaWeb案例整体分析---》差旅费报销管理信息系统->>题目详情29.JavaWeb案例整体分析---》差旅费报销管理信息系统->>登录与注册30.JavaWeb案例整体分析---》差旅费报销管理信息系统->>数据库操作和Mybatis配置以及pom.xml31.JavaWeb案例整体分析---》差旅费报销管理信息系统->>出差申请与报销部分32.2024/1/13日 日志 关于Vue && Element 的后续---》综合案例（1）33.2024/1/14日 日志 关于Vue && Element 的后续---》综合案例（2）34.2024/1/16日 日志 关于Vue && Element 的后续---》综合案例（4）35.2024/1/17日 日志 关于Vue && Element 的后续---》综合案例（5）36.2024/1/18日 日志 关于Vue && Element 的后续---》综合案例（6）37.2024/1/19日 日志 关于Vue && Element 的后续---》综合案例（7）38.2024/1/20日 日志 关于Vue && Element 的后续---》综合案例（8.1）39.2024/1/21日 日志 关于Vue && Element 的后续---》综合案例（8.2）40.2024/1/22日 日志 期末考试案例回顾与分析---》综合案例（1）41.2024/1/23日 日志 期末考试案例回顾与分析---》综合案例（2）42.2024/1/24日 日志 期末考试案例回顾与分析---》综合案例（3）43.2024/1/25日 日志 期末考试案例回顾与分析---》综合案例（4）44.2024/1/26日 日志 期末考试案例回顾与分析---》综合案例（5）45.2024/1/27日 日志 期末考试案例回顾与分析---》综合案例（6）46.2024/2/3日 日志 期末考试案例回顾与分析---》综合案例（7）47.2024/2/4日 日志 期末考试案例回顾与分析---》综合案例（8）48.2024/2/5日 日志 期末考试案例回顾与分析---》综合案例（9）49.2024/2/6日 日志 期末考试案例回顾与分析---》综合案例（10）50.2024/2/7日 日志 期末考试案例回顾与分析---》综合案例（汇总）51.2024/2/24日 日志 第一次测试案例分析(1)--题目52.2024/2/25日 日志 第一次测试案例分析(2)--数据库层面53.2024/2/26日 日志 第一次测试案例分析(3)--基础准备54.2024/2/27日 日志 第一次测试案例分析(4)--登录与注册和仓库方面和Javascript有关的BOM与DOM及事件监听。
以下是今天的内容
点击查看代码
-- BOM
-- Browser Object Model 浏览器对象模型
-- JavaScript 将浏览器的各个组成部分封装为对象
-- 组成:
-- Window:浏览器窗口对象
-- Navigator:浏览器对象
-- Screen:屏幕对象
-- History:历史记录对象
-- Location:地址栏对象
--
-- Window:浏览器窗口对象
-- ·获取:直接使用 window，其中window.可以省略
-- window.alert("abc");
-- ·属性:获取其他 BOM对象
-- history 对 History 对象的只读引用。请参数 History 对象
-- Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象
-- Screen 对 Screen 对象的只读引用。请参数 Screen 对象
-- location 用于窗口或框架的 Location 对象。请参阅 Location 对象
-- ·方法
-- alert() 显示带有一段消息和一个确认按钮的警告框
-- confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
-- setInterval() 按照指定的周期(以亳秒计)来调用函数或计算表达式
-- setTimeout() 在指定的毫秒数后调用函数或计算表达式
--
-- -- 例：
-- // alert
--
-- // window.alert("abc");
-- // alert("bbb");
--
-- // confirm，点击确定按钮，返回true，点击取消按钮，返回false
--
-- /*var flag = confirm("确认删除？");
--
-- //alert(flag);
--
-- if(flag){
-- //删除逻辑
-- }*/
--
--
-- // 定时器
--
-- /*
-- setTimeout(function,毫秒值): 在一定的时间间隔后执行一个function，只执行一次
--
-- setInterval(function,毫秒值):在一定的时间间隔后执行一个function，循环执行
-- */
--
-- /*setTimeout(function (){
-- alert("hehe");
-- },3000);*/
--
-- setInterval(function (){
-- alert("hehe");
-- },2000);
--
-- History
-- History:历史记录
-- 获取:使用 window.history获取，其中window.可以省略
-- window.history.方法();history.方法();
-- 方法
-- back()
-- forward()
-- 加载 history 列表中的前一个 URL.
-- 加载 history 列表中的下一个 URL。
--
-- Location.
-- Location:地址栏对象
-- 获取:使用 window.location获取，其中window.可以省略
-- window.location.方法();
-- location.方法();
-- 属性
-- href 设置或返回完整的 URL
--
-- DOM
--
-- Document Object Model 文档对象模型
-- · 将标记语言的各个组成部分封装为对象
-- ·Document:整个文档对象
-- ·Element:元素对象
-- ·Attribute:属性对象
-- ·Text:文本对象
-- ·Comment:注释对象
--
-- JavaScript 通过 DOM，就能够对 HTML进行操作了
-- 改变 HTML 元素的内容
-- 改变 HTML元素的样式(CSS)
-- 对 HTML DOM 事件作出反应添加和删除 HTML元素
-- · DOM 是W3C(万维网联盟)的标准
-- · DOM 定义了访问 HTML和 XML 文档的标准
-- · W3C DOM 标准被分为3个不同的部分
-- 1.核心 DOM:针对任何结构化文档的标准模型
-- · Document:整个文档对象
-- · Element:元素对象
-- · Attribute:属性对象
-- · Text:文本对象
-- · Comment:注释对象
-- 2.XMLDOM:针对XML文档的标准模型
-- 3.HTMLDOM:针对 HTML文档的标准模型
-- ·lmage:<img>
-- ·Button :<input type='button'>
--
-- 获取Element对象
-- 获取:使用Document对象的方法来获取
-- 1.getElementByld:根据id属性值获取，返回一个lement对象
-- 2.getElementsByTagName:根据标签名称获取，返回Element对象数组
-- 3.getElementsByName:根据name属性值获取，返回Element对象数组
-- 4.getElementsByClassName:根据class属性值获取，返回Element对象数组
--
-- -- 例：
-- <!DOCTYPE html>
-- <html lang="en">
-- <head>
-- <meta charset="UTF-8">
-- <title>DOM</title>
-- </head>
-- <body>
-- <img id="light" src="../imgs/off.gif"> <br>
--
-- <div class="cls">传智教育</div> <br>
-- <div class="cls">黑马程序员</div> <br>
--
-- <input type="checkbox" name="hobby"> 电影
-- <input type="checkbox" name="hobby"> 旅游
-- <input type="checkbox" name="hobby"> 游戏
-- <br>
--
-- <script>
-- /*
-- 获取：使用Document对象的方法来获取
-- * getElementById：根据id属性值获取，返回一个Element对象
-- * getElementsByTagName：根据标签名称获取，返回Element对象数组
-- * getElementsByName：根据name属性值获取，返回Element对象数组
-- * getElementsByClassName：根据class属性值获取，返回Element对象数组
--
-- */
-- //1. getElementById：根据id属性值获取，返回一个Element对象
-- var img = document.getElementById("light");
-- // alert(img);
--
-- //2. getElementsByTagName：根据标签名称获取，返回Element对象数组
--
-- var divs = document.getElementsByTagName("div");
-- // alert(divs.length);
-- /* for (let i = 0; i < divs.length; i++) {
-- alert(divs[i]);
-- }*/
--
-- //3. getElementsByName：根据name属性值获取，返回Element对象数组
-- var hobbys = document.getElementsByName("hobby");
-- /* for (let i = 0; i < hobbys.length; i++) {
-- alert(hobbys[i]);
--
-- }*/
--
-- //4. getElementsByClassName：根据class属性值获取，返回Element对象数组
--
-- var clss = document.getElementsByClassName("cls");
-- for (let i = 0; i < clss.length; i++) {
-- alert(clss[i]);
--
-- }
--
--
--
-- </script>
-- </body>
-- </html>
--
-- 常见HTML Element对象的使用
--
-- 例:
-- <!DOCTYPE html>
-- <html lang="en">
-- <head>
-- <meta charset="UTF-8">
-- <title>Title</title>
-- </head>
-- <body>
-- <img id="light" src="../imgs/off.gif"> <br>
--
-- <div class="cls">传智教育</div> <br>
-- <div class="cls">黑马程序员</div> <br>
--
-- <input type="checkbox" name="hobby"> 电影
-- <input type="checkbox" name="hobby"> 旅游
-- <input type="checkbox" name="hobby"> 游戏
-- <br>
--
-- <script>
-- //1. getElementById：根据id属性值获取，返回一个Element对象
-- var img = document.getElementById("light");
-- // alert(img);
-- img.src = "../imgs/on.gif";
--
-- //2. getElementsByTagName：根据标签名称获取，返回Element对象数组
-- var divs = document.getElementsByTagName("div");
-- /*
-- style:设置元素css样式
-- innerHTML：设置元素内容
-- */
--
-- for (let i = 0; i < divs.length; i++) {
-- //divs[i].style.color = 'red';
-- divs[i].innerHTML = "呵呵";
-- }
--
-- //3. getElementsByName：根据name属性值获取，返回Element对象数组
-- var hobbys = document.getElementsByName("hobby");
-- for (let i = 0; i < hobbys.length; i++) {
-- //alert(hobbys[i]);
-- hobbys[i].checked = true;
-- }
--
-- //4. getElementsByClassName：根据class属性值获取，返回Element对象数组
--
-- var clss = document.getElementsByClassName("cls");
-- /*for (let i = 0; i < clss.length; i++) {
-- alert(clss[i]);
--
-- }*/
--
--
--
-- </script>
-- </body>
-- </html>
--
-- 查阅文档使用
--
--
-- 事件监听
--
-- ·事件:HTML事件是发生在 HTML元素上的“事情”。比如:
-- ·按钮被点击
-- ·鼠标移动到元素之上
-- ·按下键盘按键
-- ·事件监听:JavaScript 可以在事件被侦测到时执行代码
-- ·事件绑定有两种方式
-- · 方式一:通过 HTML标签中的事件属性进行绑定
-- <input type="button" onclick='on()'>
-- function on(){alert("我被点了");}
-- 方式二:通过 DOM 元素属性绑定
-- <input type="button" id="btn">
-- document.getElementByld("btn").onclick = function (){alert("我被点了")};
--
-- 常见事件
-- 事件名 说明
-- onclick 鼠标单击事件
-- onblur 元素失去焦点
-- onfocus 元素获得焦点
-- onload 某个页面或图像被完成加载
-- onsubmit 当表单提交时触发该事件
-- onkeydown 某个键盘的键被按下
-- onmouseover 鼠标被移到某元素之上
-- onmouseout 鼠标从某元素移开
-- ·Event代表事件对象
-- 案例：表单验证
-- <!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>
--
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· DeepSeek在M芯片Mac上本地化部署