Web从小白到大神Day12 2020.10.17

最新推荐文章于 2024-04-16 11:57:52 发布

独饮敌敌畏丶

最新推荐文章于 2024-04-16 11:57:52 发布

阅读量126

点赞数

分类专栏： Web前端学习文章标签： js

本文链接：https://blog.csdn.net/afdafvdaa/article/details/109128490

版权

Web前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一.DOM和BOM介绍

1.JavaScript包括三大块：

①ECMAScript：JS的核心语法。（ES规范/ECMA-262标准）
②DOM：Document Object Model（文档对象模型，对网页当中的节点进行增删改的过程）HTML文档被当作一棵DOM树来看待。
③BOM：Browser Object Model（浏览器对象模型）
比如关闭浏览器窗口，打开一个新的浏览器窗口，后退、前进、浏览器地址栏上的地址等，都是BOM编程

2.BOM和DOM的区别和联系

BOM的顶级对象是window
DOM的顶级对象是：document
实际上BOM是包括DOM的

3.初次尝试DOM编程-获取文本框的value

<!DOCTYPE html>
<html>
 
	<head>
		<title>DOM编程案例-获取文本框的value</title>
	</head>
	<body>
			<script type="text/javascript">
				window.onload = function(){
					document.getElementById("mybutton").onclick = function(){
							alert(document.getElementById("mytext").value);
					    }
				}
			</script>
			<input type="text" id="mytext"/>
			<input type="button" value="获取" id="mybutton"/>
	</body>
</html>

二.innerText和innerHTML

<!DOCTYPE html>
<html>
 
	<head>
		<title>innerHTML和innerText</title>
	</head>
	<body>
			<!--innerText和innerHTML属性有什么区别？
					相同点：都是设置元素内部的内容
					不同点：
							innerHTML会把后面的“字符串”当作一段HTML代码来解释并执行
							innerText，即使后面是一段HTML代码，也只是将其当作普通的字符串来看待-->
			<script type="text/javascript">
				window.onload = function(){
					document.getElementById("btn").onclick=function(){
							/*document.getElementById("div").innerHTML="<font color='red'>用户名不能为空</font>"*/
							document.getElementById("div").innerText="用户名不能为空"
						}
				}
			</script>
			<input type="button" value="设置div中的内容" id="btn"/>
			<div id="div"></div>
	</body>
</html>

三.正则表达式

1.什么是正则表达式，有什么用处？

正则表达式（Regular Expression），主要用在字符串格式匹配方面
它实际上是一门独立的学科，最初用在医学方面，用来表示神经符号等。目前使用最多的是计算机编程领域，用作字符串格式匹配，包括搜索方面等。

2.常见正则表达式符号

. 匹配除换行符以外的任意字符 
\w 匹配字母或数字或下划线或汉字 
\s 匹配任意的空白符 
\d 匹配数字 
\b 匹配单词的开始或结束 
^ 匹配字符串的开始 
$ 匹配字符串的结束 

* 重复零次或更多次 
+ 重复一次或更多次 
? 重复零次或一次 
{n} 重复n次 
{n,} 重复n次或更多次 
{n,m} 重复n到m次 

\W 匹配任意不是字母，数字，下划线，汉字的字符 
\S 匹配任意不是空白符的字符 
\D 匹配任意非数字的字符 
\B 匹配不是单词开头或结束的位置 
[^x] 匹配除了x以外的任意字符 
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符

3.使用示例

<!DOCTYPE html>
<html>
 
	<head>
		<title>关于正则表达式</title>
	</head>
	<body>
			<!--qq号的正则表达式
					^[1-9][0-9]{4,}$
				email的正则表达式：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
					

				创建正则表达式对象
					1.var regExp = /正则表达式/flags;
					2.使用内置支持类RegExp
						即 var regExp = new RegExp("正则表达式","flags");
					其中flags可选项。
					如果使用语法 2 要用引号将 flag 引起来。标志可以组合使用，可用的有： 
					g （全文查找出现的所有 pattern） 
					i （忽略大小写） 
					m （多行查找）（ES规范制定之后才支持m），如果前面是正则表达式，则flags不能用m，只有前面是普通字符串的时候m才可以使用
				test（）方法
					正则表达式对象.test(用户填写的字符串)，返回true或者false
				-->
			<script type="text/javascript">
				window.onload = function(){
					document.getElementById("btn").onclick=function(){
							var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
							if(!emailRegExp.test(document.getElementById("email").value)){
								alert("邮箱地址不合法");
							}

						}
					//给文本框绑定focus
					document.getElementById("email").onfocus = function(){
						alert("sdasdasd");
					}
				}

			</script>
			<input type="text" id="email"/>
			<br>
			<input type="button" value="验证邮箱" id="btn"/>
	</body>
</html>

独饮敌敌畏丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web从小白到大神Day12 2020.10.17

一.DOM和BOM介绍1.JavaScript包括三大块：①ECMAScript：JS的核心语法。（ES规范/ECMA-262标准）②DOM：Document Object Model（文档对象模型，对网页当中的节点进行增删改的过程）HTML文档被当作一棵DOM树来看待。③BOM：Browser Object Model（浏览器对象模型）比如关闭浏览器窗口，打开一个新的浏览器窗口，后退、前进、浏览器地址栏上的地址等，都是BOM编程2.BOM和DOM的区别和联系BOM的顶级对象是windowD
复制链接

扫一扫

专栏目录