JS学习笔记day05（完结）！

news2024/11/24 20:33:59

今日内容

零、 复习昨日
一、作业
二、BOM
三、定时器
四、正则表达式

零、 复习昨日

事件

  • 事件绑定方式
  • 鼠标事件
    • onmouseover
    • onmouseout
    • onmousemove
  • 键盘事件
    • onkeydown
    • onkeyup
    • onkeypress
  • 表单事件
    • onfocus
    • onblur
    • onchange
    • onsubmit
  • 页面加载事件
    • onload

dom

  • dom树
  • 查找dom
    • document.getElementById(“id”)
    • document.getElementsByTagName(“p”)
    • document.getElementsByClassName(“c1”)
  • 查找设置标签内容
    • innerText
    • innerHTML
  • 查找设置标签的属性
    • var a = dom.属性;
    • dom.属性 = “”
  • 查找设置标签的样式
    • var a = dom.style.css属性
    • dom.style.css属性 = “”
  • 元素操作
    • 创建元素 document.createElement(“li”)
    • 创建文本 document.createTextNode(“文本”)
    • 元素内部追加内容 document.appendChild()
    • 元素内部删除子元素 document.removeChild()

Jquery是js框架,把js的操作封装

$(“#id”).val()

一、作业

二、BOM

  • 浏览器对象模型 (BOM-Browser Object Model) 使 JavaScript 有能力与浏览器"对话"。

  • 由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

2.1 window

  • 所有浏览器都支持 window 对象。它表示浏览器窗口。

  • 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

  • 全局变量是 window 对象的属性。

  • 全局函数是 window 对象的方法。

  • 甚至 HTML DOM 的 document 也是 window 对象的属性之一

  • Window Location
    • window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
    • window.location可以获得大量的数据。
    • window.location 对象在编写时可不使用 window 这个前缀。 一些例子：
      • location.hostname 返回 web 主机的域名
      • location.pathname 返回当前页面的路径和文件名
      • location.port 返回 web 主机的端口 （80 或 443）
      • location.protocol 返回所使用的 web 协议（http:// 或 https://）
      • location.href 属性返回当前页面的 URL （使用场景，数据的增删改查中页面再次发生请求刷新。跳转页面到指定路径）
      • location.assign() 方法加载新的文档

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uM4QWI4u-1678520626084)(D:\前锋学习笔记\笔记\image-20230311104924073.png)]

<html>
<head>
<script>
function newDoc(){
  window.location.assign("http://www.baidu.com/")
 }
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>
  • Window History
    • window.history 对象包含浏览器的历史。
    • window.history 对象在编写时可不使用 window 这个前缀。
      • history.back() 与在浏览器点击后退按钮相同
      • history.forward() 与在浏览器中点击按钮向前相同
    • 一些方法示例如下：

2.1.1 location

  • 表示当前浏览器的链接地址
  • 可以读取地址
  • 可以修改地址
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>location</title>
	</head>
	<body>
		<input type="text" name="url" id="url" placeholder="请输入链接地址..."/>
		<button type="button" onclick="showUrl()">打印当前链接</button>
		<button type="button" onclick="toUrl()">跳转</button>
		<button type="button" onclick="assignUrl()">替换url</button>
	</body>
	
	<script type="text/javascript">
		/* 
			打印当前链接
		 */
		function showUrl(){
			console.log(window.location.href);
		}
		
		/**
		 * 跳转
		 * 	1、获取输入框中的链接
		 * 	2、修改location的href属性
		 */
		function toUrl(){
			// 获取输入的内容
			var newUrl = document.getElementById("url").value;
			
			// 修改href属性
			location.href = newUrl;
		}
	</script>
</html>

2.1.2 history

  • 浏览器历史
  • 能控制浏览器页面的前进和后退的跳转
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>a</title>
	</head>
	<body style="background-color: antiquewhite;">
		<a href="a.html">a页面</a>
		<a href="b.html">b页面</a>
		<hr >
		
		<button type="button" onclick="backPage()">上一页</button>
		<button type="button" onclick="forwardPage()">下一页</button>
	</body>
	
	<script type="text/javascript">
		// 后退一页
		function backPage(){
			window.history.back();
		}
		
		// 前进一页
		function forwardPage(){
			window.history.forward();
		}
	</script>
	
</html>

三、定时器

  • 设置定时器
    • setInterval(调用函数,毫秒时间)：每间隔固定毫秒值就执行一次函数
    • setTimeout(调用函数,毫秒时间)：在固定时间之后执行一次调用函数
  • 关闭定时器：
    • clearInterval(定时器名称) intterval间隔
    • clearTimeout(定时器名称)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ka4Hn1JW-1678520626084)(D:\前锋学习笔记\笔记\image-20230311112959211.png)]

<body>
		<button type="button" onclick="showTimeOut()">倒计时</button>
		<button type="button" onclick="showInterval()">定时执行</button>
		<button type="button" onclick="showName()">随机显示名字</button>
		<div id="box">
			10
		</div>
		
		<!-- 展示名字 -->
		<div id="name-box">
			姓名
		</div>
	</body>
	<script type="text/javascript">
		/**
		 * 定时执行
		 * 	每间隔指定的时间执行一次
		 * 
		 * 倒计时执行
		 * 	给定义一个时间，时间到了执行一次
		 */
		function showTimeOut(){
			// 设置倒计时,3000毫秒之后执行
			setTimeout(function() {
				alert("时间到");
			}, 3000);
		}

		// 每一秒输出一个随机数字
		setInterval(function(){
			console.log(Math.random());
		},1000);
		
		var num = 10;
		// 定时器
		var timer;
		function showInterval(){
			// 开启定时器,间隔一秒执行一次
			timer = setInterval(function(){
				document.getElementById("box").innerText = --num;
				if (num <= 0) {
					// 清除定时器
					alert("发射");
					clearInterval(timer);
				}
			},1000);
		}
		
		var nameList = ["杜学帅","崔芙蓉","梅永芳","孙浩翔","宋宁波","李鑫","夏文博","郭森","苏红伟","豆艳磊","张志炜","李潇龙","马鹏飞","崔峻豪","陈鑫淼","姚俊杰","石玉剑","夏先飞","丁康","杨迎港","刘政锴","宋一帆","郝正鑫","张子龙","刘文强","赵凯鑫","黄晨","张德鹏","张勇皓","董子豪","吴浩源","全永岐","冯迪","王翌豪","王本业","蔡明星","王柯然","王烁","肖先丽","熊枫","张恒","戚兴康","申庆峰","关丽娟"];
		/**
		 * 定时切换姓名
		 */
		function showName(){
			setInterval(function(){
				// 每一秒生成一个名字的随机索引
				var nameIndex = parseInt(Math.random()*nameList.length);
				// 每一秒修改一次显示的名字
				document.getElementById("name-box").innerText = nameList[nameIndex];
			},100);
		}
	</script>

四、正则表达式

4.1 正则表达式

  • 正则表达式是描述字符模式的对象。
  • 正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
  • 语法：
    • var patt=new RegExp(pattern,modifiers);
    • var patt=/pattern/modifiers;

4.2 基本知识

var re = new RegExp("模板");
var re = /模板/;

方括号：用于查找某个范围内的字符

表达式描述
[abc]查找方括号之间的任何字符。
[^abc]查找任何不在方括号之间的字符。
[0-9]查找任何从 0 至 9 的数字。
[a-z]查找任何从小写 a 到小写 z 的字符。
[A-Z]查找任何从大写 A 到大写 Z 的字符。
[A-z]查找任何从大写 A 到小写 z 的字符。
(red|blue|green)查找任何指定的选项。

元字符（Metacharacter）：是拥有特殊含义的字符：

元字符描述
.查找单个字符，除了换行和行结束符。
\w查找单词字符。
\W查找非单词字符。
\d查找数字。
\D查找非数字字符。
\s查找空白字符。
\S查找非空白字符。
\b匹配单词边界。
\B匹配非单词边界。
\0查找 NULL 字符。
\n查找换行符。
\f查找换页符。
\r查找回车符。
\t查找制表符。
\v查找垂直制表符。
\xxx查找以八进制数 xxx 规定的字符。
\xdd查找以十六进制数 dd 规定的字符。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

量词：用于表示重复次数的含义

量词描述
n+匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”。
n*匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。
n?匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。
n{X}匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。
n{X,}X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
n{X,Y}X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。
n{X}前面的模式 n 连续出现X 次时匹配
n$匹配任何结尾为 n 的字符串。
^n匹配任何开头为 n 的字符串。
?=n匹配任何其后紧接指定字符串 n 的字符串。
?!n匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象方法

方法描述
compile编译正则表达式。
exec检索字符串中指定的值。返回找到的值，并确定其位置。
test检索字符串中指定的值。返回 true 或 false。

正则表达式的使用

  • test方法：搜索字符串指定的值，根据结果并返回真或假
  • exec() 方法：检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));

var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));

4.3 演示

<body>
    数据<input id="i1" onblur="checkData()" />
    <script>
      var i1 = document.getElementById("i1");
      function checkData() {
        var val = i1.value;
        // 创建正则表达式1
        // var reg = new RegExp("[0-9]");
        // 创建正则表达式2
        var reg = /[0-9]/; // 模板1: 判断内容是否包含0-9之间任何一个数字
        var reg2 = /[a]/; // 模板2: 是否包含a
        var reg3 = /[abc]/; // 模板3: 是否包含abc中任何一个
        var reg4 = /[a-z]/; // 模板4: 是否包含a-z中任何一个
        var reg5 = /[A-Z]/; // 模板5: 是否包含A-Z中任何一个
        var reg6 = /[a-zA-Z]/; // 模板6: 是否包含大小写中任何一个
        var reg7 = /[A-z]/; // 模板7: 是否包含大小写中任何一个(因为ascll码值)
        var reg8 = /[0-9A-Za-z]/; // 模板8: 是否包含数字或者字母
        var reg9 = /[\dA-Za-z]/; // 模板9: 是否包含数字或者字母
        var reg10 = /\d+/; // 匹配至少一个数字
        var reg11 = /\d*/; // 匹配0或者多个数字
        var reg12 = /\d?/; // 匹配0或者1个,只要字符串内有1个或0个就对
        var reg13 = /^\d?$/; // 匹配整个内容中只能有0或者1个数字
        var reg14 = /^\d{4}$/; // 整个内容中只能有数字,且数字个数是4位
        var reg15 = /^\d{4,6}$/; // 整个内容中只能有数字,且数字个数是4-6位
        var reg16 = /^\d{4,}$/; // 整个内容中只能有数字,且数字个数是至少4位
        // 匹配手机号
        // 手机号开头必须是1,第二位可以是3,5,6,8,9,后续数字任意,总长得11位
        var reg17 = /^1[35689]\d{9}$/;

        // 匹配邮箱 237876779@qq.com
        // 开头是数字或者字母,其中必须包含@符号,@后可以是数字和字母,必须有.符号,后面必须是字母
        // .是正则表达式的特殊符号,需要转移
        var reg18 = /^[\dA-Za-z]+@[\da-z]+\.[a-z]+$/;
        console.log(reg18.test(val));
        // 置空
        // i1.value = "";

        // 重点是能看懂就行,会写简单模板
      }
    </script>
  </body>

4.4 练习

image-20230309170043184

image-20230309170051385

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/403653.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

what data contract

what data contract

URLS 笔记内容主要来自 https://learn.microsoft.com/en-us/azure/cloud-adoption-framework/scenarios/cloud-scale-analytics/architectures/data-contracts Data contracts Data contracts are similar to service contracts or data delivery contracts.A contract also…
阅读更多...
One-YOLOv5 v1.2.0发布：支持分类、检测、实例分割

One-YOLOv5 v1.2.0发布：支持分类、检测、实例分割

One-YOLOv5 v1.2.0正式发布。完整更新列表请查看链接&#xff1a;https://github.com/Oneflow-Inc/one-yolov5/releases/tag/v1.2.0&#xff0c;欢迎体验新版本&#xff0c;期待你的反馈。 1 新版本特性 1. 同步了Ultralytics YOLOv5的上游分支v7.0&#xff0c;同时支持分类、目…
阅读更多...
多校园SaaS运营智慧校园云平台源码 智慧校园移动小程序源码

多校园SaaS运营智慧校园云平台源码 智慧校园移动小程序源码

智慧校园管理平台源码 智慧校园云平台源码 智慧校园全套源码包含&#xff1a;电子班牌管理系统、成绩管理系统、考勤人脸刷卡管理系统、综合素养评价系统、请假管理系统、电子班牌发布系统、校务管理系统、小程序移动端、教师后台管理系统、SaaS运营云平台&#xff08;支持多学…
阅读更多...
每天学一点之Stream流相关操作

每天学一点之Stream流相关操作

StreamAPI 一、Stream特点 Stream是数据渠道&#xff0c;用于操作数据源&#xff08;集合、数组等&#xff09;所生成的元素序列。“集合讲的是数据&#xff0c;负责存储数据&#xff0c;Stream流讲的是计算&#xff0c;负责处理数据&#xff01;” 注意&#xff1a; ①Str…
阅读更多...
Java面试总结（六）

Java面试总结（六）

进程和线程的区别 根本区别&#xff1a; 进程时操作系统资源分配的基本单位&#xff0c;而线程是处理器任务调度和执行的基本单位。 资源开销&#xff1a; 每个进程都有自己独立的代码和数据空间&#xff08;程序上下文&#xff09;&#xff0c;进程之间的切换开销比较大&…
阅读更多...
狂扫近300万读者，蟒蛇书升级版即将出版，招募审读人

狂扫近300万读者，蟒蛇书升级版即将出版，招募审读人

狂扫全世界近 300 万爱好者成为编程领域的现象级爆品豆瓣累计超过 5000 人评价第2版中文版获得了 9.3 分的好评Amazon 近 10000 人评价第2版原版获得了 4.7 星好评毫不夸张&#xff0c;它是全世界读者心中的 Python 入门圣经因为封面上是一只蠢萌的蟒蛇这本书又被读者亲切地称为…
阅读更多...
SQL注入——文件上传

SQL注入——文件上传

目录 一&#xff0c;mysql文件上传要点 二&#xff0c;文件上传指令 一句话木马 三&#xff0c;实例 1&#xff0c;判断注入方式 2&#xff0c;测试目标网站的闭合方式&#xff1a; 3&#xff0c;写入一句话木马 4&#xff0c;拿到控制权 一&#xff0c;mysql文件上传…
阅读更多...
【面试系列】volatile的底层原理

【面试系列】volatile的底层原理

并发编程的三大特性 原子性可见性原子性 JAVA内存模型 Java内存模型&#xff08;Java Memory Model&#xff09;主要分为主内存和线程工作内存。 主内存&#xff1a;方法区和堆空间 线程工作内存&#xff1a;虚拟机栈&#xff0c;本地方法栈&#xff0c;程序计数器。 所有…
阅读更多...
centos安装docker详细步骤

centos安装docker详细步骤

目录 一.前言 1.环境要求2.官网中文安装参考手册 二.安装步骤 1.卸载旧版本2.安装需要的软件包3.设置docker镜像源 1.配置docker镜像源 方式1&#xff1a;官网地址(外国)&#xff1a;方式2&#xff1a;阿里云源&#xff1a;2.查看配置是否成功 4.更新yum软件包索引5.可以查看…
阅读更多...
C++ | 探究函数重载的原理：函数名修饰【基于Windows + Linux双系统】

C++ | 探究函数重载的原理：函数名修饰【基于Windows + Linux双系统】

文章目录一、前言【中国乒乓和中国男足】【文言文一词多义】二、函数重载概念引入1、参数【类型】不同构成重载2、参数【个数】不同构成重载3、参数【类型顺序】不同构成重载三、函数重载的原理1、回顾程序编译 链接的过程2、Linux下【objdump】查看反汇编3、Windows下反汇编查…
阅读更多...
Maven安装与配置，IDEA配置Maven

Maven安装与配置，IDEA配置Maven

文章目录1. 安装本地Maven2. 安装3. 配置环境变量4. 配置settings.xml文件5. IDEA配置1. 安装本地Maven 官网下载&#xff1a;https://maven.apache.org/download.cgi 2. 安装 把下载好的maven压缩包解压到一个没有中文&#xff0c;空格或其他特殊字符的文件夹&#xff0c;…
阅读更多...
数据结构与算法基础（王卓）（15）：KMP算法详解（含速成套路和详细思路剖析）

数据结构与算法基础（王卓）（15）：KMP算法详解（含速成套路和详细思路剖析）

如果时间不够&#xff0c;急&#xff08;忙&#xff09;着应付考试没心思看&#xff0c;直接参考&#xff08;照抄&#xff09;如下套路&#xff1a; PART 1&#xff1a;关于next [ j ] PPT&#xff1a;P30 根据书上以及视频上给出的思路&#xff08;提醒&#xff09;&#x…
阅读更多...
JSONP劫持

JSONP劫持

注意&#xff1a;仅用于技术讨论&#xff0c;切勿用于其他用途&#xff0c;一切后果与本人无关&#xff01;&#xff01;&#xff01; 个人博客地址&#xff1a;HJW个人博客 扩展&#xff1a; 面试问题&#xff1a;CSRF的两种方法中&#xff0c;CORS和JSONP的区别&#xff1…
阅读更多...
dubbo进阶——服务导出

dubbo进阶——服务导出

服务导出 在这里记录一下对" Dubbo 导出服务的过程"的研究。 触发时机 public class ServiceBean<T> extends ServiceConfig<T> implements InitializingBean, DisposableBean, ApplicationContextAware, ApplicationListener<ContextRefreshedEv…
阅读更多...
代码随想录--数组--螺旋矩阵题型

代码随想录--数组--螺旋矩阵题型

n等于几&#xff0c;螺旋矩阵最外层行列数就等于几。如n等于3所以最外层一圈的行、列都是3个数字&#xff0c;如左图&#xff0c;n等于4所以最外层的行、列都是4个数字&#xff0c;如右图&#xff1a; 题目要求我们输出(以n3为例)[[123][894][765]]&#xff0c;题目只是给我们一…
阅读更多...
MySQL：索引与事物

MySQL：索引与事物

目录 简单了解索引的底层数据结构 索引的概念&#xff1a; 索引存在的意义&#xff1a; 索引的使用&#xff1a; 索引实现的数据结构 B树 B 树 B 树的特点 B 树的优势 事物 事物的概念 事物的使用 事物的四大特性 并发可能引起的问题 脏读问题 不可重复读 幻读…
阅读更多...
未系安全带识别系统 yolo

未系安全带识别系统 yolo

未系安全带识别系统通过pythonyolo智能视频分析技术&#xff0c;未系安全带识别算法对画面中高空作业人员未系安全带行为进行监测&#xff0c;未系安全带识别算法监测到人员未穿戴安全带时&#xff0c;立即通知后台人员及时处理触发告警。Yolo算法采用一个单独的CNN模型实现end…
阅读更多...
算法24：LeetCode_并查集相关算法

算法24：LeetCode_并查集相关算法

目录 题目一&#xff1a;力扣547题&#xff0c;求省份数量 题目二&#xff1a;岛屿数量 题目三&#xff1a;岛屿数量拓展 什么是并查集&#xff0c;举个简单的例子。学生考试通常会以60分为及格分数&#xff0c;我们将60分及以上的人归类为及格学生&#xff0c;而60分以下归…
阅读更多...
mysql学习之数据系统概述

mysql学习之数据系统概述

☀️马上要成为打工人&#xff0c;这几天把前面的知识都捡了捡&#xff0c;发现自己对关系数据库这块的学习还有所缺失&#xff0c;于是本章开始学习mysql 这里写目录标题1. 数据库系统的发展1.1 人工管理阶段1.2 文件系统阶段1.3 数据库阶段1.4 大数据阶段2 数据库系统的组成2…
阅读更多...
扬帆优配|2600亿汽车巨头闪崩近9%，汽车股惊现“冰火两重天”！

扬帆优配|2600亿汽车巨头闪崩近9%，汽车股惊现“冰火两重天”！

今日早盘&#xff0c;A股全体低开震荡调整&#xff0c;首要股指跌逾1%&#xff0c;科创板体现略强&#xff0c;盘中一度直线拉升翻红&#xff0c;两市一度近4200股下跌。 盘面上&#xff0c;轿车服务、信创、半导体等板块相对强势&#xff0c;轿车整车、超导概念、一体压铸、建…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023