JS_3(正则表达式、事件、DOM、BOM、定时器、延时器)

最新推荐文章于 2023-08-16 16:02:42 发布

小镇男孩~~

最新推荐文章于 2023-08-16 16:02:42 发布

阅读量657

点赞数 1

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_44051048/article/details/110005851

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文深入探讨JavaScript中的正则表达式，包括创建、模式匹配和相关对象方法。同时，详细阐述DOM事件，如事件绑定、事件对象、冒泡机制，以及常用的鼠标和键盘事件。此外，还介绍了BOM中的Window对象、History对象和Location对象，以及定时器和延时器的使用。

摘要由CSDN通过智能技术生成

(1)正则表达式：

检查字符串是否符合规定的格式 检查字符串是不是电子邮箱的规则等等
严格区分大小写的

1、创建正则表达式对象：

		Var reg = new RegExp(“正则表达式”);
		Var reg = new RegExp(“正则表达式”,”匹配模式”);
		Var reg = /正则表达式/匹配模式/

2、正则表达式：

		“abc”    匹配abc这个串
		“a | ab”  匹配a或者ab
		[ ]      匹配括号里面的其中一个
		[ A - Z ]  匹配任意大写字母
		[ A - z ]	匹配任意字母
		[^0 - 9]  匹配非数字
		a{10}    匹配连续的10个a
		a{2,5}   匹配连续的a,最少2个最多5个
		(ab){3, }  匹配连续的ab，大于等于三个
		a+    匹配包含至少一个 n 的字符串。
		a*    匹配包含零个或多个 n 的字符串。
		a?    匹配任何包含零个或一个 n 的字符串。
		^a    匹配以a开头的串
		a$    匹配以a结尾的串
		.     匹配任意一个字符（除了换行和结束符）
		\.     匹配一个点
		\n    匹配换行
		(其他看API)

3、匹配模式：

i          忽略大小写，根据正则表达书匹配
g          执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m        执行多行匹配。

4、RegExp对象方法：

1  RegExp对象.text(字符串)  检查该字符串是否符合该正则表达式
2  RegExp对象.exec(字符串) 
	检查该穿中是否有符合正则表达式的字串，有则返回位置第一个出现位置

5、支持正则表达式的 String 对象的方法：

1 str.split(正则表达式对象);    将该字符串按正则表达式拆分为一个数组
2 str.search(正则表达式对象);   检查在字符串是否含有正则表达式匹配的内容
3 str.match(正则表达式对象);    将符合正则表达式的串提取出来
（正常找到第一个就是停止，正则表达式对象加上匹配模式g让他全部匹配）
4 str.replace(正则表达式对象，字符串）
将匹配到的位置替换为该字符串

（2）DOM:

DOM: Document Object Model  文档(网页)对象模型
DOM就是让我们操作网页的,把html文件里面的东西都转换为一个对象
	(DOM 提供了访问和操作HTML文档的标准方法)

1、简介：

在这里插入图片描述

2、事件简介：

事件就是一种操作如：点击鼠标，双击鼠标，关闭窗口，移动鼠标等等
	例： onclick 就表示单击的意思

事件通常有三步：
			 1 获得操作对象 
			 2 为该对象的操作赋一个函数  
			 3 在函数中写操作之后的响应
			 
实现当单击按钮，弹出111提示
   	有两种方式实现：
   	
		方式一：(这种方式不推荐，js代码和Html代码写在一块，结构和行为耦合)
		
			<button type="button" onclick="alert('111')">
				我是一个按钮
			</button>
			
		方式二：
			<button id="but1">我是一个按钮</button>
			<script >
				var but1 = document.getElementById("but1");  //获得该按钮对象
				but1.onclick = function(){       //为该对象的单击行为写一个函数
					alert("111");                           （响应函数）
				};
			</script>

常见的响应操作：
				onclick  单击    
				ondblclick  双击   
				onkeydown 某个键被按下    
				onkeyup  某个键松开
				onkeypress 某个键被按下并松开  
				onload  页面被加载完毕 
		（有很多的事件： 详细的去看API的DOM Event 对象）

		onload  事件讲解：
			这个事件常用在把script标签都写在最前面
			网页的代码执行顺序是一行一行的，当我们要把js代码写在最前面，当html文档中的某些标签没有创建的时候，当然不能创建他的对象.
			使用ohload事件，可以等整体的js代码写在最前面，
			他的作用是等页面全部加载完，在加载js代码

在这里插入图片描述

响应函数什么时候执行，并不是跟着代码一行一行执行，
而是当有该事件被触发才会执行响应函数

3、事件对象：

当响应函数被触发的时候，浏览器每次将一个事件对象转为实参传入响应函数
该事件对象封装了当前事件的一切相关信息
（比如说：鼠标坐标，键盘那个键被按下等等）

通过该事件对象可以获得相关的属性
（API的DOM event查看不同事件的相关属性）

在这里插入图片描述

	在其他浏览器都会往响应函数中传入一个事件对象
	但在IE8及以下的浏览器中是将我们事件对象作为window的event属性保存的

在这里插入图片描述

怎么实现全部浏览器的兼并？？？？？

在这里插入图片描述

4、事件的冒泡（Bubble）

在这里插入图片描述

（1） 什么是冒泡事件：
		就是相同事件向外层传导，不会向里传导，后代元素被触发，其祖先元素的相同事件也会被触发
		大部分情况下冒泡都是有用的（不需要取消冒泡），少数情况下冒泡没有用
		
 （2）怎么取消事件的冒泡？？？
		如果不希望发生冒泡，可以通过事件的对象（event）取消冒泡。
		在响应函数中添加event.cancelBubble = true ; （取消冒泡）
		只会对该响应有作用，该事件不会传给父类元素对象
		
（3）冒泡的应用：
		事件的委派
		将事件统一绑定给共同的祖先元素，这样当点击该元素的时候，
		就会一直冒泡到祖先元素上，从而通过祖先元素的响应函数处理事件

在这里插入图片描述

5、事件的绑定：

方法一：
	对象.响应事件 = function(){ //响应函数的实现};
	存在的弊端：当对同一个响应事件绑定多个响应函数的时候，会出现后面把前面响应函数覆盖的情况
	
方法二：
	对象.addEventListener(“不带on的响应事件”，响应函数，false);
	把该响应函数绑定在该响应事件上，一个元素的同一个事件可以绑定多个响应函数
	
	注意：
		1 第一个参数为事件的字符串，开头不带有on
		2 第三个参数表示是否在捕获阶段触发事件，一般传入false
		3 事件触发按绑定函数的绑定顺序分别执行响应函数
		4  IE8及其以下不支持，其他都支持

方法三：
	对象.attachEvent(“响应事件”，响应函数)
	把该响应函数绑定在该响应事件上，一个元素的同一个事件可以绑定多个响应函数
	注意：
		1 第一个参数为事件的字符串，开头带有on
		2 事件触时，发先绑定后执行
		3 只支持IE8以下
		
方法四：
	怎么实现所有浏览器兼容可以？？
	定义一个函数

在这里插入图片描述

6、事件的传播：

关于事件的传播 微软公司和网景公司 有不同的设计，最后W3C结合两家公司做出一个方案

W3C将事件的传播分为了三个阶段：
	1.捕获阶段：
			从祖先元素往响应事件的目标元素捕获
	2.目标阶段：
			捕获结束，到达被触发的目标元素的事件上
	3.冒泡阶段
			由目标元素往祖先元素上冒泡，依次触发祖先元素事件
			
可以在 对象.addEventListener()函数的最后一个参数设置true，会在捕获阶段触发
（该方法不支持IE8及其以下，相应的IE8及其以下没有捕获阶段）

7、常见鼠标和滚轮事件

在这里插入图片描述

8、常见键盘事件：

事件绑给谁？？
	键盘事件一般绑定给可以获得焦点的对象或者document
	
焦点？？
	如：点击一个文本框，可以输入东西，光标一直闪烁

在这里插入图片描述

在文本框中输入内容，是文本框的默认行为，
如果在onkeydown取消（return false）默认行为，不会输入内容到文本框
（各种事件更多还是去看API）

（4）BOM

DOM是网页html对象模型
BOM是浏览器对象模型
BOM中提供了通过js操作浏览器的方法

BOD中提供的对象：
		Window  代表整个浏览器窗口，同时window也是网页中的全局变量
		Navigator	 代表当前浏览器的信息，通过该对象识别不同的浏览器
		Location  代表当前浏览器的地址栏信息（通过location可以获得地址栏信息和跳转页面）
		History	 代表浏览器的历史记录（可以通过该对象操作浏览器的历史记录）
		（由于隐私的原因该对象不能获取到具体的历史记录，只能操作浏览器向前或者向后翻页，该操作只在当次访问的时候有效）
		Screen	 代表用户的屏幕显示器的相关信息

BOD的这些对象在浏览器中都是转为Window对象的属性来保存的
	可以通过window.navigator或者navigator来访问

（1）Navigator对象常见的属性和方法：
		Navigator对象的属性可以识别浏览器
		appName			返回浏览器的名称。
		appVersion		返回浏览器的平台和版本信息。
		appCodeName		返回浏览器的代码名。
		appMinorVersion	返回浏览器的次级版本。
		userAgent			返回由客户机发送服务器的 user-agent 头部的值。
		（等等方法去看API的Navigator）
 但是由于历史的原因Navigator对象的大部分属性都不能帮我们识别浏览器了
现在只用userAgent来判断识别浏览器，当然可以通过一些浏览器特有的属性来判断

(2)History对象常见的属性和方法:
	可以通过该对象操作浏览器的历史记录，由于隐私的原因该对象不能获取到具体的历史记录，
	只能操作浏览器向前或者向后翻页，该操作只在当次访问的时候有效
	
		Length 属性  返回浏览器历史记录列表的URL列表
		back()    加载history列表的前一个URL（和浏览器的后退按钮一样）
		forward() 加载history列表的下一个URL
		go(int)    跳转到指定的页面（go(1)向前跳转一个页面，go(-2)往后跳转2个页面）

(3)location对象常见的方法和属性:
	封装了浏览器的地址栏信息
	直接打印location，为当前页面的地址
	（如果改location，则浏览器会跳转到该网站，还会生成相应的历史记录）
	href  属性 保存当前的浏览器地址url
	assiqn(“地址”)  跳转到新网页，生成历史记录
	reload() 重新加载当前网页（reload(ture) 把当前网页缓存刷新的时候重置）
	replace(“地址”) 用新的文档替换当前文档，不生成历史记录

（5）定时器：（window方法或属性）

setInterval(函数,a) 定时调用      
		可以将一个函数每隔一段(a毫秒)时间调用一次
		该函数的返回值为一个Number值，为该定时器的唯一标识
		对该函数定时执行的时候，先把上一个关掉，以防一次开启多个定时器
		
clearInterval(唯一标识)  关闭相应的定时器
		（与setInterval结合使用）
		（可以传入任意的标识，只有遇到有效的标识才起作用，否则无操作）

（6）延时器：（window方法或属性）

setTimeout(函数，延时)	
			在指定的毫秒数后调用执行函数，只执行一次
			该函数的返回值为一个Number值，为该定时器的唯一标识
			
clearTimeout()     	
			取消由 setTimeout() 方法设置的延时 timeout。

漂浮广告制作

折叠菜单制作

（添加一个css样式就折叠，这个样式通过限制高度隐藏下面内容）

下拉菜单制作

加入收藏和设置首页制作

小镇男孩~~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JS_3(正则表达式、事件、DOM、BOM、定时器、延时器)

文章目录

(1)正则表达式：

1、创建正则表达式对象：

2、正则表达式：

3、匹配模式：

4、RegExp对象方法：

5、支持正则表达式的 String 对象的方法：

（2）DOM:

1、简介：

2、事件简介：

3、事件对象：

4、事件的冒泡（Bubble）

5、事件的绑定：

6、事件的传播：

7、常见鼠标和滚轮事件

8、常见键盘事件：

（4）BOM

（5）定时器：（window方法或属性）

（6） 延时器：（window方法或属性）

漂浮广告制作

折叠菜单制作

下拉菜单制作

加入收藏和设置首页制作

（6）延时器：（window方法或属性）