JavaScript学习笔记day3

最新推荐文章于 2024-07-26 20:46:33 发布

huangshaohui00

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量188

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/qq_51307593/article/details/125746554

版权

JavaScript

一.DOM

1.DOM的样式操作

dom对象提供了一个内置属性 "style" 来控制节点对象的样式。
"style" 属性可以获取和设置节点的样式。

1.样式少的时候使用；
2.style是对象；
3.值是字符串，没有设置值是“”；
4.命名规则，驼峰命名。和css不一样；
5.设置了类样式不能获取。（只和行内式交互，和内嵌和外链无关）；
6.box.style.cssText = “字符串形式的样式”；
7.style是一个对象，不能获取内嵌和外链。

<script>
			var app = document.getElementById('app');
			/*
				使用style属性操作节点的样式。
			*/
			app.style.width = "100px";
			app.style.height = "100px";
			app.style.backgroundColor = "pink";
			app.style.borderRadius = "50px";
		</script>

截图：
在这里插入图片描述

2.DOM节点操作【了解】

DOM是可以对节点进行新增，替换，删除的操作。
对节点的增 删 改。

创建一个节点,并且追加到指定节点中

//创建一个新的节点。
var newP = document.createElement("p");

//追加到指定节点中
//box.appendChild(newP);
box.append(newP);

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1{
				background-color: pink;
			}
			.p2{
				background-color: lightblue;
			}
			.p3{
				background-color: lightcoral;
			}
			.p4{
				background-color: lightgoldenrodyellow;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<p class="p1">这一个段落标签01</p>
			<p class="p2">这一个段落标签02</p>
			<p class="p3">这一个段落标签03</p>
			<p class="p4">这一个段落标签04</p>
		</div>
		
		<button>点击添加新的节点</button>
		
		<script>
			//鼠标点击button
			document.getElementsByTagName('button')[0].onclick = function(){
				//1.查找id为box的节点
				var box = document.getElementById('box');
				
				//2.创建一个新的节点。
				var newP = document.createElement("p");
				
				//3.给新的节点添加文本内容
				newP.innerText = "这一个新创建的段落标签";
				
				//4.给定的节点添加样式
				newP.style.backgroundColor = "lightseagreen";
				
				/*
					将新创建的节点追加到box节点中。
				*/
				//box.appendChild(newP);
				box.append(newP);
			}
		</script>
	</body>
</html>

在这里插入图片描述点击添加

插入节点

将新创建的节点插入到指定的下标位置。
box.insertBefore(newP,ps[2]);

<script>
			document.getElementsByTagName('button')[0].onclick = function(){
				//1.查找id为box的节点
				var box = document.getElementById('box');
				
				//2.创建一个新的节点。
				var newP = document.createElement("p");
				
				//3.给新的节点添加文本内容
				newP.innerText = "这一个新创建的段落标签";
				
				//4.给定的节点添加样式
				newP.style.backgroundColor = "lightseagreen";
				
				//5.获取box中所有的p元素
				var ps = box.getElementsByTagName('p');
				
				//6.将新创建的节点插入到指定的下标位置。
				box.insertBefore(newP,ps[2]);
			}
		</script>

在这里插入图片描述

替换节点
```
box.replaceChild(newP,ps[1]);
```

<script>
			document.getElementsByTagName('button')[0].onclick = function(){
				
				var box = document.getElementById('box');
				
				//1.创建一个新的节点。
				var newP = document.createElement("p");
				
				//2.给新的节点添加文本内容
				newP.innerText = "这一个新创建的段落标签";
				
				//3.给定的节点添加样式
				newP.style.backgroundColor = "lightseagreen";
				
				//4.获取box中所有的p元素
				var ps = document.getElementsByTagName('p');
				
				//6.将新创建的节点插入到指定的下标位置。
				box.replaceChild(newP,ps[1]);
			}
		</script>

在这里插入图片描述

删除节点
```
box.removeChild(ps[0]);
```

<script>
			document.getElementsByTagName('button')[0].onclick = function(){
				var box = document.getElementById('box');
				
				var ps = box.getElementsByTagName('p');
				/*
					通过对象删除指定节点。
				*/
				box.removeChild(ps[0]);
			
			}
			
		</script>

在这里插入图片描述

二.BOM

1.什么是BOM？

Broswer Object Model	浏览器对象模型。
window对象代表的浏览器窗口对象，是顶层对象。
该对象不需要使用new关键字来创建，可以直接使用。
任何对象都是window对象的子对象。
所以BOM可以理解为，浏览器提供的很多用于操作窗口的内置对象。

screen对象【了解】

该对象是描述用户的屏幕信息的。

navigator对象【了解】

该对象描述用户浏览器信息的。

定时器

按照设定的时间执行指定的业务。
分类：
	a)一次性定时器
		setTimeout();
	b)循环性定时器
		setInterval();
清除定时器
clearTimeout();
clearInterval();

三.正则表达式

1.什么是正则表达式

正则表达式通常是用来被检索、替换那些符合某个模式的文本。
校验用户输入内容的合法性。
通俗的说就是负责字符串匹配处理的规则。

2.如何使用正则表达式

JS提供了一个对象 "RegExp" 可以验证用户所填写的数据是否符合规则。

1.创建正则表达式对象。
	//方式一
	var reg = new RegExp();
	
	//方式二	常用
	var reg = /[]|\d/;
	

2.调用test(ch)方法验证内容
	test方法会对传入的ch进行全量检索。
	来查看是否符合正则表达式的规则。
	
	
注意：
	正则表达式要有开头有结尾。否则会出问题。

3.正则表达式符号

字符集：

[1234] 表示1,2,3,4之一
[^12] 表示除了1和2
[1-5] 表示1-5
[a-f] 表示a-f

预定义字符集：

\d 表示纯数字0-9
\D 表示非数字
\w 表示纯字符[0-9a-zA-Z_]
\W 表示非字符
\s 表示空白 \t \n \r
\S 表示非空白
. 表示任意字符

表示数量：

^ 表示开头
$ 表示结尾
{m,n} 表示m到n个字符
{n,} 表示至少n个
{n} 表示n个
? 表示出现0到1次
＋表示1到n次
*表示0到n次

需求：

1.邮箱
	^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
2.强密码
	^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
3.身份证号码
	(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)
4.电话号码
	^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$

正则表达式不用记，直接百度正则表达式生成器，里面有大量的写好的正则表达式，下面两个网站足够我们使用了。

正则表达式生成器

 菜鸟工具

在这里插入图片描述

huangshaohui00

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript学习笔记day3

JavaScript截图：创建一个节点,并且追加到指定节点中完整代码点击添加插入节点替换节点删除节点screen对象【了解】navigator对象【了解】定时器三.正则表达式1.什么是正则表达式2.如何使用正则表达式3.正则表达式符号字符集：预定义字符集：表示数量：需求：正则表达式不用记，直接百度正则表达式生成器，里面有大量的写好的正则表达式，下面两个网站足够我们使用了。正则表达式生成器菜鸟工具...
复制链接

扫一扫