JS自学day3

最新推荐文章于 2024-04-27 06:12:53 发布
最新推荐文章于 2024-04-27 06:12:53 发布
阅读量183 收藏
点赞数
分类专栏： JS学习笔记 JS学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44791254/article/details/88698276
版权

1.创建新的HTML元素

如果需要向HTML DOM添加新元素，必须先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="div1">
			<p id="p1">这是一个段落</p>
			<p id="p2">这是另一个段落</p>
		</div>
		<script type="text/javascript">
			var para=document.createElement("p");// 创建一个新元素
			var node=document.createTextNode("这是新段落。");// 创建一个文本节点
			para.appendChild(node);// 向p元素追加创建的文本节点
			var element=document.getElementById("div1");// 找到一个已有元素
			element.appendChild(para);// 向已有元素追加新创建的元素
		</script>
	</body>
</html>

2.删除HTML元素

要删除HTML元素，在DOM中需要明确你希望删除的元素，以及所在的父元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="div1">
			<p id="p1">这是一个段落</p>
			<p id="p2">这是另一个段落</p>
			<script type="text/javascript">
				var parent=document.getElementById("div1");// 找到div1
				var child=document.getElementById("p1");// 找到p1
				parent.removeChild(child);// 从父元素中删除子元素
			</script>
		</div>
	</body>
</html>

也可以通过下面的方法来确定父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

3.Window

实用的JavaScript获取浏览器窗口内部宽度、高度的方案（涵盖所有浏览器）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p id="demo"></p>
		<script type="text/javascript">
			var w=window.innerWidth
			||document.documentElement.clientWidth
			||document.body.clientWidth;
			var h=window.innerHeight
			||document.documentElement.clientHeight
			||document.body.clientHeight;
			x=document.getElementById("demo");
			x.innerHTML="浏览器的内部窗口宽度："+w+"，高度："+h+"。";
		</script>
	</body>
</html>

4.Window.screen

Window.screen的可用宽度和可用高度：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			document.write("可用宽度："+screen.availWidth);
			document.write("可用高度"+screen.availHeight);
		</script>
	</body>
</html>

5.Window location

window.location对象在编写时可以不使用window

  • location.hostname返回web主机的域名
  • location.pathname返回当前页面的路径和文件名
  • location.port返回web主机的端口（80或443）
  • location.protocol返回所使用的web协议（http://或者https?/）

实例练习

  • location.href属性返回当前页面的URL
<script type="text/javascript">
	document.write(location.href);
</script>
  • location.pathname属性返回URL的路径名
<script type="text/javascript">
	document.write(location.pathname);
</script>
  • location.assign()方法加载新的文档。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function newDoc(){
				window.location.assign("http://www.baidu.com")
			}
		</script>
	</head>
	<body>
		<input type="button" value="加载新页面" "newDoc()"/>
	</body>
</html>

6.Window History

  • history.bakc()与在浏览器点击后退按钮相同
    实例，在页面创建后退按钮
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function goBack(){
				window.history.back();
			}
		</script>
	</head>
	<body>
		<input type="button" value="返回" "goBack()"/>
	</body>
</html>
  • history.forward()与在浏览器点击前进按钮相同
    实例，在页面创建前进按钮
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function forward(){
				window.history.forward();
			}
		</script>
	</head>
	<body>
		<input type="button" value="前进" "forward()"/>
	</body>
</html>

7.Window Navigtor

window.navigtor对象包含有关访问者浏览器的信息。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="example"></div>
		<script type="text/javascript">
			txt = "<p>Browser CodeName:" + navigator.appCodeName + "</p>"
			txt += "<p>Browser Name:" + navigator.appName;
			txt += "<p>Browser Version: " + navigator.appVersion + "</p>";
			txt += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
			txt += "<p>Platform: " + navigator.platform + "</p>";
			txt += "<p>User-agent header: " + navigator.userAgent + "</p>";
			txt += "<p>User-agent language: " + navigator.systemLanguage + "</p>";
			document.getElementById("example").innerHTML=txt;
		</script>
	</body>
</html>

8.JavaScript计时

通过JavaScript我们能够做到经过一个时间间隔，再执行代码，而不是在函数调用后立即执行，称为计时事件。

  • 单击按钮后，会在5s后弹出一个警告框
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function timeMsg(){
				var t=setTimeout("alert('5秒！')",5000);
			}
		</script>
	</head>
	<body>
		<input type="button" value="显示定时的警告框" "timeMsg()"/>
		<p>请点击上面的按钮。警告框会在5秒后显示。</p>
	</body>
</html>
  • 点击按钮后，会执行2、4、6秒的计时
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function timedText(){
				var t1=setTimeout("document.getElementById('txt').value='2秒'",2000);
				var t2=setTimeout("document.getElementById('txt').value='4秒'",4000);
				var t3=setTimeout("document.getElementById('txt').value='6秒'",6000);				
			}
		</script>
	</head>
	<body>
		<form>
		<input type="button" value="显示计时的文本" "timedText()" />
		<input type="text" id="txt" />
		</form>
		<p>点击上面的按钮，输入框会显示出已经逝去的时间（2、4、6秒）。</p>
	</body>
</html>
  • 点击按钮后开始运行一个无穷循环的计时器。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var c=0;
			var t;
			function timeCount(){
				document.getElementById("txt").value=c;// 给起始值
				c=c+1;// 循环的步长
				t=setTimeout("timeCount()",1000);// 设定时间，并在1秒后重新调用函数，进行循环
			}
		</script>
	</head>
	<body>
		<form>			
			<input type="button" value="开始计时" "timeCount()"/>// 开始开关
			<input type="text" id="txt" />// 显示框
		</form>
		<p>请点击上面的按钮。输入框会从0开始一直进行计时。</p>
	</body>
</html>
  • 带有结束按钮的计时器。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var c=0;
			var t;
			function mytime(){
				document.getElementById("txt").value=c;
				c=c+1;
				t=setTimeout("mytime()",1000);
			}
			function stoptime(){
				clearTimeout(t);
			}
		</script>
	</head>
	<body>
		<form>
			<input type="button" value="开始" "mytime()" />
			<input type="text" id="txt" />
			<input type="button" value="结束" "stoptime()" />
		</form>
	</body>
</html>

使用计时器制作的钟表：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function start(){
				var today=new Date();
				var h=today.getHours();
				var m=today.getMinutes();
				var s=today.getSeconds();
				// add a zero in front of numbers<10;
				m=check(m);
				s=check(s);
				document.getElementById("txt").innerHTML=h+":"+m+":"+s;
				t=setTimeout("start()",500)
			}
			function check(i){
				if(i<10){
					i="0"+i;					
				}
				return i;
			}
		</script>
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				background-color:skyblue;
				text-align: center;
				margin-top:100px;
				margin-left:100px;
				border-radius:50px;
				font-size:20px;
				color:red;
				line-height: 100px;
			}			
		</style>
	</head>
	<body "start()">
		<div id="txt"></div>			
	</body>
</html>

JavaScript中使用计时器的两个关键方法是：

setTimeout()

未来的某个时间执行代码

clearTimeout()

取消setTimeout()
总结：setTimeout()方法会返回一个值，它的第一个参数是含有JavaScript语句的字符串，这个语句可以使"alert(‘5秒’)"；或者对函数的调用，第二个参数是从当前起多少毫秒后执行第一个参数。
1000毫秒等于一秒。

9.cookie

cookie用来识别用户。

  • cookie是存储于访问者的计算机中的变量。每当同一台电脑通过浏览器请求某个页面时，就会发送cookie。可以通过JavaScript来创建和取回cookie的值。
恋风（微信）
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
week9day3proj1
02-11
【描述】"week9day3proj1"描述简洁，可能意味着这是第九周的第三天，学员或自学者需要完成的一个实践项目。在Web开发的学习过程中，项目通常是理论知识的实践应用，帮助巩固和加深理解。 【标签】"HTML"指出了这个...
Day02
03-10
3. **Web开发基础**：如果课程涉及Web开发，那么HTML、CSS和JavaScript的基础知识可能会在这一天进行讲解。HTML用于构建网页结构，CSS负责样式设计，而JavaScript则是实现交互性的关键。 4. **数据库基础**：SQL...
【js】window.jQuery || document.write(“＜script src=‘javascript/jquery-1.7.1.min.js‘＞“什么意思？
向着光芒的女孩
04-17 7578
<script type="text/javascript"> window.jQuery || document.write("<script src='javascript/jquery-1.7.1.min.js'>" + "<" + "/script>"); </script>也有这样的：<script type="text/javascript" src="//aja
JS自学Day3-运算符
m0_64005381的博客
09-20 194
js零基础自学，该篇讲解了JS里的运算符，以及会遇到的一些问题。 算数运算符、赋值运算符、一元运算符、比较运算符、比较字符串细节、逻辑运算符、运算符里的短路、运算符优先级。
JavaScript自学之路day3
mingnevergivesup的博客
08-10 176
day3
JS自学day1
前端工程师学习记录
03-18 349
1. script元素 在使用script嵌入JavaScript代码时，记住不要在代码中的任何地方出现"/script"字符串，负责会引发错误。例如下面的代码，执行时就会出现错误。 <script> function sayScript(){ alert("</script>"); } </script> 如果需要引入外部JS文件，那么src属...
自学node.js day3
weixin_51062389的博客
07-13 123
1.模块系统 使用node编写应用程序主要就是使用 EcmaScript语言 核心模块 文件操作的fs HTTP服务的http url路径操作模块 path路径处理模块 os操作系统信息 模块名 第三方模块 art-template 必须经过下载才可以使用 模块名 自己写的模块 自己创建的文件 文件路径 什么是模块化 文件作用域 通信规则 加载 require 导出 1.1commonJS模块规范 node中的js有模块系统： 模块作用域 使用require来加
自学Vue3 Day2
最新发布
G24gg的博客
04-27 1093
Vue 3在组件通信方面带来了一些新特性和改进，特别是Composition API的引入，为开发者提供了更灵活的组件逻辑编写方式。同时，Vue 3的响应式系统的改进也会影响到组件间通信的实现。虽然Vue 2和Vue 3在很多基本概念上保持一致，但Vue 3提供了更多的工具和优化来帮助开发者构建更高效、更可维护的应用程序。子组件可以直接修改父组件的值了。
js自学笔记day2
qq_45952745的博客
10-04 163
1.JavaScript输入输出语句（重要） 为了方便信息的输入和输出，js中提供了一些输入输出语句，常用语法如下： <head> <script> prompt('请输入您的年龄');//界面输入框 alert('计算的结果是');//弹出警示窗,展示给用户的 console.log('我是程序员能看到的');//控制台输出 给程序员测试用的 </script> </head> 2.变量（非常重要） ...
js自学_day01_基础篇
YJ_meditation的博客
08-05 352
今天在公交上的时候看了一下js比较基础的东西，从基础学起，一点一滴都不要错过。 首先js的东西是写在script标签里的，script标签定义比较初始的东西就放在head标签中，如果是function等一般放在body尾部，这样放是因为程序是自上而下地在执行的。
day02-js基础作业.zip
10-01
这个“day02-js基础作业.zip”压缩包很可能是某个在线课程或自学教程的第二日练习，旨在帮助学习者巩固JS基础知识。 在JS的学习过程中，基础是非常关键的部分，它包括以下几个主要知识点： 1. 变量与数据类型：JS...
noderide:noderide是nodejs自学的记录
07-20
noderide是nodejs自学的记录，仅供娱乐。... :-)节点Day1静态文件服务器1.0 Day2 静态文件服务器 1.1 Day3 静态文件服务器 1.2环境安装是必要的。 （忽略你是否安装了它） 签出代码并在命令中运行。
day01（HTML01-认知）.zip
12-01
这个“day01（HTML01-认知）.zip”压缩包文件很可能是某个在线课程或自学教程的第一天内容，专注于对HTML的基本理解和应用。 HTML的核心在于一系列的标签，这些标签构成了网页的结构和内容。例如，`<html>`标签是...
JS自学day2
前端工程师学习记录
03-19 191
1.正则表达式 RegExp对象用于规定在文本中检索的内容。 定义RegExp 通过new关键字来定义RegExp对象。 var part1=new RegExp("e"); 定义了名为part1的RegExp对象，其模式是"e"。 当使用该RegExp对象在一个字符串中检索时，寻找的是字符"e"。 RegExp对象的方法 test（）方法检索字符串中的指定值，返回值是true或者fals...
JS学习第一周总结
前端工程师学习记录
03-22 578
前段三层 HTML 结构层 CSS 样式层 JavaScript 行为层 1.JS能做什么？ 嵌入动态文本于HTML页面。 对浏览器事件作出反应。 读写HTML元素 在数据被提交到服务器之前验证数据。 检测访客的浏览器信息。 基于Node.js技术进行服务器端编程。 2.JS简介 JavaScript是一种直译式脚本语言，是一种动态型、弱类型、基于原型的语言。 基本特点： 是一种解释性脚...
JS学习第二天总结
前端工程师学习记录
03-19 481
1.昨天作业总结 一定要牢记，使用prompt()接收到的数据是字符串型的，要做算术运算，要先使用parseInt()转换成数值型，才能进行操作。 2.新的数据类型-布尔Boolean 昨天已经说了两种基本数据类型： Number（数值类型） 控制台显示蓝色 NaN是数值类型 String（字符串类型） 控制台显示黑色 今天再说一种：Boolean（布尔），他只有两个值 true（真） fals...
JS学习第二周总结
前端工程师学习记录
03-30 365
1.上周内容回顾 多个script标签，一个报错，另一个还是会继续执行。 多个window.onload入口函数，后面的会覆盖前面的，最终只会执行一个。 函数：可以重复使用的代码块的封装。 函数三种创建方式：函数声明式、函数表达式、Function——构造函数。 变量声明提升：JS执行前会预解析，将变量声明提升到最前面。 2.函数参数 注意点一： function fun(a,b,c){ ...
JavaScript经典权威指南：最佳自学资料
JavaScript，全名JavaScript（简称JS），是一种广泛应用于Web开发的轻量级、解释型的编程语言。它主要用于增强网页的交互性和动态功能，与HTML和CSS一起构成了现代网页开发的三大核心技术。JavaScript的主要特点包括...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值